WooCommerce: как исправить необновляющуюся корзину после AJAX добавления товара

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

Если после добавления товара через AJAX корзина не обновляется визуально, хотя товар добавлен, это часто связано с кешированием, конфликтами JavaScript или неправильной инициализацией скриптов WooCommerce. Чтобы проверить проблему, откройте консоль браузера (F12) и убедитесь в отсутствии JS ошибок. Проверьте, что запрос AJAX возвращает успешный ответ, а DOM обновляется.

Основные симптомы

• Количество товаров в корзине не меняется в шапке сайта.
• Страница корзины не отражает добавленный товар без обновления.
• Консоль браузера не показывает ошибок, но корзина визуально не обновляется.

Причины и их проверка

Чаще всего проблема связана с кэшированием (например, плагинами типа WP Rocket или серверным кэшом), конфликтами с другими JS-библиотеками или пользовательскими скриптами, которые переопределяют функции WooCommerce.

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

add_filter('woocommerce_add_to_cart_fragments', 'custom_add_to_cart_fragment');

Если этот фильтр отсутствует или переопределён с ошибками — корзина не обновляется.

Пошаговое решение проблемы

1. Отключите кэширование для страниц корзины и AJAX запросов

В настройках плагинов кэширования отключите кэш на страницах корзины и оформления заказа. Если используется серверный кэш типа Varnish, настройте исключения для URL с AJAX запросами WooCommerce.

2. Проверьте и исправьте JavaScript

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

add_filter( 'woocommerce_add_to_cart_fragments', function( $fragments ) {
    ob_start();
    ?>
    <a class="cart-contents" href="<?php echo wc_get_cart_url(); ?>" title="Корзина">
        <span class="count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    </a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
} );

Этот код обновляет счетчик товаров в корзине без перезагрузки страницы.

3. Убедитесь, что скрипты WooCommerce загружаются

Проверьте, что в теме не отключается стандартный скрипт wc-add-to-cart. Если отключен, добавьте в functions.php:

function enqueue_woocommerce_scripts() {
    if ( function_exists( 'is_woocommerce' ) ) {
        wp_enqueue_script( 'wc-add-to-cart' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_woocommerce_scripts' );

4. Проверка конфликта с плагинами

Временно отключите все плагины, кроме WooCommerce, и переключитесь на стандартную тему (например, Storefront). Если проблема решится — включайте плагины по одному, чтобы найти конфликтующий.

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

Добавьте товар на страницу магазина без перезагрузки и следите за изменением счетчика в шапке. Также проверьте, что корзина и мини-корзина обновляются без ошибок в консоли. Можно использовать инструменты разработчика для отслеживания AJAX запросов (Network → XHR).

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

• Ошибка: Нет обновления счетчика из-за отсутствия фильтра woocommerce_add_to_cart_fragments.
  Решение: Добавить или исправить фильтр, как описано выше.
• Ошибка: Отключение скриптов WooCommerce в теме.
  Решение: Убедиться, что wc-add-to-cart и другие скрипты подключены.
• Ошибка: Кэширование AJAX ответов.
  Решение: Исключить AJAX URL из кэша.
• Ошибка: Конфликты с плагинами (например, оптимизаторы JS).
  Решение: Отключить оптимизацию JS для скриптов WooCommerce.

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

• Не отключайте проверку nonce в AJAX запросах, чтобы предотвратить CSRF атаки.
• Используйте функцию wp_localize_script для передачи динамических данных в JS, не прописывайте их жестко.
• Для производительности — минимизируйте и объединяйте JS, но исключайте скрипты WooCommerce, связанные с корзиной, из агрессивной оптимизации.

Сравнение способов решения проблемы обновления корзины