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

В чем проблема удаления товара из корзины WooCommerce по умолчанию

Стандартное удаление товара из корзины WooCommerce выполняется через перезагрузку страницы. Это ухудшает пользовательский опыт, особенно на мобильных устройствах, и увеличивает нагрузку на сервер. Реализация удаления без перезагрузки страницы (AJAX) повысит удобство и скорость взаимодействия.

Диагностика текущей реализации удаления товаров в корзине

Проверьте, как работает удаление в вашей теме и плагинах:

• Откройте страницу корзины.
• Нажмите на крестик удаления товара.
• Обратите внимание, происходит ли перезагрузка страницы.
• Проверьте наличие в консоли браузера ошибок JS.

Если страница перезагружается — нужно внедрять AJAX-решение.

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

1. Добавляем JS-скрипт для перехвата клика по ссылке удаления

jQuery(function($){
  $('body').on('click', '.woocommerce-cart-form .remove', function(e) {
    e.preventDefault();
    var removeLink = $(this);
    var productKey = removeLink.data('cart_item_key');
    if (!productKey) {
      productKey = removeLink.attr('href').match('remove_item=([^&]+)')[1];
    }
    $.ajax({
      url: wc_cart_params.ajax_url,
      type: 'POST',
      data: {
        action: 'wc_ajax_remove_cart_item',
        cart_item_key: productKey,
      },
      success: function(response) {
        if (response && response.fragments) {
          $.each(response.fragments, function(key, value) {
            $(key).replaceWith(value);
          });
        }
      }
    });
  });
});

2. Реализуем обработчик AJAX в functions.php

add_action('wp_ajax_wc_ajax_remove_cart_item', 'wc_ajax_remove_cart_item_callback');
add_action('wp_ajax_nopriv_wc_ajax_remove_cart_item', 'wc_ajax_remove_cart_item_callback');

function wc_ajax_remove_cart_item_callback() {
  if ( ! isset($_POST['cart_item_key']) ) {
    wp_send_json_error();
  }
  $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
  $removed = WC()->cart->remove_cart_item($cart_item_key);
  if ( ! $removed ) {
    wp_send_json_error();
  }
  WC()->cart->calculate_totals();
  WC()->cart->maybe_set_cart_cookies();

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

  ob_start();
  woocommerce_cart_contents();
  $cart_contents = ob_get_clean();

  $fragments = [
    '.shop_table.cart' => $cart_contents,
    '.cart_totals' => $cart_totals,
  ];

  wp_send_json_success(['fragments' => $fragments]);
}

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

• Очистите кэш браузера и кэш сайта (если есть).
• Перейдите в корзину WooCommerce.
• Нажмите на крестик удаления товара.
• Убедитесь, что товар удаляется без перезагрузки страницы, а корзина обновляется динамически.
• Проверьте консоль браузера на отсутствие ошибок JavaScript.

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

• Ошибка: Не обновляется корзина после удаления товара.
  Проверьте, что в ответе AJAX возвращаются корректные фрагменты HTML. Убедитесь, что вы правильно указываете селекторы для замены содержимого.
• Ошибка: Нет переменной wc_cart_params.ajax_url.
  Подключите скрипт через wp_enqueue_script с зависимостью от wc-cart-fragments или локализуйте скрипт вручную.
• Ошибка: AJAX не срабатывает для незарегистрированных пользователей.
  Добавьте обработчик для wp_ajax_nopriv_, как показано в коде выше.
• Ошибка: Конфликт с темой или плагинами.
  Отключите сторонние плагины и переключитесь на дефолтную тему для диагностики.

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

• Используйте nonce для защиты AJAX-запросов, добавляя его в данные и проверяя в PHP.
• Минимизируйте объем возвращаемого HTML, обновляйте только необходимые части страницы.
• Кэшируйте статические ресурсы и используйте CDN для JS и CSS.
• Регулярно обновляйте WooCommerce и темы, чтобы избежать уязвимостей.

Сравнение вариантов реализации удаления товара из корзины