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

Проблема: корзина WooCommerce не обновляется динамически

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

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

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

• Подключение скриптов wc-cart-fragments.js, отвечающих за AJAX обновление корзины.
• Отсутствие конфликтов с другими плагинами или темой, блокирующих AJAX-запросы.
• Правильную структуру HTML элементов корзины с нужными классами и ID.

Для проверки загрузки скрипта откройте консоль браузера и выполните в консоли:

typeof wc_cart_fragments_params !== 'undefined'

Если возвращается false — скрипты не подключены.

Пошаговое решение для динамического обновления корзины

1. Убедитесь в подключении стандартных скриптов WooCommerce

В functions.php вашей темы добавьте код, если скрипты по какой-то причине отключены:

add_action('wp_enqueue_scripts', function() {
    if (function_exists('is_woocommerce') && (is_woocommerce() || is_cart() || is_checkout())) {
        wp_enqueue_script('wc-cart-fragments');
    }
});

2. Используйте AJAX вызовы для обновления количества товара

Добавьте следующий JavaScript в footer или отдельный файл, чтобы отправлять запрос при изменении количества товара в корзине:

jQuery(document).ready(function($) {
  $('form.woocommerce-cart-form').on('change', 'input.qty', function() {
    var $form = $(this).closest('form');
    $.ajax({
      url: wc_cart_fragments_params.wc_ajax_url.toString().replace('%%endpoint%%', 'update_cart'),
      type: 'POST',
      data: $form.serialize(),
      success: function(response) {
        $(document.body).trigger('wc_fragment_refresh');
      }
    });
  });
});

Этот код отправляет данные формы на сервер и вызывает обновление фрагментов корзины.

3. Обработка AJAX запроса на сервере

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

add_action('wp_ajax_update_cart', 'custom_update_cart');
add_action('wp_ajax_nopriv_update_cart', 'custom_update_cart');
function custom_update_cart() {
    WC()->cart->set_quantity(wp_unslash($_POST['cart_item_key']), intval($_POST['quantity']));
    WC()->cart->calculate_totals();
    wp_send_json_success();
}

Замените cart_item_key и quantity на реальные поля из формы.

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

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

• Откройте страницу корзины.
• Измените количество товара в поле input.qty.
• Убедитесь, что сумма и корзина обновляются без перезагрузки страницы.
• В консоли браузера не должно быть ошибок JavaScript или AJAX.

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

• Скрипт wc-cart-fragments.js не подключён — добавьте ручное подключение в functions.php.
• Неправильные селекторы в JS — проверьте класс формы и поля количества, они могут отличаться в вашей теме.
• Отсутствие правильных данных для AJAX — убедитесь, что cart_item_key и quantity передаются корректно.
• Кэширование — отключите кэширование страниц для динамического обновления корзины.

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

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

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