WooCommerce: корректное обновление корзины при AJAX-запросах

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

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

Для диагностики проблемы стоит проверить:

• Активность JavaScript ошибок в консоли браузера (F12 → Console).
• Подключение стандартных скриптов WooCommerce: wc-cart-fragments.js — отвечает за динамическое обновление корзины.
• Конфликты с темой или плагинами, отключенные или переопределённые хуки, которые отвечают за AJAX.
• Правильность использования хуков и вызовов функций в кастомных шаблонах или плагинах.

Пошаговое решение проблемы корректного обновления корзины

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

Убедитесь, что в теме не отключён стандартный скрипт wc-cart-fragments.js. В functions.php темы не должно быть кода типа:

function disable_woocommerce_cart_fragments() {
    wp_dequeue_script('wc-cart-fragments');
}
add_action('wp_enqueue_scripts', 'disable_woocommerce_cart_fragments', 11);

Если такой код есть, удалите или закомментируйте его.

2. Проверьте правильность ajax-обработчиков в кастомных решениях

Если добавляете товары в корзину через кастомные AJAX-запросы, используйте стандартные функции WooCommerce для обновления корзины. Пример правильного вызова в JS:

jQuery.post(wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'), {
    product_id: 123,
    quantity: 1
}, function(response) {
    if (response.error && response.product_url) {
        window.location = response.product_url;
        return;
    }
    // Обновляем корзину
    jQuery(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, jQuery(this)]);
});

Обратите внимание на событие added_to_cart, которое активирует обновление фрагментов корзины.

3. Принудительное обновление корзины на фронтенде

Если корзина не обновляется, принудительно вызовите обновление через JS:

jQuery(document.body).trigger('wc_fragment_refresh');

Это заставит WooCommerce обновить виджет корзины и счетчики.

4. Правильная реализация AJAX в PHP

Если вы добавляете свои обработчики AJAX, убедитесь, что они корректно возвращают фрагменты и хеш корзины, как в стандартных функциях WooCommerce. Пример:

add_action('wp_ajax_my_custom_add_to_cart', 'my_custom_add_to_cart_handler');
add_action('wp_ajax_nopriv_my_custom_add_to_cart', 'my_custom_add_to_cart_handler');

function my_custom_add_to_cart_handler() {
    $product_id = intval($_POST['product_id']);
    $quantity = intval($_POST['quantity']);

    $added = WC()->cart->add_to_cart($product_id, $quantity);
    if ($added) {
        // Возвращаем обновленные фрагменты
        ob_start();
        woocommerce_mini_cart();
        $mini_cart = ob_get_clean();

        wp_send_json_success(array(
            'fragments' => array(
                'div.widget_shopping_cart_content' => $mini_cart
            ),
            'cart_hash' => WC()->cart->get_cart_hash()
        ));
    } else {
        wp_send_json_error();
    }
}

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

После внесения изменений сделайте следующее:

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

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

• Отключён wc-cart-fragments.js: удалите wp_dequeue_script, он блокирует обновление корзины.
• Не вызывается событие added_to_cart: без него фронтенд не обновит корзину, добавьте jQuery(document.body).trigger('added_to_cart', ...).
• Кастомные AJAX-обработчики не возвращают фрагменты: всегда возвращайте обновленные части корзины и cart_hash в формате JSON.
• Конфликты с темой или плагинами: временно переключитесь на стандартную тему (например, Storefront) и отключите плагины для выявления источника проблемы.

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

• При использовании кастомных AJAX-обработчиков проверяйте nonce и права пользователя для предотвращения CSRF и злоупотреблений.
• Минимизируйте количество запросов к базе при обновлении корзины, кешируйте фрагменты, если корзина не меняется часто.
• Используйте wp_send_json_success и wp_send_json_error для стандартного форматирования ответов AJAX.
• Регулярно обновляйте WooCommerce и тему, чтобы использовать последние исправления и улучшения.

Сравнение методов обновления корзины в WooCommerce