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

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

По умолчанию WooCommerce обновляет корзину только после полной перезагрузки страницы, когда пользователь изменяет количество товара. Это неудобно для современных сайтов, где ожидается мгновенный отклик без обновления страницы. Чтобы решить эту задачу, необходимо реализовать AJAX-обработку изменения количества товара в корзине.

Проблемы, с которыми сталкиваются пользователи:

• Количество товара меняется, но сумма и содержимое корзины обновляются только после перезагрузки.
• Дублирование событий или некорректное обновление корзины при использовании кастомных тем.
• Ошибки в JavaScript, мешающие срабатыванию AJAX-запросов.

Пошаговое решение: реализация AJAX-изменения количества товаров

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

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

function enqueue_ajax_quantity_script() {
    if (is_cart()) {
        wp_enqueue_script('ajax-quantity', get_template_directory_uri() . '/js/ajax-quantity.js', array('jquery'), '1.0', true);
        wp_localize_script('ajax-quantity', 'ajax_qty_params', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-qty-nonce')
        ));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_quantity_script');

2. JavaScript-код для отправки AJAX-запроса

Создайте файл ajax-quantity.js в папке js вашей темы с таким содержанием:

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

        if (!cart_item_key) return;

        $.ajax({
            url: ajax_qty_params.ajax_url,
            type: 'POST',
            data: {
                action: 'update_cart_quantity',
                security: ajax_qty_params.nonce,
                cart_item_key: cart_item_key,
                quantity: quantity
            },
            success: function(response) {
                if (response.success) {
                    // Обновляем блок корзины без перезагрузки
                    $('.woocommerce-cart-form').html($(response.data.cart_html).find('.woocommerce-cart-form').html());
                    $('.cart_totals').html($(response.data.cart_totals_html).html());
                } else {
                    alert('Ошибка обновления корзины');
                }
            }
        });
    });
});

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

Добавьте в functions.php следующий код для обработки AJAX-запросов и обновления корзины:

function ajax_update_cart_quantity() {
    check_ajax_referer('ajax-qty-nonce', 'security');

    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
    $quantity = intval($_POST['quantity']);

    if ($quantity <= 0) {
        WC()->cart->remove_cart_item($cart_item_key);
    } else {
        WC()->cart->set_quantity($cart_item_key, $quantity, true);
    }

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

    // Обновляем HTML корзины
    ob_start();
    woocommerce_cart_totals();
    $cart_totals_html = ob_get_clean();

    ob_start();
    woocommerce_cart();
    $cart_html = ob_get_clean();

    wp_send_json_success(array(
        'cart_html' => $cart_html,
        'cart_totals_html' => $cart_totals_html
    ));
}
add_action('wp_ajax_update_cart_quantity', 'ajax_update_cart_quantity');
add_action('wp_ajax_nopriv_update_cart_quantity', 'ajax_update_cart_quantity');

Проверка результата

Откройте страницу корзины, измените количество любого товара и убедитесь, что:

• Количество товара изменяется без перезагрузки страницы.
• Общая сумма корзины обновляется автоматически.
• Нет ошибок в консоли браузера.
• Удаление товара при установке количества 0 происходит корректно.

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

• AJAX не срабатывает: Проверьте, что скрипт подключен на странице корзины, и что admin-ajax.php доступен.
• Ошибка безопасности (nonce): Убедитесь, что nonce передается и проверяется корректно.
• Некорректное обновление корзины: Возможно, тема переопределяет шаблоны WooCommerce. Проверьте совместимость с темой, попробуйте на дефолтной теме (Storefront или Reboot).
• Конфликты с другими плагинами: Отключите плагины кеширования и оптимизации на время теста, чтобы исключить кеширование AJAX-запросов.

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

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

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