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

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

По умолчанию WooCommerce обновляет корзину после изменения количества товара с помощью кнопки «Обновить корзину». Это неудобно для пользователей и снижает конверсию. Задача — сделать обновление количества товаров динамичным, без перезагрузки всей страницы, используя AJAX.

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

Если при изменении количества товара в корзине страница перезагружается, значит AJAX-обработчик не подключен или не срабатывает:

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

Пошаговое решение: добавляем AJAX обновление количества товаров

1. Подключение скрипта для обработки изменения количества

function custom_enqueue_ajax_cart_script() {
    if (is_cart()) {
        wp_enqueue_script('custom-ajax-cart', get_stylesheet_directory_uri() . '/js/ajax-cart.js', array('jquery', 'wc-cart-fragments'), '1.0', true);
        wp_localize_script('custom-ajax-cart', 'ajax_cart_params', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-cart-nonce'),
        ));
    }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_ajax_cart_script');

2. Создаем файл ajax-cart.js с обработчиком изменения количества

jQuery(function($) {
    $('form.woocommerce-cart-form').on('change', 'input.qty', function() {
        var $form = $('form.woocommerce-cart-form');
        var data = $form.serialize();
        data += '&action=update_cart_qty&nonce=' + ajax_cart_params.nonce;

        $.post(ajax_cart_params.ajax_url, data, function(response) {
            if (response.success) {
                $('.woocommerce-cart-form').html(response.data.cart_html);
                $(document.body).trigger('updated_cart_totals');
            } else {
                alert('Ошибка обновления корзины.');
            }
        });
    });
});

3. Обработка AJAX-запроса в PHP

function ajax_update_cart_qty() {
    check_ajax_referer('ajax-cart-nonce', 'nonce');

    foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) {
        $qty_key = 'cart[' . $cart_item_key . '][qty]';
        if (isset($_POST[$qty_key])) {
            $qty = intval($_POST[$qty_key]);
            WC()->cart->set_quantity($cart_item_key, $qty, false);
        }
    }

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

    ob_start();
    wc_get_template('cart/cart.php');
    $cart_html = ob_get_clean();

    wp_send_json_success(array('cart_html' => $cart_html));
}
add_action('wp_ajax_update_cart_qty', 'ajax_update_cart_qty');
add_action('wp_ajax_nopriv_update_cart_qty', 'ajax_update_cart_qty');

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

Откройте страницу корзины, измените количество товара в поле ввода. Количество должно измениться, а сумма в корзине — обновиться без перезагрузки страницы. В консоли браузера не должно быть ошибок JavaScript или AJAX.

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

• Не срабатывает AJAX-запрос: проверьте правильность URL AJAX, nonce, отсутствие ошибок JS.
• Корзина не обновляется корректно: убедитесь, что WC()->cart->calculate_totals() вызывается после изменения количества.
• Обновляется не вся корзина: в ответе возвращайте полный HTML корзины wc_get_template('cart/cart.php'), а не только часть.

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

• Используйте wp_localize_script для передачи AJAX URL и nonce в JS.
• Обрабатывайте nonce в PHP для защиты от CSRF.
• Обновляйте только необходимые части страницы, чтобы снизить нагрузку.
• Кэшируйте статику, но исключите страницы корзины из кэша.

Сравнение вариантов реализации AJAX обновления корзины