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

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

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

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

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

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

Создайте файл ajax-cart.js в папке вашей темы (например, /js/ajax-cart.js) и добавьте туда следующий код:

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

    var data = {
      action: 'update_cart_item_quantity',
      cart_item_key: cartItemKey,
      quantity: quantity,
      security: wc_cart_params.ajax_nonce
    };

    $.post(wc_cart_params.ajax_url, data, function(response) {
      if(response && response.fragments) {
        $.each(response.fragments, function(key, value) {
          $(key).replaceWith(value);
        });
      }
    });
  });
});

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

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

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'] ?? 0);

  if (!$cart_item_key || $quantity < 0) {
    wp_send_json_error();
  }

  WC()->cart->set_quantity($cart_item_key, $quantity, true);

  WC()->cart->calculate_totals();

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

  ob_start();
  woocommerce_cart_totals();
  $cart_totals = ob_get_clean();

  wp_send_json_success(array(
    'fragments' => array(
      '.woocommerce-mini-cart' => $mini_cart,
      '.cart_totals' => $cart_totals,
      'tr[data-cart_item_key="' . esc_attr($cart_item_key) . '"] .product-quantity' => '<td class="product-quantity">' . woocommerce_quantity_input(array('input_value' => $quantity, 'input_name' => 'cart[' . esc_attr($cart_item_key) . '][qty]', 'product_name' => ''), WC()->cart->get_cart_item($cart_item_key)['data'], false) . '</td>',
    ),
  ));
}

3. Подключение скрипта и локализация данных AJAX

Добавьте в functions.php код для подключения и локализации скрипта:

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

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

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

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

• Неправильный ключ cart_item_key: Если не удаётся получить data-cart_item_key, убедитесь, что в шаблоне корзины в <tr> действительно есть этот атрибут. Если нет, добавьте его в cart/cart.php или используйте другой способ получения ключа.
• Ошибка в AJAX nonce: Проверьте, что nonce создаётся и передаётся корректно, и что в запросе он правильно проверяется в check_ajax_referer.
• Отсутствие обновления фрагментов: Убедитесь, что в ответе AJAX возвращаются все необходимые HTML-фрагменты и что селекторы в JS совпадают с элементами на странице.
• Проблемы с кэшированием: Если используются плагины кэширования, временно отключите их для проверки работы AJAX.

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

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

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

Метод	Описание	Плюсы	Минусы
Стандартная перезагрузка страницы	Обновление количества через форму с перезагрузкой	Простота, надежность	Медленно, плохой UX
AJAX по примеру выше	Обновление количества без перезагрузки	Быстро, приятный UX	Сложнее в реализации, требует тестирования
Плагины для AJAX корзины	Готовые решения с расширенными возможностями	Много функций, поддержка	Может быть избыточно, нагрузка