Как использовать popup для подтверждения удаления товара из корзины в WooCommerce

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

Стандартный функционал WooCommerce позволяет пользователю удалить товар из корзины одним кликом, что может привести к случайному удалению. Многие магазины хотят добавить дополнительный уровень подтверждения через всплывающее окно (popup), чтобы снизить вероятность ошибок и улучшить UX.

Пошаговое решение: создание popup для подтверждения удаления товара

1. Добавление HTML-шаблона popup

В файле functions.php или в кастомном плагине добавьте следующий код для вывода разметки popup в футере сайта:

add_action('wp_footer', 'add_confirm_delete_popup_html');
function add_confirm_delete_popup_html() {
    ?>
    <div id="confirm-delete-popup" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999;">
        <div style="background:#fff; padding:20px; max-width:400px; margin:100px auto; border-radius:4px;">
            <p>Вы уверены, что хотите удалить этот товар из корзины?</p>
            <button id="confirm-delete-yes">Да</button>
            <button id="confirm-delete-no">Нет</button>
        </div>
    </div>
    <?php
}

2. Перехват клика по кнопке удаления товара с помощью JavaScript

В тему или плагин добавьте следующий скрипт, который блокирует стандартное удаление и показывает popup:

add_action('wp_footer', 'add_confirm_delete_popup_script');
function add_confirm_delete_popup_script() {
    if (!is_cart()) return; // скрипт нужен только на странице корзины
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        let deleteLinks = document.querySelectorAll('.woocommerce-cart-form__cart-item .product-remove a');
        let popup = document.getElementById('confirm-delete-popup');
        let confirmYes = document.getElementById('confirm-delete-yes');
        let confirmNo = document.getElementById('confirm-delete-no');
        let currentLink = null;

        deleteLinks.forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                currentLink = this;
                popup.style.display = 'block';
            });
        });

        confirmYes.addEventListener('click', function() {
            if(currentLink) {
                window.location.href = currentLink.href; // продолжить удаление
            }
        });

        confirmNo.addEventListener('click', function() {
            popup.style.display = 'none';
            currentLink = null;
        });

        // Закрытие popup по клику вне блока
        popup.addEventListener('click', function(e) {
            if(e.target === popup) {
                popup.style.display = 'none';
                currentLink = null;
            }
        });
    });
    </script>
    <?php
}

3. Тестирование работы popup на странице корзины

Перейдите на страницу корзины WooCommerce и нажмите на крестик удаления товара. Вместо мгновенного удаления должно появиться окно с вопросом подтверждения. По нажатию «Да» товар удалится, по «Нет» — окно закроется без действий.

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

• Откройте страницу корзины с несколькими товарами.
• Нажмите на кнопку удаления товара (крестик).
• Убедитесь, что появилось всплывающее окно с подтверждением.
• Нажмите «Нет» — popup должен закрыться, товар остаться в корзине.
• Нажмите «Да» — товар удалится, страница обновится.

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

• Popup не появляется: Проверьте, что скрипт подключается только на странице корзины (if (!is_cart()) return;). Возможно, селектор удаления изменился в вашей теме — проверьте в инспекторе браузера класс .product-remove a.
• Удаление не срабатывает после нажатия «Да»: Убедитесь, что у ссылки удаления корректный атрибут href и что браузер не блокирует переход.
• Popup появляется, но нельзя закрыть: Проверьте обработчик клика по фону и кнопку «Нет», они должны скрывать окно.
• Конфликт с кэшированием: Если вы используете кэш-плагины, исключите страницу корзины из кэширования, иначе скрипт может не работать корректно.

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

• Не используйте window.location.href для удаления товара с POST-запросом — WooCommerce удаление происходит GET-запросом с nonce. При необходимости используйте AJAX с nonce для безопасного удаления.
• Минимизируйте количество глобальных переменных и используйте замыкания в JS, чтобы избежать конфликтов с другими скриптами.
• Кэшируйте страницу корзины с осторожностью, обычно её исключают из кэширования.
• Для улучшения UX можно добавить анимацию появления popup и клавишу Esc для закрытия окна.

Альтернативные варианты реализации