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

Почему важно реализовать удаление товара из корзины через AJAX

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

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

• Отсутствует правильная регистрация AJAX-обработчика в functions.php.
• Не передается ID товара или ключ корзины (cart_item_key) в AJAX-запросе.
• JavaScript не обновляет корзину на фронтенде после удаления.
• Конфликты с другими плагинами или темой, которые изменяют корзину.

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

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

В шаблоне корзины (обычно woocommerce/cart/cart.php) замените стандартную кнопку удаления на кастомную с data-атрибутом cart_item_key:

<a href="#" class="remove-item" data-cart_item_key="<?php echo $cart_item_key; ?>" aria-label="Удалить этот товар">×</a>

2. Подключаем скрипт AJAX в functions.php

function enqueue_ajax_remove_script() {
    if (is_cart()) {
        wp_enqueue_script('ajax-remove-item', get_stylesheet_directory_uri() . '/js/ajax-remove-item.js', array('jquery'), '1.0', true);
        wp_localize_script('ajax-remove-item', 'ajax_remove_params', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-remove-nonce')
        ));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_remove_script');

3. Создаем обработчик AJAX в functions.php

function ajax_remove_cart_item() {
    check_ajax_referer('ajax-remove-nonce', 'nonce');

    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
    if (!$cart_item_key) {
        wp_send_json_error('Нет ключа товара');
    }

    $cart = WC()->cart;
    if ($cart->remove_cart_item($cart_item_key)) {
        WC()->cart->calculate_totals();
        ob_start();
        woocommerce_mini_cart(); // Для обновления мини-корзины, если есть
        $mini_cart = ob_get_clean();

        wp_send_json_success(array(
            'cart_hash' => WC()->cart->get_cart_hash(),
            'mini_cart' => $mini_cart,
            'cart_totals' => wc_price(WC()->cart->get_total(''))
        ));
    } else {
        wp_send_json_error('Не удалось удалить товар');
    }
}
add_action('wp_ajax_remove_cart_item', 'ajax_remove_cart_item');
add_action('wp_ajax_nopriv_remove_cart_item', 'ajax_remove_cart_item');

4. JavaScript для отправки AJAX-запроса и обновления корзины

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

        $.ajax({
            url: ajax_remove_params.ajax_url,
            type: 'POST',
            data: {
                action: 'remove_cart_item',
                cart_item_key: cart_item_key,
                nonce: ajax_remove_params.nonce
            },
            success: function(response) {
                if (response.success) {
                    // Обновляем мини-корзину
                    if ($('.widget_shopping_cart_content').length) {
                        $('.widget_shopping_cart_content').html(response.data.mini_cart);
                    }
                    // Обновляем страницу корзины
                    if ($('body').hasClass('woocommerce-cart')) {
                        location.reload(); // Можно заменить на обновление через AJAX, если нужно
                    } else {
                        // Обновляем счетчик товаров в шапке
                        $('.cart-contents .count').text(response.data.cart_hash.length); // пример
                    }
                } else {
                    alert('Ошибка: ' + response.data);
                }
            },
            error: function() {
                alert('Ошибка AJAX запроса');
            }
        });
    });
});

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

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

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

• Не работает AJAX-запрос: Проверьте правильность URL admin-ajax.php и nonce. Ошибки в консоли браузера помогут выявить проблему.
• Товар не удаляется: Возможно, неверно передается cart_item_key. Проверьте, что data-атрибуты заполнены корректно.
• Мини-корзина не обновляется: Убедитесь, что в ответе AJAX возвращается HTML мини-корзины и что JS код вставляет его в правильный контейнер.
• Конфликты с кешированием: Если используется плагин кеширования, отключите кеш для страниц корзины и AJAX-запросов.

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

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

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