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

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

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

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

Если при изменении количества товара на странице корзины происходит только перезагрузка, значит, AJAX обработчик не работает. Часто это вызвано отсутствием нужного JavaScript или неправильной конфигурацией хуков в PHP. Для диагностики:

• Откройте консоль браузера (F12) и проверьте наличие ошибок JS.
• Проверьте, подключен ли скрипт wc-cart-fragments и wc-add-to-cart.
• Убедитесь, что в файле functions.php или плагине прописаны AJAX-обработчики.

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

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

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

jQuery(function($){
  $(document).on('change', '.qty', function(){
    var input = $(this);
    var quantity = parseInt(input.val());
    if (isNaN(quantity) || quantity < 1) {
      quantity = 1;
      input.val(quantity);
    }
    var cart_item_key = input.closest('tr.cart_item').attr('data-cart_item_key');
    if (!cart_item_key) return;

    $.ajax({
      type: 'POST',
      url: wc_cart_params.ajax_url,
      data: {
        action: 'update_cart_item_quantity',
        cart_item_key: cart_item_key,
        quantity: quantity,
        security: wc_cart_params.update_cart_nonce
      },
      success: function(response){
        if (response.success) {
          // Обновим корзину без перезагрузки
          $(document.body).trigger('updated_wc_div');
        } else {
          alert('Ошибка обновления корзины');
        }
      }
    });
  });
});

2. Добавление PHP-обработчика AJAX

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

add_action('wp_ajax_update_cart_item_quantity', 'update_cart_item_quantity_callback');
add_action('wp_ajax_nopriv_update_cart_item_quantity', 'update_cart_item_quantity_callback');

function update_cart_item_quantity_callback() {
  check_ajax_referer('update-cart', 'security');

  $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
  $quantity = intval($_POST['quantity']);

  if ($quantity < 1) {
    $quantity = 1;
  }

  foreach (WC()->cart->get_cart() as $key => $cart_item) {
    if ($key === $cart_item_key) {
      WC()->cart->set_quantity($key, $quantity, true);
      WC()->cart->calculate_totals();
      wp_send_json_success();
    }
  }

  wp_send_json_error();
}

3. Локализация скрипта и передача nonce

Чтобы скрипт получил URL для AJAX и nonce, добавьте:

add_action('wp_enqueue_scripts', 'enqueue_update_quantity_script');
function enqueue_update_quantity_script() {
  if (is_cart()) {
    wp_enqueue_script('update-quantity', get_stylesheet_directory_uri() . '/js/update-quantity.js', array('jquery', 'wc-cart-fragments'), '1.0', true);
    wp_localize_script('update-quantity', 'wc_cart_params', array(
      'ajax_url' => admin_url('admin-ajax.php'),
      'update_cart_nonce' => wp_create_nonce('update-cart')
    ));
  }
}

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

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

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

• Ошибка 400/403 в AJAX-запросах: Проверьте nonce, он должен совпадать и быть передан в запросе.
• Не обновляется итоговая сумма: Убедитесь, что на странице подключены скрипты WooCommerce wc-cart-fragments и wc-add-to-cart.
• Отсутствует атрибут data-cart_item_key в элементе товара: Добавьте в шаблон корзины в tr.cart_item атрибут data-cart_item_key="<?php echo $cart_item_key; ?>".

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

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

Сравнение вариантов реализации