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

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

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

• Отсутствует вызов обновления фрагментов корзины (cart fragments) после AJAX-операции.
• Конфликты с темой или плагинами, которые блокируют или переопределяют стандартные скрипты WooCommerce.
• Кэширование, которое не учитывает динамические изменения корзины.

Пошаговое решение: принудительное обновление корзины после AJAX добавления товара

1. Подключение скрипта для обработки AJAX и обновления корзины

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

add_action('wp_enqueue_scripts', function() {
    if (function_exists('is_woocommerce') && is_woocommerce()) {
        wp_enqueue_script('custom-ajax-cart-update', get_stylesheet_directory_uri() . '/js/custom-ajax-cart.js', ['jquery', 'wc-cart-fragments'], null, true);
    }
});

2. В JavaScript реализуйте обновление корзины

Создайте файл custom-ajax-cart.js в папке вашей темы js, например, и добавьте следующий код:

(function($) {
    $(document.body).on('added_to_cart', function() {
        // Запрос на обновление фрагментов корзины
        $.ajax({
            url: wc_cart_fragments_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'),
            type: 'POST',
            success: function(data) {
                if (data && data.fragments) {
                    $.each(data.fragments, function(key, value) {
                        $(key).replaceWith(value);
                    });
                    $(document.body).trigger('wc_fragments_refreshed');
                }
            }
        });
    });
})(jQuery);

3. Проверьте, что AJAX добавление товара корректно триггерит событие added_to_cart

Если вы используете кастомный AJAX-запрос, убедитесь, что после успешного добавления товара в корзину вызывается событие added_to_cart на document.body, например:

$(document.body).trigger('added_to_cart');

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

• Откройте страницу магазина, добавьте товар в корзину с помощью AJAX.
• Проверьте, что количество товаров и сумма в корзине в шапке сайта обновились без перезагрузки.
• Откройте инструменты разработчика (F12) и в консоли убедитесь в отсутствии ошибок JavaScript.

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

• Скрипт не подключается или не выполняется: Проверьте правильность путей к файлам и условие подключения скрипта. Используйте wp_enqueue_script и убедитесь, что скрипт загружается в футере.
• Конфликты с другими плагинами: Отключите все плагины, кроме WooCommerce, и переключитесь на дефолтную тему (например, Storefront), чтобы проверить, сохраняется ли проблема.
• Кэширование блокирует обновление: Отключите кэширование страниц и кэш браузера для проверки. Для работы с кэшированием используйте исключения для AJAX-запросов.
• Отсутствует событие added_to_cart: При кастомной реализации AJAX добавления товара обязательно вызывайте это событие, иначе корзина не обновится.

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

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

Чек-лист для отладки обновления корзины при AJAX

• Скрипт для обновления фрагментов подключен и загружается на странице.
• Вызов события added_to_cart происходит после успешного добавления товара.
• AJAX-запрос на получение обновленных фрагментов возвращает корректные HTML-элементы.
• В консоли браузера отсутствуют ошибки JS.
• Нет конфликтов с другими плагинами и темой.
• Кэширование отключено или настроено с исключением для AJAX.