WooCommerce: как установить обновление количества товаров в корзине без перезагрузки страницы

Проблема: количество товаров в корзине обновляется только после перезагрузки страницы

В стандартной комплектации WooCommerce изменение количества товаров в корзине требует перезагрузки страницы для обновления итоговой суммы и отображения новых данных. Для улучшения UX необходимо реализовать динамическое обновление корзины при изменении количества без перезагрузки.

Диагностика проблемы

Если при изменении количества товара в корзине:
- Итоговая сумма не меняется,
- Страница не обновляется,
- Пользователь видит устаревшую информацию,
значит, отсутствует AJAX-обработка изменения количества в корзине.

Проверьте, что вы используете стандартный WooCommerce шаблон корзины и не отключены ли скрипты WooCommerce, ответственные за AJAX.

Пошаговое решение: обновление количества товаров с помощью AJAX

1. Добавьте обработчик события изменения количества товара в корзине

В файл темы functions.php или в отдельный JS-файл добавьте следующий скрипт, который будет отслеживать изменение поля с количеством и отправлять AJAX-запрос:

jQuery(function($){
    $(document).on('change', '.woocommerce-cart-form .qty', function(){
        var $input = $(this);
        var cart_item_key = $input.closest('tr.cart_item').attr('data-cart_item_key');
        var quantity = $input.val();

        $.ajax({
            url: woocommerce_params.ajax_url,
            type: 'POST',
            data: {
                action: 'update_cart_item_quantity',
                cart_item_key: cart_item_key,
                quantity: quantity,
            },
            success: function(response){
                if(response && response.fragments) {
                    $.each(response.fragments, function(key, value) {
                        $(key).replaceWith(value);
                    });
                }
            }
        });
    });
});

2. Добавьте PHP обработчик AJAX запроса

В functions.php добавьте следующий код для обработки обновления количества:

add_action('wp_ajax_update_cart_item_quantity', 'update_cart_item_quantity_callback');
add_action('wp_ajax_nopriv_update_cart_item_quantity', 'update_cart_item_quantity_callback');

function update_cart_item_quantity_callback() {
    if (!isset($_POST['cart_item_key'], $_POST['quantity'])) {
        wp_send_json_error();
    }
    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
    $quantity = intval($_POST['quantity']);

    if ($quantity < 0) {
        $quantity = 0;
    }

    WC()->cart->set_quantity($cart_item_key, $quantity, true);

    WC()->cart->calculate_totals();

    ob_start();
    woocommerce_mini_cart();
    $mini_cart = ob_get_clean();

    // Обновляем стандартные фрагменты корзины WooCommerce
    WC_AJAX::get_refreshed_fragments();

    wp_send_json_success(WC_AJAX::get_refreshed_fragments());
}

3. Обеспечьте загрузку скрипта и локализацию параметров

В functions.php подключите ваш JS и передайте URL для AJAX:

function enqueue_custom_cart_quantity_script() {
    if (is_cart()) {
        wp_enqueue_script('custom-cart-quantity', get_template_directory_uri() . '/js/custom-cart-quantity.js', array('jquery'), '1.0', true);
        wp_localize_script('custom-cart-quantity', 'woocommerce_params', array(
            'ajax_url' => admin_url('admin-ajax.php'),
        ));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_cart_quantity_script');

Проверка результата после внедрения

• Откройте страницу корзины.
• Измените количество любого товара.
• Убедитесь, что итоговая сумма и количество товаров обновились без перезагрузки страницы.
• Проверьте в консоли браузера отсутствие ошибок JS и успешные AJAX-запросы.

Частые ошибки и как их исправить

• Не работают AJAX-запросы: Проверьте подключение скриптов и правильность URL AJAX (admin-ajax.php).
• Неверные ключи корзины: Убедитесь, что в HTML-разметке корзины есть атрибут data-cart_item_key на строках товаров.
• Скрипт не реагирует на изменение: Проверьте, что селектор .woocommerce-cart-form .qty соответствует полям количества.
• Итоговая сумма не обновляется: После изменения количества вызовите WC()->cart->calculate_totals(); и используйте стандартные фрагменты WooCommerce для обновления.

Практические советы по производительности и безопасности

• Используйте wp_send_json_success() и wp_send_json_error() для корректной передачи ответов AJAX.
• Санитизируйте входящие данные (sanitize_text_field, intval), чтобы избежать уязвимостей.
• Минимизируйте объем передаваемых данных в AJAX, обновляйте только необходимые части страницы.
• Кешируйте фрагменты, если корзина нечасто меняется, для снижения нагрузки.

Сравнение вариантов реализации обновления количества товара в корзине