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

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

Стандартная функциональность WooCommerce при удалении товара из корзины приводит к перезагрузке страницы, что ухудшает пользовательский опыт. В некоторых случаях нужно добавить подтверждение удаления товара, чтобы избежать случайных кликов. Основная проблема – отсутствие встроенной поддержки удаления товара через AJAX с подтверждением.

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

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

1. Добавление подтверждения через JavaScript

Вставим скрипт, который перехватит клик по ссылке удаления товара и спросит подтверждение у пользователя.

jQuery(document).ready(function($){
    $('form.woocommerce-cart-form').on('click', '.remove', function(e){
        e.preventDefault();
        var link = $(this);
        if(confirm('Вы действительно хотите удалить этот товар из корзины?')){
            var cart_item_key = link.data('cart_item_key');
            // Запуск AJAX удаления
            $.ajax({
                url: wc_cart_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'custom_woocommerce_remove_cart_item',
                    cart_item_key: cart_item_key,
                    security: wc_cart_params.remove_item_nonce
                },
                success: function(response){
                    if(response.success){
                        // Обновляем корзину без перезагрузки
                        $('body').trigger('update_checkout');
                        link.closest('tr').fadeOut(300, function(){ $(this).remove(); });
                        // Обновляем фрагменты корзины
                        $.ajax({
                            url: wc_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'),
                            type: 'POST',
                            success: function(fragments){
                                if(fragments && fragments.fragments){
                                    $.each(fragments.fragments, function(key, value){
                                        $(key).replaceWith(value);
                                    });
                                }
                            }
                        });
                    } else {
                        alert('Ошибка при удалении товара из корзины. Попробуйте позже.');
                    }
                },
                error: function(){
                    alert('Ошибка AJAX запроса.');
                }
            });
        }
    });
});

2. Обработка AJAX запроса в functions.php

Добавим PHP функцию, которая будет удалять товар из корзины по ключу и возвращать результат в JSON.

add_action('wp_ajax_custom_woocommerce_remove_cart_item', 'custom_woocommerce_remove_cart_item_callback');
add_action('wp_ajax_nopriv_custom_woocommerce_remove_cart_item', 'custom_woocommerce_remove_cart_item_callback');

function custom_woocommerce_remove_cart_item_callback() {
    check_ajax_referer('woocommerce-cart', 'security');

    $cart_item_key = isset($_POST['cart_item_key']) ? wc_clean($_POST['cart_item_key']) : '';
    if (!$cart_item_key) {
        wp_send_json_error();
    }

    $cart = WC()->cart;
    $removed = $cart->remove_cart_item($cart_item_key);

    if ($removed) {
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
    wp_die();
}

3. Добавление nonce для безопасности

Вставим nonce в JavaScript параметры, чтобы защитить запросы:

function add_remove_item_nonce() {
    wp_localize_script('woocommerce-cart', 'wc_cart_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'remove_item_nonce' => wp_create_nonce('woocommerce-cart'),
        'wc_ajax_url' => WC_AJAX::get_endpoint("%%endpoint%%")
    ));
}
add_action('wp_enqueue_scripts', 'add_remove_item_nonce');

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

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

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

• Отсутствует nonce или неправильный nonce: AJAX запросы будут отклоняться. Проверьте правильность создания и передачи nonce.
• Неверный селектор для кнопки удаления: Убедитесь, что jQuery селектор .remove точно соответствует ссылкам удаления в вашей теме.
• Конфликты с другими плагинами или темой: Если AJAX не работает, проверьте консоль браузера на ошибки JavaScript и отключите другие плагины для проверки.
• Обновление фрагментов корзины не происходит: Убедитесь, что AJAX запрос обновления фрагментов вызывается и возвращает корректные данные.

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

• Обязательно используйте check_ajax_referer для защиты AJAX запросов.
• Проверяйте, что cart_item_key валидный и существует в корзине перед удалением.
• Минимизируйте количество AJAX запросов, объединяя обновление корзины в один вызов.
• Используйте встроенные WooCommerce хуки для обновления корзины и фрагментов, чтобы избежать конфликтов с кэшированием.

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