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

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

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

Еще одна частая задача — вывод экрана подтверждения удаления товара, чтобы избежать случайных действий пользователя. WooCommerce не предлагает встроенного решения для подтверждения удаления через AJAX.

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

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

В шаблоне корзины замените стандартную ссылку удаления на кнопку с data-атрибутом для ID корзинного элемента:

<button class="remove-item-ajax" data-cart_item_key="<?php echo $cart_item_key; ?>">Удалить</button>

2. Подключаем JS для открытия окна подтверждения и AJAX-запроса

Создайте файл remove-from-cart.js и подключите его в теме или плагине:

jQuery(document).ready(function($) {
  $(document).on('click', '.remove-item-ajax', function(e) {
    e.preventDefault();
    var button = $(this);
    var cart_item_key = button.data('cart_item_key');

    if(confirm('Вы действительно хотите удалить этот товар из корзины?')) {
      $.ajax({
        url: wc_cart_params.ajax_url,
        type: 'POST',
        data: {
          action: 'custom_remove_cart_item',
          cart_item_key: cart_item_key,
          security: wc_cart_params.remove_item_nonce
        },
        success: function(response) {
          if(response.success) {
            // Обновляем содержимое корзины на странице
            $('.woocommerce-cart-form').html(response.data.cart_html);
            // Обновляем счетчик товаров в шапке
            $('.cart-contents-count').text(response.data.cart_count);
          } else {
            alert('Ошибка при удалении товара. Попробуйте снова.');
          }
        },
        error: function() {
          alert('Ошибка AJAX-запроса.');
        }
      });
    }
  });
});

3. Добавляем PHP обработчик AJAX-запроса

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

add_action('wp_ajax_custom_remove_cart_item', 'custom_remove_cart_item_callback');
add_action('wp_ajax_nopriv_custom_remove_cart_item', 'custom_remove_cart_item_callback');

function custom_remove_cart_item_callback() {
    check_ajax_referer('remove-item', 'security');

    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
    if(!$cart_item_key) {
        wp_send_json_error();
    }

    $removed = WC()->cart->remove_cart_item($cart_item_key);
    if(!$removed) {
        wp_send_json_error();
    }

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

    // Обновляем HTML корзины через стандартный шаблон
    ob_start();
    wc_get_template('cart/cart.php');
    $cart_html = ob_get_clean();

    $cart_count = WC()->cart->get_cart_contents_count();

    wp_send_json_success(array(
        'cart_html' => $cart_html,
        'cart_count' => $cart_count
    ));
}

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

• Загрузите страницу корзины и убедитесь, что кнопка «Удалить» отображается и при клике появляется стандартное окно подтверждения браузера.
• Подтвердите удаление — товар должен исчезнуть без перезагрузки страницы, а содержимое корзины и счетчик в шапке обновиться.
• Если корзина стала пустой, проверьте, что отображается сообщение «Ваша корзина пуста».
• Проверьте работу на мобильных устройствах и основных браузерах (Chrome, Firefox, Edge).

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

• Кнопка не реагирует на клик: Проверьте правильность подключения и загрузки JS, console на наличие ошибок.
• Ошибка AJAX 400 или 403: Убедитесь, что nonce передается и проверяется корректно. В JS используйте wc_cart_params.remove_item_nonce, а в PHP вызывайте check_ajax_referer('remove-item', 'security').
• Корзина не обновляется визуально: Проверьте, что возвращается корректный HTML из шаблона cart/cart.php и его вставка в DOM происходит без ошибок.
• Удаленный товар возвращается после обновления страницы: Возможно, проблема с кешированием или сессией, проверьте отключение кеша страниц для корзины.

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

• Используйте wp_enqueue_script для подключения JS с локализацией переменных wc_cart_params — это стандарт WooCommerce.
• Отключайте кеширование страниц корзины и оформления заказа, чтобы избежать рассинхронизации данных.
• Обрабатывайте все входящие данные через sanitize_text_field и проверяйте nonce для предотвращения CSRF-атак.
• Для кастомизации шаблонов корзины используйте дочернюю тему, чтобы не потерять изменения при обновлениях WooCommerce.

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