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

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

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

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

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

Добавьте в functions.php вашей темы следующий код, чтобы подключить JavaScript и передать параметры AJAX:

function custom_enqueue_ajax_script() {
    wp_enqueue_script('custom-ajax-cart', get_template_directory_uri() . '/js/custom-ajax-cart.js', array('jquery'), null, true);
    wp_localize_script('custom-ajax-cart', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('ajax-cart-nonce')
    ));
}
add_action('wp_enqueue_scripts', 'custom_enqueue_ajax_script');

2. Создание JavaScript для обработки клика удаления

Создайте файл custom-ajax-cart.js в папке js вашей темы со следующим содержимым:

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

        $.ajax({
            type: 'POST',
            url: ajax_object.ajax_url,
            data: {
                action: 'custom_remove_cart_item',
                cart_item_key: cart_item_key,
                nonce: ajax_object.nonce
            },
            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('Ошибка удаления товара из корзины.');
                }
            }
        });
    });
});

3. Обработка AJAX-запроса в PHP

Добавьте в functions.php следующий обработчик:

function custom_remove_cart_item_ajax() {
    check_ajax_referer('ajax-cart-nonce', 'nonce');

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

    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(array(
        'cart_html' => $cart_html,
        'widget_html' => $widget_html
    ));
}
add_action('wp_ajax_custom_remove_cart_item', 'custom_remove_cart_item_ajax');
add_action('wp_ajax_nopriv_custom_remove_cart_item', 'custom_remove_cart_item_ajax');

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

Чтобы AJAX-скрипт знал, какой товар удалить, нужно добавить data-cart_item_key к ссылке удаления. В файле шаблона корзины (обычно cart/cart.php или через переопределение шаблонов WooCommerce) замените стандартный код удаления на:

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

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

1. Загрузите страницу корзины и попробуйте удалить товар, кликнув по кнопке "×".

2. Товар должен исчезнуть из списка без перезагрузки страницы.

3. Мини-корзина в шапке сайта должна обновиться и отобразить актуальное количество товаров.

4. Проверьте в консоли браузера отсутствие ошибок JavaScript.

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

• Ошибка: AJAX-запрос не срабатывает
  Причина: не подключен или не загружен скрипт. Проверьте консоль браузера и правильность пути к файлу JS.
• Ошибка: неверный или отсутствует nonce
  Причина: не передан nonce или он устарел. Убедитесь, что nonce передается через wp_localize_script и проверяется в обработчике.
• Ошибка: корзина не обновляется
  Причина: неправильный вывод HTML после удаления. Используйте официальные функции WooCommerce для вывода корзины и виджета.
• Ошибка: data-атрибут отсутствует в ссылке удаления
  Решение: добавьте data-cart_item_key в шаблон корзины.

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

• Используйте check_ajax_referer для защиты от CSRF-атак.
• Не обновляйте всю страницу, а только нужные части — это снижает нагрузку и улучшает UX.
• Кешируйте статику и минимизируйте скрипты.
• Проверяйте совместимость с другими плагинами, чтобы избежать конфликтов JS.

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