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

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

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

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

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

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

1. Убедитесь, что тема поддерживает AJAX добавление в корзину

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

function theme_enqueue_woocommerce_ajax() {
    if (class_exists('WooCommerce')) {
        wp_enqueue_script('wc-add-to-cart');
    }
}
add_action('wp_enqueue_scripts', 'theme_enqueue_woocommerce_ajax');

2. Включите поддержку AJAX добавления в корзину на страницах архива

В WooCommerce по умолчанию AJAX работает на страницах магазина и архивов товаров, но если вы используете кастомные шаблоны, убедитесь, что кнопки добавления товара имеют класс ajax_add_to_cart и корректно выводят параметр data-product_id.

Пример правильной кнопки:

<a href="?add-to-cart=123" data-quantity="1" class="button ajax_add_to_cart" data-product_id="123">В корзину</a>

3. Отключите куки и хук, которые вызывают перезагрузку корзины

Иногда темы или плагины добавляют хук, который вызывает перезагрузку корзины после добавления товара. Чтобы убрать это, добавьте следующий код в functions.php:

remove_action('woocommerce_add_to_cart', 'WC_Cart::calculate_totals');

Однако будьте осторожны с этим, так как это может повлиять на подсчет totals. В большинстве случаев достаточно корректно подключить скрипты и классы кнопок.

4. Проверьте JavaScript на конфликт

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

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

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

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

• Кнопки без класса ajax_add_to_cart: AJAX не срабатывает, добавление вызывает перезагрузку. Добавьте класс и нужные атрибуты.
• Отсутствие подключения скрипта wc-add-to-cart: AJAX не работает. Проверьте wp_enqueue_script в теме.
• Конфликты сторонних скриптов: JS ошибки мешают AJAX. Отключите плагины и тестируйте по очереди.
• Кэширование: агрессивное кэширование страниц мешает обновлению корзины. Настройте исключения для корзины и AJAX запросов.

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

• Не отключайте системные хуки WooCommerce без понимания последствий — это может привести к некорректному подсчету корзины.
• Используйте стандартные классы и атрибуты WooCommerce для кнопок добавления, чтобы не ломать логику.
• Настройте кэш-плагины так, чтобы AJAX-запросы к корзине не кэшировались.
• Для дополнительной оптимизации можно использовать WPShop Clearfy Pro для удаления дублирующегося кода и оптимизации скриптов на страницах.

Краткое сравнение вариантов решения