Внимание !!! В этой статье представлены мои рассуждения по внедрению jQuery3 на сайт Helium или любой другой шаблон Gantry5 под управлением CMS Joomla 3.9.
Первое, с чем я столкнулся, что при установке любого старого коммерческого шаблона от Rockettheme на Joomla 3+ все эти шаблоны использовали встроенную библиотеку jQuery 1.12.4 , были и робкие шаги по использованию jQuery 2+ . Своя библиотека jQuery имеется и в Joomla3 [корневой каталог joomla - MEDIA/JUI/JS], ее версия 1.12.4 и она прекрасно подходит (не конфликтует) для этих шаблонов, использующих этот же стандарт библиотеки jQuery. Но все меняется - разработчики шаблонов и частиц для Gantry5 уже начинают и активно используют новый стандарт библиотеки сокращений javascript - jQuery 3.3.1 и здесь могут возникнуть проблемы с новыми частицами, написанных с помощью jQuery3 и старыми, не поддерживающие новый стандарт - система просмотра ошибок на сайте выдаст предупреждения и явный сбой сценария (например, ошибка Uncaught TypeError: ....is not a function - библиотека не подключена или переменная ... используется другой библиотекой). Разработчики Rockettheme давно заметили это и в своих новых версиях шаблонов постарались убрать конфликт и осуществить поддержку jQuery3 - переписали сценарии загрузки, убрали лишние папки с файлами , в том числе и сжатый файл jquery.min.js (версия 1.12.4), лежащий в корневом каталоге шаблона в папке JUI/JS.
С другой стороны, Joomla3 похоже не обновляет свою версию библиотеку jQuery1 до версии jQuery3 намеренно , т.к., возможно, разработчики хотят, чтобы Joomla3 помимо новых версий браузеров Google Chrome, Mozilla Firefox работала на всех старых версиях Internet Exproler (IE6 - IE10) - хотя кому это надо не знаю ...? - это только политика лояльности поддержки сайтов на Joomla, написанных ранее и использующих сокращенные старые, древние методы и обработчики событий.
Новая версия шаблона Helium тоже попала под эти изменения - своей библиотеки jQuery у шаблона теперь нет (на всех старых шаблонах Rockettheme при обновлении версии шаблона сценарий обновления сразу удаляет файлы jquery.min.js из папки имя_шаблона/JUI/JS ), и теперь шаблон подгружает её из Joomla3. Повторяю, при таком использовании библиотеки jQuery ошибки при просмотре браузера через консоль console в старых частицах и атомах, как правило, не возникает. При этом разработчики указывают на совместимость шаблона с jQuery3 (что имеется ввиду, какой метод используется, пока не выяснил - это может быть просто проверка валидности кода javascript, а может быть что-то посерьезнее).
Пример аннотации изменений шаблона Antares версии 1.3.0 от 2018 года
Но ошибки возникать могут. Современные браузеры хотя используют новые стандарты языка программирования javascript (библиотека jquery позволяет лишь упростить написание кода javascript, создавая сокращения при написании кода), но в том числе поддерживают и старые стандарты. Так Google Chrome работает по принципу - интерпретатор js обязательно прочитает код javascript написанный с помощью всех версий ECMAScript, при этом ругнется, если Вы используете очень старые методы javascript. А если при написании кода javascript частицы (атома) использованa новейшая версия библиотеки jQuery3, то шаблон под управлением Joomla3 даже не поймет, как использовать такой сценарий.
Ошибка типа Failed to load resource: net::ERR_BLOCKED_BY_CLIENT появляется при просмотре любого видео на сайте, в том числе и с помощью частицы JL Video Background от Joomlead - этих ошибок, как минимум 2, а может достигать при окончании просмотра видео и запредельных значений, хотя на работоспособности сайта это почти ни как не влияет. Это связано лишь с использованием в браузере плагина Adblock Plus ( при его отключении ошибка пропадает).
Другой тип ошибки Uncaught TypeError: Cannot read property '...' of null наблюдается при подключении частицы 2018 года от Joomlead - JL Block Reveal - система просмотра ошибок в браузере выдает явную ошибку, связанную со сценарием Javascript - не возможно прочитать, не найден элемент на странице сайта - null . В данном примере, действительно на эту страницу по сценарию загружается частица-атом Reveal Block (динамическое подкрашивание элемента), но на станице нет ни одного элемента DOM, использующего этот скрипт - и это выдает ошибку. Наверняка, это баг разработчиков частицы - надо менять код js.
Небольшую коррекцию на сайте вносит и модульная частица JL Code от Joomlead-2018 - она почему-то вносит изменения в некоторые части контента, написанного с помощью тега pre.
Сайт может зависнуть и при использовании JL Preloader, при этом не могут загрузиться страницы с частицами, использующие принудительную загрузку jQuery3 . Особенно влияют на работоспособность сайта так называемые частицыatoms (со своими предустановленные стилями и сценариями), которые загружаются автоматически на каждую страницу сайта.
Как правильно подключить библиотеку jQuery3.
Есть несколько вариантов попыток подключения jQuery 3 - список можно дополнить
Custom CSS/JS
- все подключается, но возникает конфликт между jQuery 1.12.4, установленной на Joomla 3.9 и jQuery 3.3.1, установленной на Gantry5 и самом шаблоне Helium.
Замена jQuery на Joomla
- могут перестать работать модули Joomla, установленные непосредственно в ней и написанные на языке библиотеки jQuery, а также компоненты, установленные ранее и использующих движок jQuery. Вообщем, дилемма - пока ищу выход из этой ситуации, уходить от CMS Joomla не хочу, а код PHP и загрузочные сценарии изменить не могу, не хватает знаний.
Custom HTML
- подключение последней версии jQuery 3.3.1 через сам модуль Gantry5 Custom HTML на тех страницах сайта, где нет конфликта сценариев JS - вариант срабатывает и код работает.
Вообще, модули Gantry5 Custom HTML обладают большой функциональностью - через них в создаваемый модуль можно подключать DOM (разметку html, скопированную с других сайтов), стили CSS , скрипты JS , как мы это делаем обычно на index.html - и все отлично работает ... Хотя бывают и неудачи, когда код HTML и JS ну очень большой, а сценарии JS используют разные библиотеки, подключаемые в онлайн, в том числе jQuery 3.3.1.
Пример успешного использования модуля , копирование звездных врат (правда без использования jQuery3) с сайта https://codepen.io/sabanna/project/editor/AYrpqe и установка всего сценария в модуле Custom HTML - посмотреть на тестовом сайте.
P.S.
Попробовал на тестовом сайте обновить версии jQuery, идущие в комплекте с Joomla3 в папке MEDIA/JUI/JS (jquery-1.12.4 и jquery-migrate-1.4.1) - для этого последовательно загрузил в эту папку новые файлы jquery-3.3.1.js , jquery-3.3.1.min.js , jquery-migrate-3.0.0.js , jquery-migrate-3.0.0.min.js .
После чего переименовал старые (добавил к ним префикс версии и оставил в папке) и удалил префиксы у новых файлов - и все, вроде все работает.
Проверил работу сайта. Все ОК. Будем ждать обновления Joomla - слетят ли обновления или нет.
... Слетели !!!
Что ж будем ждать выхода Joomla 4, в ней проблемы jQuery3 вроде решены. Выход стабильной версии Joomla4 сначала намечался на 4 квартал 2018 года, но что-то пошло не так ...
Прошу пользователей Gantry5 скидывать свои замечания на электронную почту или оставлять комментарии. Конечно, можно обойтись и без библиотеки jQuery3 на сайте - просто тестируйте новые частицы на наличие сокращенных записей кода - и все будет хорошо !!! При использовании чистого языка javascript ошибок не будет. А также не используйте для работы и просмотра сайтов браузер Internet Exproler - ну не хотят разработчики этого браузера использовать новые методы языка программирования javascript.