Как сделать всплывающее окно с отключением по AJAX без перезагрузки в WooCommerce

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

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

Основная причина — отсутствие правильной обработки события завершения AJAX-запроса WooCommerce и неиспользование JavaScript для динамического скрытия popup.

Пошаговое решение: отключение popup по AJAX в WooCommerce

1. Определяем событие AJAX WooCommerce

WooCommerce триггерит событие added_to_cart после успешного добавления товара в корзину через AJAX. Это подходящее событие, чтобы закрыть popup.

2. Добавляем JavaScript для закрытия popup

Предположим, что у вас popup имеет ID #my-popup. Добавим скрипт, который при срабатывании added_to_cart скроет popup без перезагрузки:

jQuery(function($) {
    $(document.body).on('added_to_cart', function() {
        $('#my-popup').fadeOut();
    });
});

Этот код нужно добавить в файл functions.php вашей темы или в отдельный JS-файл, подключенный к сайту.

3. Закрытие popup после успешного оформления заказа (AJAX checkout)

Если у вас включен AJAX-чекаут (например, через плагин), то можно выловить событие checkout_place_order_success:

jQuery(function($) {
    $(document.body).on('checkout_place_order_success', function() {
        $('#my-popup').fadeOut();
    });
});

Если AJAX-чекаут не используется, то для удаления popup после обычной отправки формы заказа лучше использовать PHP-хук для передачи флага закрытия popup или JavaScript, проверяющий страницу благодарности.

4. Подключение скриптов корректно через WordPress

Добавьте следующий код в functions.php вашей темы для подключения скрипта с зависимостью от jQuery:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('custom-woo-popup', get_template_directory_uri() . '/js/custom-woo-popup.js', ['jquery'], '1.0', true);
});

В файл custom-woo-popup.js поместите ранее приведённый JavaScript-код.

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

1. Откройте страницу с товарами и popup.
2. Добавьте товар в корзину через AJAX (кнопка добавления без перезагрузки).
3. Убедитесь, что popup плавно исчезает сразу после успешного добавления в корзину.
4. Если используете AJAX-чекаут, оформите заказ и проверьте закрытие popup после успешной отправки.
5. Для обычного чекаута проверьте, что popup не появляется на странице благодарности.

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

• Скрипт не срабатывает из-за отсутствия jQuery: проверьте, что jQuery подключен и скрипт загружается после него.
• Неправильный селектор popup: убедитесь, что ID или класс popup указаны корректно и элемент реально существует на странице.
• Конфликт с кэшированием: если используете кэш-плагины, очистите кэш после добавления скрипта.
• Отсутствие AJAX-событий: проверьте, что добавление в корзину происходит через AJAX. Если нет, нужно адаптировать логику.

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

• Избегайте избыточных DOM-операций, выполняйте скрытие popup только при нужных событиях.
• Для больших проектов размещайте JS в отдельном файле и подключайте с версионным номером для корректного кеширования.
• Если используете сторонние плагины popup, изучите их API — возможно, у них есть собственные события для закрытия окна.
• Для повышения безопасности проверяйте, что скрипт выполняется только на страницах WooCommerce, используя условные теги WordPress (is_woocommerce()).

Сравнение вариантов решения