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

В современных одностраничных приложениях (SPA) и при использовании AJAX-подгрузки контента в WordPress часто возникает задача корректно управлять всплывающими окнами (popup). Особенно актуально, когда пользователь переходит по сайту без полной перезагрузки страницы, и popup продолжает висеть или не удаляется автоматически. В этой статье разберём, как правильно удалить popup при навигации в WordPress без перезагрузки страницы.

Почему popup остаётся после перехода без перезагрузки

В классическом подходе при переходе между страницами происходит полная перезагрузка, и все DOM-элементы уничтожаются. Popup исчезает вместе со страницей. Но если вы используете AJAX-навигацию, PJAX или плагин для бесшовной загрузки контента, DOM не перезагружается целиком. Это значит, что popup остаётся в DOM, если не прописать логику его удаления.

Такое поведение негативно влияет на UX — пользователь видит устаревшее окно, либо окна накапливаются и мешают интерфейсу. Поэтому важно реализовать механизм удаления popup при смене содержимого страницы.

Как отследить смену страницы при AJAX-навигации

Первый шаг — определить, как именно в вашем WordPress сайте реализована AJAX-навигация. Часто применяются следующие методы:

• Использование History API и JavaScript-обработчиков — на событие popstate или кастомные события, которые вызываются после подгрузки контента.
• Плагины SPA или PJAX — они имеют свои хуки и события, на которые можно подписаться.

Например, если используется библиотека Barba.js для бесшовной навигации, она генерирует события barba:before-enter или barba:after-enter. В таких событиях можно прописать удаление popup.

Если же AJAX реализован вручную, стоит добавить вызов события при смене страницы:

document.dispatchEvent(new CustomEvent('wppopup_page_changed'));

и подписаться на него для очистки popup.

Пример решения удаления popup на событие смены страницы

Рассмотрим универсальный пример, который можно адаптировать под ваш проект. Предположим, что popup создаётся через плагин или кастомный скрипт и имеет id #wppopup-main.

document.addEventListener('wppopup_page_changed', function() {
    var popup = document.getElementById('wppopup-main');
    if (popup) {
        popup.remove();
        // Если popup создаётся с оверлеем, удаляем и его
        var overlay = document.querySelector('.wppopup-overlay');
        if (overlay) overlay.remove();
    }
});

Теперь при вызове события wppopup_page_changed popup будет удалён из DOM.

Если вы используете Barba.js, добавьте такой код:

document.addEventListener('barba:before-enter', function() {
    var popup = document.getElementById('wppopup-main');
    if (popup) popup.remove();
    var overlay = document.querySelector('.wppopup-overlay');
    if (overlay) overlay.remove();
});

Интеграция с плагином My Popup для WordPress

Плагин My Popup позволяет создавать и управлять всплывающими окнами без сложного кода. Для правильного удаления popup при AJAX-навигации можно использовать встроенные события плагина.

Например, My Popup генерирует событие myPopupClose, которое можно вызвать программно:

document.dispatchEvent(new Event('myPopupClose'));

Таким образом, при смене страницы вызовите:

document.addEventListener('wppopup_page_changed', function() {
    document.dispatchEvent(new Event('myPopupClose'));
});

Или напрямую подключитесь к событиям AJAX и вызовите закрытие popup.

Как реализовать вызов события при смене страницы в WordPress без SPA

Если на сайте используется стандартная навигация, но вы хотите добавить AJAX-подгрузку с поддержкой popup, можно применить следующий подход:

• Перехватить клики по ссылкам внутри сайта;
• Загрузить новый контент через AJAX;
• Вставить контент в контейнер;
• Вызвать событие удаления popup;
• Обновить URL с помощью History API.

Пример кода с использованием jQuery:

jQuery(document).ready(function($) {
  $('a').on('click', function(e) {
    var href = $(this).attr('href');
    if (href && href.indexOf(window.location.origin) === 0) {
      e.preventDefault();
      $.get(href, function(data) {
        var newContent = $(data).find('#main-content').html();
        $('#main-content').html(newContent);
        history.pushState(null, null, href);
        document.dispatchEvent(new CustomEvent('wppopup_page_changed'));
      });
    }
  });
  window.addEventListener('popstate', function() {
    location.reload();
  });
});

Этот код загружает контент без перезагрузки, обновляет адрес и вызывает событие для очистки popup.

Дополнительные рекомендации и лучшие практики

1. Всегда проверяйте наличие popup в DOM перед удалением, чтобы избежать ошибок JavaScript.

2. Следите за производительностью: при частой смене контента и постоянно создаваемых popup может расти нагрузка на память.

3. Используйте события плагинов, если они есть, для более корректного управления окнами.

4. Тестируйте на мобильных устройствах, где поведение AJAX и popup иногда отличается.

5. Если вы используете плагин Clearfy Pro, он может помочь оптимизировать скрипты и уменьшить конфликты, связанные с popup и AJAX-навигацией. Подробнее: Clearfy Pro на WpShop.