Почему после перехода на Swup.js перестают работать скрипты в Joomla 3
Библиотека swup.js - популярное решение для создания плавных переходов между страницами без полной перезагрузки. Однако многие разработчики сталкиваются с ситуацией, когда после первого перехода перестают выполняться JavaScript-скрипты: слайдеры, модальные окна, кастомные обработчики событий. Особенно часто это происходит на сайтах под управлением Joomla 3. Рассмотрим основные причины и способы решения проблемы.
Как работает Swup.js и почему ломаются скрипты
Swup.js подменяет содержимое контейнера через AJAX, не перезагружая весь документ. При этом скрипты, которые были выполнены при первой загрузке страницы, не запускаются заново для нового DOM-дерева. Кроме того, Joomla 3 часто вставляет inline-скрипты и подключает модули через document.write, что конфликтует с асинхронной природой swup.
Настройка SwupScriptsPlugin: типичные ошибки
Плагин SwupScriptsPlugin предназначен для повторного выполнения скриптов после перехода. В вашем коде указаны опции head: true и body: true, что корректно. Однако проблема может быть в том, что:
- Плагин не перехватывает скрипты, добавленные динамически через
eval()илиsetTimeout. - Joomla 3 использует MooTools или jQuery, которые инициализируются только один раз при загрузке страницы.
- Скрипты содержат привязку к событию
DOMContentLoadedили$(document).ready, которое не срабатывает при AJAX-подгрузке.
Как исправить: пошаговая инструкция
1. Перепишите инициализацию скриптов
Вместо $(document).ready используйте событие swup:contentReplaced:
document.addEventListener('swup:contentReplaced', function() {
// ваш код инициализации слайдеров, модалок и т.д.
});2. Отключите кэширование скриптов в настройках Swup
Добавьте опцию cache: false в конфигурацию, чтобы скрипты гарантированно загружались заново:
new Swup({
plugins: [new SwupScriptsPlugin({ head: true, body: true })],
cache: false
});3. Используйте SwupHeadPlugin для управления head
Если скрипты в <head> не перезапускаются, подключите SwupHeadPlugin - он обновляет мета-теги и повторно выполняет скрипты в head:
new Swup({
plugins: [
new SwupScriptsPlugin({ head: true, body: true }),
new SwupHeadPlugin()
]
});4. Проверьте совместимость с Joomla 3
Joomla 3 добавляет скрипты через JHtml::_('behavior.framework') и JFactory::getDocument(). Чтобы swup корректно обрабатывал их, убедитесь, что:
- Все скрипты загружаются через
<script src="...">, а не через inline-код. - Используется jQuery в режиме noConflict, чтобы избежать конфликтов с MooTools.
Альтернативные решения
Если SwupScriptsPlugin продолжает давать сбои, попробуйте:
- Принудительно перезагружать страницу при определённых условиях (например, при переходе на страницу с другой структурой).
- Использовать библиотеку Turbolinks или Pjax - они по-другому обрабатывают скрипты и могут быть более стабильными на Joomla.
- Обернуть весь JavaScript в функцию и вызывать её вручную после события
swup:contentReplaced.
Заключение
Основная причина, почему скрипты перестают работать после перехода на swup.js - неправильная инициализация или несовместимость с архитектурой Joomla 3. Используйте событие swup:contentReplaced, отключайте кэш и подключайте SwupHeadPlugin. Если проблема сохраняется - проверьте, как Joomla генерирует скрипты, и перепишите их под асинхронную загрузку.