Как удалить popup при переходе между страницами с использованием Gutenberg блоков в WordPress

Диагностика проблемы с popup при смене страниц в Gutenberg

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

Причина в том, что Gutenberg рендерит страницы частично через AJAX при использовании некоторых плагинов и тем с динамической подгрузкой контента, а стандартные popup-скрипты не всегда учитывают такие переходы.

Как проверить проблему

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

Пошаговое решение: удаление popup при переходе между страницами в Gutenberg

Для решения задачи нужно отследить событие смены контента и принудительно закрыть popup. Поскольку Gutenberg сам по себе не предоставляет явных хуков JS для переходов, если используется динамическая подгрузка, задача решается через слушатели событий JS, которые реагируют на смену URL или изменение DOM.

1. Убедитесь, что popup управляется через JavaScript и имеет функцию закрытия

function closePopup() {
  const popup = document.getElementById('my-popup');
  if (popup) {
    popup.style.display = 'none';
  }
}

2. Добавьте слушатель на изменение истории браузера для SPA или динамической подгрузки

function onPageChange() {
  closePopup();
}

// Поддержка pushState и popstate
window.addEventListener('popstate', onPageChange);

// Переопределим pushState, чтобы отследить программную навигацию
const pushState = history.pushState;
history.pushState = function() {
  pushState.apply(history, arguments);
  onPageChange();
};

3. Для классических переходов (полное обновление страницы) можно добавить событие beforeunload

window.addEventListener('beforeunload', closePopup);

4. Если используется плагин, который подгружает контент через AJAX (например, PJAX или аналог), нужно слушать специальные события плагина и вызывать закрытие popup

Пример для плагина, который триггерит событие contentReplaced:

document.addEventListener('contentReplaced', closePopup);

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

• Откройте страницу с popup.
• Перейдите по внутренней ссылке.
• Убедитесь, что popup закрывается при переходе.
• Проверьте консоль браузера на отсутствие ошибок.
• Тестируйте на разных браузерах и устройствах.

Частые ошибки и способы их исправления

• Popup не закрывается при смене страницы: возможно, навигация не перехватывается, если сайт не использует pushState. Проверьте, как именно происходит переход — классическая загрузка страницы или AJAX.
• Ошибка в консоли при переопределении history.pushState: убедитесь, что вы корректно вызываете оригинальную функцию через apply и не нарушаете другие скрипты.
• Popup закрывается, но не появляется заново после возврата: проверьте логику открытия popup, возможно, она привязана к событиям, которые не срабатывают при динамическом переходе.
• Неправильный ID или селектор popup: убедитесь, что селектор в функции closePopup совпадает с реальным ID или классом окна.

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

• Используйте event delegation и минимизируйте количество слушателей, чтобы не замедлять сайт.
• Проверяйте совместимость с плагинами кеширования и оптимизации, которые могут влиять на работу скриптов.
• Если используете плагины popup (например, My Popup из WPShop), изучите их API для программного закрытия окон, чтобы не писать лишний код.
• Для сложных SPA-решений рассмотрите использование MutationObserver для отслеживания изменений DOM и закрытия popup при появлении новых страниц.

Сравнение решений для удаления popup при переходах