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

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

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

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

• Используется ли AJAX для обновления корзины;
• Нет ли конфликтов JS, блокирующих AJAX-запросы;
• Корректно ли настроены хуки WooCommerce для обновления данных корзины;
• Проверить консоль браузера на наличие ошибок JS при попытке изменить количество;
• Проверить, что кнопки или поля ввода количества имеют нужные классы и атрибуты.

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

1. Добавление обработчика JavaScript

Добавим скрипт, который будет слушать изменения количества и отправлять AJAX-запрос на сервер.

jQuery(function($){
  $('form.woocommerce-cart-form').on('change', 'input.qty', function(){
    var $input = $(this);
    var newQty = $input.val();
    var cartItemKey = $input.closest('tr').attr('data-cart_item_key');

    if (!cartItemKey) return;

    $.ajax({
      url: wc_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'update_cart_item_qty'),
      type: 'POST',
      data: {
        cart_item_key: cartItemKey,
        quantity: newQty,
        security: wc_cart_params.update_cart_nonce
      },
      success: function(response) {
        if (response && response.fragments) {
          $.each(response.fragments, function(key, value) {
            $(key).replaceWith(value);
          });
          $(document.body).trigger('updated_wc_div');
        }
      }
    });
  });
});

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

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

add_action('wp_ajax_update_cart_item_qty', 'update_cart_item_qty_callback');
add_action('wp_ajax_nopriv_update_cart_item_qty', 'update_cart_item_qty_callback');

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

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

  if (!$cart_item_key || $quantity < 0) {
    wp_send_json_error(['message' => 'Неверные данные']);
  }

  $cart = WC()->cart;
  $cart_item = $cart->get_cart_item($cart_item_key);

  if (!$cart_item) {
    wp_send_json_error(['message' => 'Товар не найден в корзине']);
  }

  if ($quantity === 0) {
    $cart->remove_cart_item($cart_item_key);
  } else {
    $cart->set_quantity($cart_item_key, $quantity, false);
  }

  $cart->calculate_totals();

  ob_start();
  woocommerce_mini_cart();
  $mini_cart = ob_get_clean();

  wp_send_json_success([
    'fragments' => [
      '.woocommerce-mini-cart' => $mini_cart,
      '.woocommerce-cart-form' => wc_get_template_html('cart/cart.php')
    ]
  ]);
}

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

Чтобы убедиться, что решение работает, выполните:

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

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

• Отсутствует data-cart_item_key у строки товара в корзине: Добавьте в шаблон корзины data-cart_item_key="<?php echo esc_attr( $cart_item_key ); ?>" в <tr> с товаром.
• Ошибка безопасности (nonce): Убедитесь, что nonce передаётся из wc_cart_params.update_cart_nonce и что check_ajax_referer вызывается корректно.
• AJAX-запросы блокируются плагинами кеширования: Настройте исключения для AJAX-запросов WooCommerce или отключите кеширование на страницах корзины и оформления заказа.
• JavaScript не подключен или подключен неправильно: Добавьте скрипт через wp_enqueue_script, используя зависимости от jQuery и wc-cart-fragments.js.
• Не обновляются фрагменты корзины: Убедитесь, что возвращаемый массив с фрагментами содержит актуальные селекторы и HTML.

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

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

Сравнение вариантов реализации изменения количества в корзине