WooCommerce: отключение автоподгрузки корзины и настройка обновления без перезагрузки страницы

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

Автоматическая подгрузка корзины (AJAX обновление) в WooCommerce позволяет обновлять содержимое корзины без перезагрузки страницы. Однако в некоторых случаях это может приводить к конфликтам с кастомными скриптами, плагинами кэширования или индивидуальными кастомизациями, из-за чего корзина может не обновляться или обновляться некорректно.

Чтобы диагностировать проблему, проверьте следующие моменты:

• Включён ли в теме или плагинах скрипт wc-cart-fragments.js — именно он отвечает за AJAX обновление корзины.
• Нет ли в консоли браузера JavaScript-ошибок, которые могут блокировать выполнение скриптов WooCommerce.
• Не конфликтуют ли плагины кэширования (например, WP Rocket, W3 Total Cache) с AJAX обновлением корзины.
• Проверить, не переопределяется ли корзина в кастомных скриптах или функциях темы.

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

1. Отключение скрипта автоподгрузки корзины

Добавьте следующий код в файл 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

Чтобы пользователь мог обновить корзину без перезагрузки, добавим кастомный скрипт и кнопку:

HTML-код кнопки (например, вставьте в шаблон корзины):

<button id="custom-update-cart">Обновить корзину</button>

JavaScript для обработки нажатия и обновления корзины:

jQuery(document).ready(function($) {
    $('#custom-update-cart').on('click', function(e) {
        e.preventDefault();
        $.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');
                }
            }
        });
    });
});

Добавьте этот скрипт в футер темы или зарегистрируйте отдельный JS-файл с помощью wp_enqueue_script.

3. Проверка работы обновления

После внедрения:

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

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

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

• Откройте консоль разработчика (F12) и убедитесь, что при нажатии кнопки AJAX-запрос успешно отправляется и получены фрагменты корзины.
• Проверьте, что элементы корзины (счётчик товаров, мини-корзина) обновляются динамически.
• Проверьте работу на разных браузерах и устройстве, чтобы исключить специфические ошибки.

Частые ошибки и способы их исправления

• Ошибка: Скрипт wc-cart-fragments.js не отключился и продолжается автоподгрузка.
  Решение: Убедитесь, что код отключения подключён с приоритетом не ниже 11 и что нет других плагинов, которые заново его подключают.
• Ошибка: AJAX-запрос возвращает 400 или 500 ошибку.
  Решение: Проверьте правильность URL, наличие nonce и правильность обработчика на стороне WooCommerce. В нашем случае используется стандартный endpoint WooCommerce.
• Ошибка: Кнопка не отображается или не работает.
  Решение: Убедитесь, что кнопка добавлена в шаблон корзины, а JS скрипт корректно подключён и не конфликтует с другими библиотеками.
• Ошибка: Кэширование блокирует обновления.
  Решение: Настройте исключения для страниц корзины и AJAX-запросов в плагинах кэширования.

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

• Используйте wp_localize_script для передачи параметров AJAX, если планируете расширять функционал.
• Обязательно исключайте страницы корзины и оформления заказа из кэширования, чтобы избежать некорректного отображения данных.
• Отключение wc-cart-fragments.js уменьшит количество AJAX-запросов и может повысить производительность на сайтах с большим трафиком.
• Регулярно проверяйте консоль браузера на предмет JS-ошибок, которые влияют на работу корзины.

Сравнение вариантов отключения автоподгрузки корзины