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

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

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

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

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

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

add_action('wp_enqueue_scripts', function() {
    if (is_cart()) {
        wp_enqueue_script('ajax-remove-cart-item', get_template_directory_uri() . '/js/ajax-remove-cart-item.js', ['jquery'], null, true);
        wp_localize_script('ajax-remove-cart-item', 'ajax_cart_params', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-remove-cart-item-nonce'),
        ]);
    }
});

Скрипт ajax-remove-cart-item.js:

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

        $.ajax({
            url: ajax_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'ajax_remove_cart_item',
                nonce: ajax_cart_params.nonce,
                cart_item_key: cart_item_key
            },
            success: function(response) {
                if (response.success) {
                    // Обновляем мини-корзину и содержимое корзины
                    $('.woocommerce-cart-form').html(response.data.cart_html);
                    $('.widget_shopping_cart_content').html(response.data.widget_html);
                } else {
                    alert('Ошибка при удалении товара');
                }
            }
        });
    });
});

2. Создание PHP-обработчика AJAX-запроса

Добавим обработчик, который удалит товар по ключу из корзины и вернёт обновлённый HTML.

add_action('wp_ajax_ajax_remove_cart_item', 'ajax_remove_cart_item_callback');
add_action('wp_ajax_nopriv_ajax_remove_cart_item', 'ajax_remove_cart_item_callback');

function ajax_remove_cart_item_callback() {
    check_ajax_referer('ajax-remove-cart-item-nonce', 'nonce');

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

    WC()->cart->remove_cart_item($cart_item_key);
    WC()->cart->calculate_totals();

    // Обновляем содержимое корзины и мини-корзины (виджет)
    ob_start();
    woocommerce_cart_form();
    $cart_html = ob_get_clean();

    ob_start();
    the_widget('WC_Widget_Cart');
    $widget_html = ob_get_clean();

    wp_send_json_success([
        'cart_html' => $cart_html,
        'widget_html' => $widget_html
    ]);
}

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

В шаблоне корзины замените стандартные ссылки удаления товара на кнопки с классом remove-from-cart-ajax и data-атрибутом cart_item_key:

foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
    echo '<a href="#" class="remove-from-cart-ajax" data-cart_item_key="' . esc_attr( $cart_item_key ) . '">Удалить</a>';
}

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

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

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

• Неверный cart_item_key: Проверьте, что ключи товаров правильно передаются в data-атрибуты кнопок.
• Ошибка nonce: Убедитесь, что nonce передается и проверяется корректно.
• Кэширование: Кэш страниц или объектов может мешать обновлению корзины — отключите кэширование для страницы корзины.
• Отсутствие обновления мини-корзины: Если мини-корзина не обновляется, убедитесь, что в AJAX-ответе возвращается её актуальный HTML.

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

• Используйте wp_localize_script для передачи параметров AJAX, включая nonce, чтобы защитить обработчик от CSRF.
• Отключайте кэширование для страниц с корзиной и оформления заказа, чтобы исключить рассинхронизацию данных.
• Минимизируйте объём HTML в ответе, возвращая только ключевые части (корзина, мини-корзина) чтобы снизить нагрузку.
• Если необходимо, подключайте сжатие и CDN для JS и CSS, чтобы ускорить загрузку скриптов.

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