Автоматическое сохранение изменений в корзине WooCommerce без перезагрузки страницы

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

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

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

1. Подключение скрипта с AJAX-логикой

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

add_action('wp_enqueue_scripts', function() {
    if (is_cart()) {
        wp_enqueue_script('wc-cart-autosave', get_stylesheet_directory_uri() . '/js/wc-cart-autosave.js', ['jquery'], '1.0', true);
        wp_localize_script('wc-cart-autosave', 'wcCartAutosave', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('wc_cart_autosave_nonce')
        ]);
    }
});

2. JavaScript: отслеживаем изменения и отправляем данные

Создайте файл wc-cart-autosave.js в папке js вашей темы со следующим содержанием:

jQuery(function($) {
    // Функция для отправки AJAX-запроса на обновление корзины
    function autosaveCart() {
        var data = {};
        $('.woocommerce-cart-form__cart-item').each(function() {
            var cartItemKey = $(this).data('cart_item_key');
            var qty = $(this).find('.qty').val();
            data[cartItemKey] = qty;
        });

        $.ajax({
            url: wcCartAutosave.ajax_url,
            method: 'POST',
            data: {
                action: 'wc_autosave_cart',
                nonce: wcCartAutosave.nonce,
                quantities: data
            },
            success: function(response) {
                if(response.success) {
                    console.log('Корзина успешно сохранена');
                } else {
                    console.error('Ошибка сохранения корзины');
                }
            }
        });
    }

    // Отслеживаем изменение количества товара
    $('.woocommerce-cart-form').on('change', '.qty', function() {
        autosaveCart();
    });
});

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

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

add_action('wp_ajax_wc_autosave_cart', 'wc_autosave_cart_handler');
add_action('wp_ajax_nopriv_wc_autosave_cart', 'wc_autosave_cart_handler');

function wc_autosave_cart_handler() {
    check_ajax_referer('wc_cart_autosave_nonce', 'nonce');

    if (empty($_POST['quantities']) || !is_array($_POST['quantities'])) {
        wp_send_json_error('Неверные данные');
    }

    $quantities = $_POST['quantities'];
    $cart = WC()->cart;

    foreach ($cart->get_cart() as $cart_item_key => $cart_item) {
        if (isset($quantities[$cart_item_key])) {
            $qty = intval($quantities[$cart_item_key]);
            if ($qty > 0) {
                $cart->set_quantity($cart_item_key, $qty, false);
            } else {
                $cart->remove_cart_item($cart_item_key);
            }
        }
    }

    $cart->calculate_totals();
    WC()->session->set('cart', $cart->get_cart_for_session());

    wp_send_json_success();
}

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

1. Откройте страницу корзины WooCommerce.

2. Измените количество товара в любом из полей "Количество".

3. В консоли браузера (F12) должна отображаться запись "Корзина успешно сохранена" после каждого изменения.

4. Обновите страницу — количество товаров должно сохраниться без необходимости нажимать кнопку "Обновить корзину".

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

• AJAX-запрос не срабатывает — проверьте, что скрипт подключается только на странице корзины, а локализация скрипта содержит правильный URL и nonce.
• Данные не обновляются в сессии — убедитесь, что вызывается WC()->cart->calculate_totals() и сохраняется сессия с помощью WC()->session->set().
• Ошибки безопасности nonce — проверьте, что nonce передается и проверяется корректно с помощью wp_create_nonce и check_ajax_referer.
• Количества не принимаются или сбрасываются — убедитесь, что типы данных целочисленные и что отрицательные или нулевые значения обрабатываются как удаление товара.

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

• Ограничьте частоту AJAX-запросов через debounce в JS, чтобы не отправлять запросы при каждом изменении символа в поле.
• Используйте check_ajax_referer для защиты от CSRF.
• Кэшируйте фронтенд-скрипты и минимизируйте их, чтобы не увеличивать время загрузки.
• Тестируйте на разных темах и с отключенными плагинами, чтобы избежать конфликтов.

Сравнение вариантов реализации автосохранения корзины