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

Проблема: задержка и неудобство при обновлении корзины в WooCommerce

Стандартное поведение WooCommerce при добавлении товара в корзину или изменении количества — полная перезагрузка страницы. Это снижает удобство пользователя и увеличивает время взаимодействия. В этой статье разберём, как реализовать обновление корзины через AJAX, чтобы избежать перезагрузки и сделать процесс плавным.

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

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

• Добавьте товар в корзину — страница перезагружается?
• Изменяете количество в корзине — страница обновляется полностью?
• Консоль браузера не показывает ошибок JavaScript?

Если ответ «да» на первые два пункта и нет ошибок, значит AJAX обновление не настроено.

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

1. Подключение скрипта AJAX

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

function wpstudy_enqueue_ajax_cart_script() {
    wp_enqueue_script('wpstudy-ajax-cart', get_template_directory_uri() . '/js/ajax-cart.js', array('jquery'), '1.0', true);
    wp_localize_script('wpstudy-ajax-cart', 'wpstudy_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpstudy_ajax_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'wpstudy_enqueue_ajax_cart_script');

Создайте файл js/ajax-cart.js в папке вашей темы.

2. JavaScript для отправки AJAX-запроса при изменении количества

jQuery(document).ready(function($) {
    $('form.woocommerce-cart-form').on('change', 'input.qty', function() {
        var $form = $('form.woocommerce-cart-form');
        var data = $form.serialize();
        data += '&action=wpstudy_update_cart';
        data += '&nonce=' + wpstudy_ajax_obj.nonce;

        $.post(wpstudy_ajax_obj.ajax_url, data, function(response) {
            if(response.success) {
                $('.woocommerce-cart-form').html(response.data.cart_html);
                $('.woocommerce-message').remove();
                if(response.data.message) {
                    $('.woocommerce-notices-wrapper').html(response.data.message);
                }
            } else {
                console.log('Ошибка обновления корзины');
            }
        });
    });
});

3. PHP-обработка AJAX запроса

Добавьте в functions.php обработчик для AJAX:

function wpstudy_ajax_update_cart() {
    check_ajax_referer('wpstudy_ajax_nonce', 'nonce');

    if ( ! WC()->cart ) {
        wp_send_json_error();
    }

    // Обновляем корзину по данным из $_POST
    foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
        if ( isset($_POST['cart'][$cart_item_key]['qty']) ) {
            $qty = intval($_POST['cart'][$cart_item_key]['qty']);
            WC()->cart->set_quantity($cart_item_key, $qty, false);
        }
    }
    WC()->cart->calculate_totals();

    ob_start();
    woocommerce_cart_form();
    $cart_html = ob_get_clean();

    // Получаем сообщения WooCommerce
    wc_print_notices();
    $messages = wc_get_notices('success');
    $message_html = '';
    if ( $messages ) {
        $message_html = '<div class="woocommerce-message" role="alert">' . implode('<br>', $messages) . '</div>';
        wc_clear_notices();
    }

    wp_send_json_success(array(
        'cart_html' => $cart_html,
        'message' => $message_html
    ));
}
add_action('wp_ajax_wpstudy_update_cart', 'wpstudy_ajax_update_cart');
add_action('wp_ajax_nopriv_wpstudy_update_cart', 'wpstudy_ajax_update_cart');

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

• Откройте страницу корзины на сайте.
• Измените количество товара в поле «Qty».
• Проверьте, что страница не перезагружается, а корзина обновляется динамически.
• В консоли браузера не должно быть ошибок JavaScript.
• Проверьте изменение итоговой суммы и наличие сообщений об успешном обновлении.

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

• Ошибка 400 или 403 в AJAX-запросе: проверьте nonce и правильность его передачи. Убедитесь, что nonce генерируется и проверяется корректно.
• Корзина не обновляется: убедитесь, что ключи товаров из $_POST['cart'] совпадают с ключами в корзине WooCommerce, и данные передаются корректно.
• JavaScript не работает: проверьте, что скрипт ajax-cart.js подключен и загружается без ошибок, а также что jQuery доступен.
• Сообщения WooCommerce не отображаются: убедитесь, что в PHP-обработчике вызываются функции wc_print_notices() и wc_get_notices(), а затем уведомления очищаются wc_clear_notices().

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

• Используйте wp_localize_script для передачи данных AJAX URL и nonce в JS — это стандарт и безопасно.
• Проверяйте nonce в PHP для защиты от CSRF-атак.
• Минимизируйте объем возвращаемого HTML, отдавая только часть корзины, если возможно, чтобы снизить нагрузку.
• Кэширование на стороне сервера не должно блокировать обновление корзины — отключайте кэш для страниц с корзиной и оформления заказа.

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