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

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

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

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

Пошаговое решение: реализуем AJAX обновление корзины в шапке

1. Добавляем обработчик AJAX в JavaScript

Создайте файл ajax-cart.js в вашей теме или плагине и подключите его. В нём нужно слушать события добавления товара в корзину и обновлять блок корзины.

jQuery(function($){
    $(document.body).on('added_to_cart', function(){
        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'refresh_mini_cart'
            },
            success: function(response){
                $('.site-header-cart').html(response);
            }
        });
    });
});

2. Регистрируем AJAX обработчик в PHP

В файле functions.php темы или в плагине добавьте следующий код:

add_action('wp_ajax_refresh_mini_cart', 'refresh_mini_cart_callback');
add_action('wp_ajax_nopriv_refresh_mini_cart', 'refresh_mini_cart_callback');

function refresh_mini_cart_callback() {
    ob_start();
    woocommerce_mini_cart();
    $mini_cart = ob_get_clean();
    echo $mini_cart;
    wp_die();
}

Этот код возвращает обновлённый HTML мини-корзины.

3. Подключаем скрипт с локализацией

Добавьте в functions.php:

function enqueue_ajax_cart_script() {
    wp_enqueue_script('ajax-cart', get_template_directory_uri() . '/js/ajax-cart.js', array('jquery'), null, true);
    wp_localize_script('ajax-cart', 'wc_add_to_cart_params', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_cart_script');

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

1. Откройте любую страницу каталога товаров.

2. Добавьте товар в корзину, не переходя на страницу корзины.

3. Проверьте, что количество товаров в иконке корзины обновилось без перезагрузки страницы.

4. Также откройте консоль браузера (F12) и убедитесь, что ошибок JavaScript и запросов AJAX нет.

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

• Не подключен jQuery: Проверьте, что jQuery загружен до вашего скрипта.
• Неправильный селектор для обновления корзины: Убедитесь, что в $('.site-header-cart') используется правильный CSS-селектор для блока мини-корзины вашей темы.
• Отсутствие поддержки мини-корзины в теме: Функция woocommerce_mini_cart() выводит мини-корзину. Если ваша тема не поддерживает её, необходимо добавить HTML контейнер и стили.
• Кэширование AJAX-ответов: Если установлен кэш (например, плагин кеширования), отключите кэширование для AJAX-запросов.

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

• Используйте wp_die() после AJAX обработчиков для корректного завершения работы PHP.
• Минимизируйте объем возвращаемого HTML, чтобы ускорить загрузку.
• Проверяйте nonce для AJAX запросов, если планируете расширять функционал (сейчас в примере для простоты не добавлен).
• Кэшируйте мини-корзину с помощью Transients API при большом трафике, но учитывайте, что содержимое корзины индивидуально для каждого пользователя.

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