Не работает javascript joomla

Конфликты JavaScript — не работают виджеты

Не работают вкладки, рейтинг, карта Google. Что делать?

Если у вас не работают вкладки, рейтинг, либо сломались другие виджеты на странице, то скорее всего появилась ошибка на сайте в JavaScript. Увидеть эту ошибку можно с помощью отладчика в браузере (нажав F12) на вкладке ошибок или в консоли.

Часто ошибка появляется из-за несовместимости различных расширений. Основная проблема несовместимости — если какое-нибудь другое расширение (или даже шаблон) использует собственный файл с jQuery. Поэтому рекомендуется использовать jQuery от JBZoo (Zoo).

Наш jQuery — это практически всегда последняя версия библиотеки. А как известно, он имеет очень хорошую обратную совместимость.

Одна из типичных ошибок представлена на следующем скриншоте

Как вы видите, jQuery не смог найти плагины tooltip и fancybox. Вместо них могу быть любые другие. Смысл в том, что после того, как эти плагины были объявлены (с помощью подключения JS-файла), следующее подключение jQuery «удаляет» их объявление, т.к. библиотека была инициализирована вторично.

Чтобы найти лишние подключения, нажмите Ctrl+U и у вас появится страница с кодом. На примере ниже показано, что файл № 2 предпочтительнее и должен подключаться выше всех (это произойдет автоматически). Остальные подключения лишние и скорее всего из сторонних расширений или шаблонов.

Если у вас нет базовых знаний JavaScript, то попробуйте использовать специальные плагины Joomla, например, jQuery Easy или JB Library Plugin. Также, вы можете найти полезную информацию на сайте Yootheme (создатели шаблонов и расширений для Joomla).

Бывают случаи, когда мешает встроенный «ускоритель», который вырезает из HTML пробелы/переносы/комментарии, склеивает файлы CSS и JavaScript. Не все оптимизаторы хорошие, и умеют правильно сжимать код без ошибок. На этапе разработки предлагаем отключить их и включать только по завершению работ.

Источник

Конфликты Javascript в Joomla

Используя Joomla мы часто устанавливаем различные расширения Joomla — это простой и удобный способ расширить функционал сайта. Но случаются моменты, что какая-то часть вашего сайта не работает правильно из-за javascript-конфликта. Что это такое?

Предположим, вы установили несколько расширений — красивый модуль авторизации с всплывающим окном и фотогаллерею, помимо них на сайте работает еще куча модулей и плагинов идущих в составе Joomla. Модули и компоненты могут использовать javascript-библиотеки: JQuery или Mootools

Предположим компонент A загружает стандартную js-библиотеку Mootools, встроенную в Joomla.

Плагин B загружает собственные библиотеки Mootools, другой версии, чем та, которая встроена непосредственно в Joomla!.

Модуль C загружает библиотеку Jquery.

Шаблон D загружает библиотеку Jquery, но другой версии, отличающейся от той, что подгружается модулем C.

Как вы видите может произойти много Javascript конфликтов не только между теми же библиотеками с разными версиями, но между javascript библиотеками, сделанные разными разработчиками наиболее известный пример- конфликт Jquery против Mootools. И, конечно, это не все, что может вызвать проблемы. Некоторые браузеры (в основном нестандартные, могут вызвать конфликты из-за нестандартной обработки Javascript. 🙁

Поэтому если какая-то часть вашего веб-сайта не работает, так как она должна работать, это может быть вызвано javascript-конфликтом. Например: вы запускаете галерею с всплывающим окном, нажмите на картинку, и вместо всплывающего окна у вас появляется новая страница на которой отображается изображение и др.

Если проблема работы сайта вызвана javascript-конфликтом, вы можете диагностировать это при помощи консоли javascript в вашем браузере. Есть много способов, как это сделать. Например, в Firefox, вы можете использовать Firebug, Web Developer toolbar, Отладчик, Консоли Ошибок и др. Смотрите скриншоты:

Отображение ошибок javascript в Firebug для Mozilla Firefox:

Отображение ошибок javascript в Отладчике для Mozilla Firefox:

Использование этих инструментов для отслеживания ошибок скриптов на сайте, очень важно и вы должны этому научиться, чтобы решать возможные конфликты скриптов на сайте

Как поступать если вы обнаружили ошибку в работе скриптов?

Во-первых, смените шаблон на стандартный — возможно ваш текущий шаблон приводит к ошибкам в работе javascript.

Далее, выключите все дополнительные плагины и модули, которые не относятся к стандартным для Joomla.

Постепенно, начинайте возвращать сайт в первоначальное состояние: включите шаблон, обновите страницу, посмотрите консоль — есть ли ошибки?

Далее один за одним начинайте включать, отключенные ранее модули и плагины, продолжая отслеживать сообщения консоли, как только вы увидите ошибку (как правило в консоли они отображаются красным цветом), вы диагностируете расширение, которое приводит к ошибке.

Ну а дальше либо ищите альтернативу для него, либо обращаетесь к программисту, который адекватно оценит ситуацию и предложит решение.

Источник

Как правильно подключать JavaScript и CSS в Joomla 4

В мире фронтенда многие ресурсы (ассеты) связаны между собой. В Joomla никогда не было простого способа указать эту связь, но Joomla 4 изменила эту ситуацию, введя концепцию Web Assets. Управление JavaScript и CSS в Joomla значительно упростилось, благодаря классу WebAssetManager .

Оглавление

Joomla 4 значительно улучшила свою кодовую базу, выкинув Mootools и по умолчанию отказавшись от jQuery. Вы можете подключать сторонние стили, скрипты и JavaScript библиотеки по своему усмотрению, и это одновременно как плюс, так и минус Joomla 4. Плюс в том, что вы получаете возможность выбора и гибкость в управлении этими ресурсами. Минус же заключается в том, что требуется знать, как правильно подключать стиль или скрипт в Joomla. Как раз о правильном подключении JavaScript и CSS мы расскажем ниже.

Определение скриптов JS и стилей CSS в Joomla

Связанные JavaScript и CSS ресурсы в Joomla определяются в файле JSON, например system/joomla.asset.json . Структура этого файла состоит из определения схемы (schema), имени (name), версии (version), лицензии (license) и затем одного или нескольких определений. Они состоят из списка JavaScript и CSS файлов, связанных с ресурсами, и любых зависимостей (dependencies). Раздел зависимостей — это просто список имён ассетов, который необходим для функционирования данного ассета. Пример:

Атрибут $schema — это файл определения схемы, который позволяет вам проверить ваш файл ресурсов с помощью JSON Schema. Подробнее о работе валидации JSON Schema читайте на официальном сайте.

Наличие joomla.asset.json рекомендуется для вашего расширения или шаблона, но не обязательно для работы WebAsset.

Не рекомендуется добавлять инлайны (куски кода как CSS, так и JS) в json-файл, для этого лучше использовать отдельный файл.

Стадия ресурса (ассета)

У каждого ресурса есть две стадии: зарегистрированный (registered) и используемый (used).

Зарегистрированный — это стадия, при которой ресурс только загружен в реестр WebAssetRegistry . Это означает, что WebAssetManager знает о существовании этих ресурсов, но не будет подключать их к документу во время рендеринга. Все ресурсы, загруженные из joomla.asset.json , находятся в стадии «зарегистрированный».

Используемый — это стадия, при которой ресурс включен через ->useAsset() ( ->useScript() , ->useStyle() , ->registerAndUseX() и т.д.). Это означает, что WebAssetManager подключит эти ресурсы и их зависимости к документу во время рендеринга.

Ресурс не может быть использован, если ранее он не был зарегистрирован, это вызовет исключение неизвестного ресурса ( UnknownAssetException ).

Регистрация в Joomla JavaScript и CSS

Все известные JavaScript и CSS ассеты в Joomla загружаются и затем сохраняются в реестр ресурсов WebAssetRegistry (для включения/выключения элемента вы должны использовать WebAssetManager ).

Joomla будет искать определение ассетов автоматически во время выполнения в следующем порядке:

И загрузит их в реестр известных JavaScript и CSS файлов.

Каждое следующее определение будет переопределять элементы ресурсов из предыдущего определения, по имени (name) элемента.

В Joomla вы можете зарегистрировать свои собственные определения ресурсов (ассетов) через WebAssetRegistry :

Чтобы добавить пользовательский элемент во время выполнения:

Или более просто, используя WebAssetManager :

Новый элемент foobar будет добавлен в реестр известных ресурсов, но не будет подключен к документу, пока ваш код (макет, шаблон и т.д.) не запросит его.

Методы registerScript (регистрация JavaScript) и registerStyle (регистрация CSS) являются прокси-методами для метода registerAsset класса WebAssetManager , который принимает следующие аргументы:

Параметр	Тип	По умолчанию	Описание
$type	string	Тип ресурса: script или style . Определяется автоматически при использовании registerScript и registerStyle .
$asset	WebAssetItem|string	Имя ресурса или объёкт класса WebAssetItem .
$uri	string	»	URI адрес ресурса. Поддерживаются также относительные пути типа ‘com_foobar/file.js’ .
$options	array	[]	Параметры ресурса , например [‘version’ => ‘auto’, ‘conditional’ => ‘lt IE 9’] .
$attributes	array	[]	Атрибуты ресурса, например [‘defer’ => true, ‘data-foo’ => ‘some attribute’] .
$dependencies	array	[]	Имена ассетов от которых зависит регистрируемый ассет, например [‘core’, ‘keepalive’] .

Чтобы проверить существование ассета в реестре, используйте метод assetExists :

Включение ресурса (ассета с JS и/или CSS)

Все управление JavaScript и CSS ресурсами в текущем документе осуществляется с помощью WebAssetManager , который доступен с помощью $doc->getWebAssetManager() . Используя WebAssetManager , вы можете легко включить или отключить нужный ресурс в Joomla с помощью стандартных методов.

Чтобы включить ассет на странице, используйте методы useScript (для JavaScript) или useStyle (для CSS), которые являются прокси-методами для useAsset , например:

WebAssetManager посмотрит в WebAssetRegistry , существует ли запрашиваемый ресурс, и включит его для текущего экземпляра документа. В противном случае будет выброшено исключение UnknownAssetException .

Для отключения ненужных ассетов (JS, CSS файлов) — используйте метод disableAsset . Приведенный ниже пример отключит загрузку ресурса jquery-noconflict .

Если есть какие-либо зависимости от отключаемого ресурса, то независимо ни от чего этот ресурс будет снова автоматически включен.

Чтобы проверить, включен ли ассет, и узнать его состояние:

Переопределение подключаемых стилей CSS и JS скриптов в Joomla

Переопределение может быть полезно, когда вам нужно переопределить URI элемента ресурса или его зависимостей. Как было отмечено выше, каждое следующее определение будет переопределять элементы из предыдущего определения, по имени элемента. Это означает, что если вы предоставите свой joomla.asset.json , содержащий уже загруженные элементы ресурсов с указанными файлами JavaScript и CSS, то они будут заменены на ваши элементы.

Другой способ переопределения в коде — зарегистрировать элемент с тем же именем. Например, у нас есть скрипт foobar , который загружает библиотеку com_example/foobar.js , и мы хотим использовать CDN именно для этой библиотеки. Изначально ресурс определён в системе следующим образом:

Чтобы переопределить URI, мы определяем элемент ресурса с именем foobar в нашем joomla.asset.json :

Или зарегистрируйте новый элемент ресурса через WebAssetManager :

Работа с CSS в Joomla 4

В Joomla WebAssetManager позволяет управлять файлами стилей (CSS). Такой элемент обозначается как «style». Пример json определения элемента CSS в joomla.asset.json :

Методы для работы со стилями CSS

В Joomla WebAssetManager предлагает следующие методы работы с файлами стилей CSS:

Добавление инлайн-стиля

Дополнительно к файлам стилей CSS, WebAssetManager позволяет добавлять инлайн-стили (inline style), и поддерживать их отношение к файлу ресурса. Инлайн-стили могут быть размещены непосредственно перед зависимостью, после зависимости, или как обычно после всех стилей CSS.

Инлайн-ресурс может иметь имя, как и другие ресурсы (но не обязательно). Имя может быть использовано для получения элемента ресурса из реестра или как зависимость от другого встроенного ресурса. Если имя не указано, то будет использовано сгенерированное имя, основанное на хэше содержимого.

В примере выше «foobar» должен существовать в реестре ресурсов, иначе вы получите исключение неполной зависимости.

Пример выше выведет:

Если инлайн-ресур CSS имеет несколько зависимостей, то для позиционирования будет использоваться последняя. Пример:

Именованные инлайн-ресурсы CSS могут быть зависимы от другого инлайна, однако не рекомендуется использовать такие конструкции в качестве зависимости от неинлайн-ресурса. Это будет работать, но такое поведение может измениться в будущем. Вместо этого лучше использовать «позицию».

Работа с JavaScript в Joomla 4

В Joomla WebAssetManager позволяет управлять файлами скриптов (JavaScript). Такой элемент обозначается как «script». Пример json определения элемента в joomla.asset.json :

Пример json-определения скрипта модуля ES6 с откатом к legacy:

Методы для работы со скриптами JS

В Joomla WebAssetManager предлагает следующие методы работы с файлами JS скриптов:

Добавление инлайн-скрипта JS

Дополнительно к файлам скриптов JS, WebAssetManager позволяет добавлять инлайн-скрипты (inline script), и поддерживать их отношение к файлу ресурса. Инлайн-скрипты JS могут быть размещены непосредственно перед зависимостью, после зависимости, или как обычно после всех JS скриптов.

Инлайн-ресурс JS может иметь имя, как и другие ресурсы (но не обязательно). Имя может быть использовано для получения элемента ресурса из реестра или как зависимость от другого встроенного ресурса. Если имя не указано, то будет использовано сгенерированное имя, основанное на хэше содержимого.

В примере выше «foobar» должен существовать в реестре ресурсов, иначе вы получите исключение неполной зависимости.

Пример выше выведет:

Если инлайн-скрипт JS имеет несколько зависимостей, то для позиционирования будет использоваться последняя. Пример:

Именованные JS инлайны могут быть зависимы от другого JS инлайнов, однако не рекомендуется использовать инлайн в качестве зависимости от неинлайн-ресурса. Это будет работать, но такое поведение может измениться в будущем. Вместо этого лучше использовать «позицию».

Работа с веб-компонентами

Joomla позволяет вам использовать веб-компоненты. В Joomla веб-компоненты загружаются не как обычный скрипт, а асинхронно через загрузчик веб-компонентов. Поэтому элемент ресурса (ассета) веб-компонента должен иметь флаг webcomponent , установленный в булево значение true . Во всех остальных аспектах работа с веб-компонентами в WebAssetManager аналогична работе с элементом типа «script».

Пример json определения некоторых веб-компонентов в joomla.asset.json (как модуль ES6):

Пример с откатом, для браузеров, не поддерживающих функцию ES6 «module». Обратите внимание, что унаследованный скрипт должен иметь зависимость wcpolyfill , а скрипт модуля должен иметь зависимость от унаследованного скрипта:

В качестве альтернативы вы можете зарегистрировать их в PHP (как модуль ES6):

Предпочтительно для имени использовать префикс «webcomponent», чтобы его можно было легко обнаружить и отличить от обычных скриптов в макете.

Работа с пресетами

«Пресет» (preset) — это особый вид элемента asset в Joomla, который содержит список элементов, которые должны быть включены, так же, как и прямой вызов useAsset() для каждого элемента в списке. Пресет может содержать смешанные типы ассетов (скрипт, стиль, другой пресет и т.д.). Тип должен указываться после символа # и следовать после имени ресурса, например: foo#style , bar#script .

Пример json определения элемента в joomla.asset.json :

Методы для работы с пресетами

В Joomla WebAssetManager предлагает следующие методы работы с пресетами:

Пользовательский класс WebAssetItem

В Joomla классом по умолчанию для всех элементов WebAsset является Joomla\CMS\WebAsset\WebAssetItem .

Вы также можете использовать пользовательский класс, который должен реализовывать интерфейс Joomla\CMS\WebAsset\WebAssetItemInterface или расширять Joomla\CMS\WebAsset\WebAssetItem .

Пользовательский класс может позволить вам выполнять дополнительные действия, например, включать файл ассета в зависимости от активного языка:

Кроме того, реализация Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface позволяет вам добавить опции сценария (которые могут зависеть от окружения), когда ваш ресурс включен и подключен к документу:

Элемент ресурса, реализующий WebAssetAttachBehaviorInterface , должен быть включен до события onBeforeCompileHead , иначе ‘onAttachCallback’ будет проигнорировано.

Определение пользовательского класса WebAssetItem в joomla.asset.json

В joomla.asset.json вы можете определить, какой класс должен использоваться с конкретным WebAsset . Для этого вы можете использовать два свойства namespace и class . namespace может быть определено на уровне Root (тогда оно будет использоваться как пространство имен по умолчанию для всех элементов Asset в joomla.asset.json ) или на уровне элемента. Например:

Здесь ассет foo будет связан с классом Joomla\Component\Example\WebAsset\FooAssetItem , а bar с классом MyFooBar\Library\Example\WebAsset\BarAssetItem .

Если пространство имен не определено, то по умолчанию будет использоваться Joomla\CMS\WebAsset . Если пространство имен определено, но пустое, то не будет использоваться никакое пространство имен, только класс. Пример:

Здесь foo будет связан с классом Joomla\CMS\WebAsset\FooAssetItem , а bar с классом BarAssetItem (без пространства имен).

• Последнее обновление: 12 октября 2021 .

Источник