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

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

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

Проверить это можно несколькими способами:

• Откройте консоль браузера (F12) и посмотрите, есть ли ошибки JavaScript при добавлении товара в корзину.
• Проверьте, загружается ли скрипт add-to-cart.js, который отвечает за AJAX добавление в корзину.
• Убедитесь, что в теме есть вызов wp_footer() — без него AJAX-скрипты WooCommerce не загрузятся.
• Проверьте, включена ли поддержка AJAX в настройках темы или плагинов, которые могут влиять на работу корзины.

Пошаговое решение: реализуем отслеживание изменений корзины через AJAX

1. Убедитесь в правильной загрузке скриптов WooCommerce

В файле functions.php вашей темы должно быть подключено следующее (обычно WooCommerce делает это автоматически):

add_action('wp_enqueue_scripts', function() {
    if (function_exists('is_woocommerce') && (is_woocommerce() || is_cart() || is_checkout())) {
        wp_enqueue_script('wc-add-to-cart');
    }
});

2. Добавьте обработчик изменения корзины на фронтенде

WooCommerce генерирует событие 'added_to_cart' при успешном AJAX добавлении товара. Можно подписаться на него и обновить отображение корзины в шапке или другом месте.

jQuery(function($) {
    $(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) {
        // Заменяем содержимое блока корзины
        if (fragments['div.widget_shopping_cart_content']) {
            $('div.widget_shopping_cart_content').html(fragments['div.widget_shopping_cart_content']);
        }
        // Можно добавить свои действия, например, обновить счетчик
    });
});

3. Убедитесь, что корзина отображается через AJAX-фрагменты

WooCommerce использует фрагменты для обновления корзины без перезагрузки. В шаблоне виджета корзины должен выводиться контейнер с классом widget_shopping_cart_content. Пример из mini-cart.php:

<div class="widget_shopping_cart_content">
    <!-- содержимое корзины -->
</div>

4. Если корзина в шапке кастомная, добавьте поддержку фрагментов вручную

В случае кастомных корзин можно добавить поддержку фрагментов так:

add_filter('woocommerce_add_to_cart_fragments', function($fragments) {
    ob_start();
    ?>
    <div class="custom-cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></div>
    <?php
    $fragments['div.custom-cart-count'] = ob_get_clean();
    return $fragments;
});

И в JS слушать событие added_to_cart для обновления этого блока.

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

Чтобы убедиться, что изменения работают:

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

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

• Не вызывается событие added_to_cart: возможно, в теме отсутствует wp_footer() — добавьте его перед закрывающим </body>.
• Кастомный виджет корзины не обновляется: убедитесь, что фильтр woocommerce_add_to_cart_fragments возвращает нужные фрагменты с правильными селекторами.
• JS-ошибки в консоли: проверьте, не конфликтуют ли сторонние скрипты, и что jQuery загружен.
• Проблемы с кэшированием: некоторые плагины кэширования могут блокировать AJAX-обновления — отключите кэширование для страниц корзины и магазина.

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

• Отключайте кэширование AJAX-запросов WooCommerce, чтобы избежать рассинхронизации корзины.
• Минимизируйте объем фрагментов, возвращаемых в AJAX, чтобы снизить нагрузку.
• Обновляйте WooCommerce и тему, чтобы использовать актуальные методы AJAX-обработки.
• Используйте HTTPS для безопасной передачи данных при работе с корзиной.

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