Как убрать перезагрузку страницы при добавлении товара?

Question

[Дмитрий Ярощук]

Есть карточка товара, при нажатие на кнопку "Добавить в корзину" товар добавляется в корзину(реализована при помощи плагина WPC Fly Cart 5.9.4) в нужном количестве, но страница перезагружается, не получается убрать перезагрузку страницы, при этом сохранить добавление нужного количества товара в корзину.

Верстка карточки товара

<?php
defined('ABSPATH') || exit;

global $product;
?>

<section class="single-product-custom">

    <div class="container">
        <div class="single-product-custom__inner">
            <div class="single-product-custom__image">
                <?php
                /**
                 * Product image
                 */
                do_action('woocommerce_before_single_product_summary');
                ?>
            </div>

            <div class="single-product-custom__content">

                <p class="single-product-custom__sku">Артикул: <?php echo $product->get_sku(); ?></p>

                <div class="single-product-custom__meta">

                    <div class="single-product-custom__title"><?php the_title(); ?></div>
                    <button class="single-product-custom__product-favorite">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                            <path d="M15.9998 28.4667L14.0665 26.7067C7.19984 20.48 2.6665 16.36 2.6665 11.3333C2.6665 7.21333 5.89317 4 9.99984 4C12.3198 4 14.5465 5.08 15.9998 6.77333C17.4532 5.08 19.6798 4 21.9998 4C26.1065 4 29.3332 7.21333 29.3332 11.3333C29.3332 16.36 24.7998 20.48 17.9332 26.7067L15.9998 28.4667Z"
                                  fill="#CFCFCF"/>
                        </svg>
                    </button>
                </div>

                <p class="single-product-custom__price">
                    <?php
                    echo wc_price($product->get_regular_price());
                    ?>
                </p>


                <div class="single-product-custom__attributes">

                    <div class="single-product-custom__controls">
                        <?php
                        // Для variable: выведет селекты атрибутов + qty + кнопку.
                        // Для simple: выведет только qty + кнопку (без селектов).
                        woocommerce_template_single_add_to_cart();
                        ?>
                    </div>

                    <p class="single-product-custom__description">
                        <?php the_content(); ?>
                    </p>

                    <div class="single-product-custom__specs">
                        <table>
                            <?php
                            $attributes = $product->get_attributes();
                            
                            if ( ! empty( $attributes ) ) :
                                foreach ( $attributes as $attribute ) :
                                    // название атрибута
                                    $name = wc_attribute_label( $attribute->get_name() );
                                    
                                    // значения атрибута
                                    if ( $attribute->is_taxonomy() ) {
                                        $terms = wc_get_product_terms( $product->get_id(), $attribute->get_name(), ['fields' => 'names'] );
                                        $value = ! empty( $terms ) ? implode( ', ', $terms ) : '—';
                                    } else {
                                        $value = $attribute->get_options() ? implode( ', ', $attribute->get_options() ) : '—';
                                    }
                                    ?>
                                    <tr>
                                        <td><strong><?php echo esc_html( $name ); ?></strong></td>
                                        <td><?php echo esc_html( $value ); ?></td>
                                    </tr>
                                <?php
                                endforeach;
                            else :
                                ?>
                                <tr>
                                    <td colspan="2"><?php esc_html_e( 'Атрибутів немає', 'your-theme' ); ?></td>
                                </tr>
                            <?php endif; ?>
                        </table>
                    </div>
                </div>
            </div>
        </div>
</section>

Fubctions.php

<?php

add_filter('woocommerce_product_loop_start', 'modify_product_loop_start');
function modify_product_loop_start($html)
{
    $html = '<ul class="products products--grid">';
    return $html;
}

// Remove "Ви увійшли як" from comments in product page
add_filter('comment_form_logged_in', '__return_empty_string');

// Remove default filters from comments
remove_filter('comment_form_defaults', 'woocommerce_comment_form_defaults');
remove_filter('comment_form_fields', 'woocommerce_comment_form_fields');

// AJAX comments in product page
function enqueue_custom_reviews_script() {
    wp_enqueue_script(
        'custom-reviews',
        get_stylesheet_directory_uri() . '/assets/js/core.min.js',
        array(),
        null,
        true
    );

    wp_localize_script('custom-reviews', 'customReviews', [
        'ajaxurl' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\enqueue_custom_reviews_script');

// AJAX comments loading
function load_more_reviews() {
    if (!isset($_POST['product_id']) || !isset($_POST['offset'])) {
        wp_send_json_error(['message' => 'Missing parameters']);
    }
    
    $product_id = intval($_POST['product_id']);
    $offset = intval($_POST['offset']);
    $number = isset($_POST['number']) ? intval($_POST['number']) : 5;
    
    $comments = get_comments([
        'post_id' => $product_id,
        'status'  => 'approve',
        'number'  => $number,
        'offset'  => $offset,
    ]);
    
    if (!$comments) {
        wp_send_json_success(['html' => '']);
    }
    
    ob_start();
    foreach ($comments as $comment) : ?>
        <div class="custom-review" data-comment-id="<?php echo esc_attr($comment->comment_ID); ?>">
            <div class="custom-review__header">
                <span class="custom-review__author"><?php echo esc_html($comment->comment_author); ?></span>
                <span class="custom-review__date"><?php echo esc_html(get_comment_date('d.m.Y', $comment)); ?></span>
            </div>
            <p class="custom-review__content"><?php echo esc_html($comment->comment_content); ?></p>
        </div>
    <?php endforeach;
    
    $html = ob_get_clean();
    wp_send_json_success(['html' => $html]);
}

add_action('wp_ajax_load_more_reviews', __NAMESPACE__ . '\\load_more_reviews');
add_action('wp_ajax_nopriv_load_more_reviews', __NAMESPACE__ . '\\load_more_reviews');


// Get menu__item and menu__kink to add custom styles

// functions.php
add_filter('nav_menu_css_class', function ($classes, $item, $args) {
    if (!empty($args->theme_location) && $args->theme_location === 'header') {
        $classes[] = 'menu__item';
    }
    return $classes;
}, 10, 3);

add_filter('nav_menu_link_attributes', function ($atts, $item, $args) {
    if (!empty($args->theme_location) && $args->theme_location === 'header') {
        $atts['class'] = isset($atts['class']) ? $atts['class'].' menu__link' : 'menu__link';
    }
    return $atts;
}, 10, 3);



?>

Answer 1

[WP Panda]

1) Вы изуродовали карточку продукта, даже в таком виде оно имеет право на существование, но хуки надо вернуть на место как и стандартные классы от woo а весь лишний вывод на этих хуках отключить через remove_action
2) подключить или стандарный woo add to cart js к сингл продуктам или написать собственный
3) для стандартного надо добавить класс к кнопке добавления в корзину ajax_add_to_cart тоже синглом + написать скрипт который добавит quantity к урлу при изменении количества.

но лучше кастомный скрипт написать, это гибче.

а вообще этот ваш WPC Fly Cart сам перехватывает добавление в корзину и делает его через аякс везде, возможно вы или с настройками не разобрались или он конфликтует с чем-то, включаем отладку/ профилировщик, смотрим эвенты повешенные на кнопку и все будет сразу видно