Подключить js файл joomla

Обновлено: 03.07.2024

Концепция управления правами доступа к ресурсам сайта на CMS Joomla 4

Во внешнем мире многие активы связаны между собой. Например, наш сценарий передачи и сохранения данных зависит от файла core.js для управления операциями с этими данными. В Joomla никогда не было простого способа указать это, вам просто нужно было включить несколько файлов. Joomla 4 меняет это с концепцией веб-ресурсов (concept of web assets).

Определение доступа в CMS Joomla 4

Это имеет структуру, состоящую из определения схемы (для проверки), имени, версии, лицензии, а затем одного или нескольких определений ресурсов. Ресурсы состоят из списка файлов js и файлов css, связанных с ресурсами и любыми зависимостями. Раздел зависимости - это просто список имен ресурсов, которые необходимы для функционирования запрашиваемого ресурса. Пример:

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

Примечание: Наличие joomla.asset.json для вашего расширения или шаблона рекомендуется, но не требуется для работы WebAssset (см. Следующий раздел).

Примечание: Не рекомендуется добавлять встроенный доступ к ресурсу в файл json, предпочитайте использовать файл.

Объяснение прав доступа в CMS Joomla 4

Каждый ресурс состоит из 2 этапов: регистрация и использование.

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

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

И загрузит их в реестр известных ресурсов.

Примечание. Каждое следующее определение ресурсов переопределит их элементы из предыдущего определения ресурса по имени элемента.

Вы можете зарегистрировать свое собственное определение ресурсов с помощью WebAssetRegistry:

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

Или ещё проще, с помощью WebAssetManager:

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

Чтобы проверить, существует ли ресурс используйте:

Включение доступа к ресурсам CMS Joomla 4

Все управление ресурсами в текущем документе обрабатывается WebAssetManager, который доступен с помощью $doc->getWebAssetManager();

С помощью WebAssetManager вы можете легко включить или отключить необходимый актив в Joomla стандартными методами ядра CMS.

Чтобы включить ресурс на странице, используйте функцию useAsset , например:

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

Чтобы отключить ресурс на странице, используйте функцию disableAsset . Приведенный ниже пример отключит загрузку ресурса jquery-noconflict .

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

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

Переопределение ресурсов

Переопределение может быть полезно, когда вам нужно переопределить URI элемента ресурса или его зависимостей. Как уже отмечалось, каждое из следующих определений ресурсов из joomla.asset.json переопределит элементы ресурсов из предыдущих определений ресурсов по имени элемента. Это означает, что если вы предоставите joomla.asset.json , который содержат уже загруженные элементы ресурсов, они будут заменены вашими элементами. Другой способ переопределения ресурса в коде — зарегистрировать элемент с тем же именем. Например, у нас есть скрипт "foobar", который загружает com_example/foobar.js библиотеку, и мы хотим использовать CDN именно для этой библиотеки:

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

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

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

Работа со стилями CSS

AssetManager позволяет управлять файлами CSS-стилей. Элемент актива таблицы стилей имеет тип " style ".

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

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

AssetManager предлагает следующие методы для работы с файлами CSS-стилей:

Добавление встроенных стилей CSS

В дополнение к файлам стилей WebAssetManager позволяет добавлять встроенный стиль и поддерживать их связь с файловым ресурсом. Встроенные стили могут быть размещены непосредственно перед зависимостью, после зависимости или, как обычно, после всех стилей.

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

Примечание: ресурс "foobar" должен существовать в реестре ресурсов, в противном случае вы получите исключение неудовлетворенной зависимости.

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

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

Примечание. Именованные встроенные ресурсы могут быть зависимостью от другого встроенного ресурса, однако не рекомендуется использовать встроенный ресурс в качестве зависимости от не встроенного ресурса. Это сработает, но в будущем такое поведение может измениться. Предпочтительно вместо этого использовать атрибут " position ".

Работа со скриптами JavaScript

AssetManager позволяет управлять файлами сценариев JavaScript. Элемент актива скрипта имеет тип "script". Пример определения json элемента в joomla.asset.json :

Пример определения json сценария модуля ES6 с возвратом к устаревшему браузеру:

Методы работы со со скриптами JavaScript в CMS Joomla 4

AssetManager предлагает следующие методы работы с файлами сценариев, написанных на JavaScript:

Добавление встроенного скрипта JavaScript

Дополнительно к файлам сценариев на JavaScript WebAssetManager позволяет добавлять встроенные сценарии на JavaScript в сам документ и поддерживать их связь с файловым ресурсом. Встроенный сценарий на JavaScript может быть размещен непосредственно перед зависимостью, после зависимости или, как обычно, после всех сценариев.

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

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

Примечание. Именованный встроенный ресурс может быть зависимостью от другого встроенного ресурса, однако не рекомендуется использовать встроенный ресурс в качестве зависимости от не встроенного ресурса. Это сработает, но в будущем такое поведение может измениться. Предпочтительно вместо этого использовать " position ".

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

Joomla позволяет вам использовать веб-компоненты для ваших нужд. В Joomla веб-компоненты загружаются не как обычный скрипт, а через загрузчик веб-компонентов, поэтому они загружаются асинхронно. Следовательно, элемент актива веб-компонента должен иметь флаг " webcomponent ", установленный в логическое значение " true ". Во всех других аспектах работа с веб-компонентами в AssetManager аналогична работе с элементом ресурса " script ".

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

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

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

Присоединение к документу:

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

Методы работы с веб-компонентом

Все методы работы с веб-компонентом такие же, как и методы работы с элементом ресурса сценария на JavaScript.

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

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

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

AssetManager предлагает следующие методы работы с предустановленными элементами (пресетами):

Дополнительно: Пользовательский класс WebAssetItem

Класс по умолчанию для всех элементов 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 вы можете определить, какой класс следует использовать с конкретным объектом AssetItem. Для этого вы можете использовать 2 свойства namespace и class . namespace может быть определено на корневом уровне (тогда оно будет использоваться как пространство имен по умолчанию для всех элементов ресурсов в joomla.asset.json ) или на уровне элементов. Например:

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

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

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

Особо проблем нет с CSS , пример

$doc =& JFactory::getDocument();
$doc->addStyleSheet('modules/mod_gridmy/css/reset.css');
$doc->addStyleSheet('modules/mod_gridmy/css/myTheme.css');
$doc->addStyleSheet('modules/mod_gridmy/css/defaultTheme.css');
$doc->addStyleSheet('modules/mod_gridmy/css/960.css');

а вот с JS были проблемки, внедрял во внутрь html

<head>
<title>Test</title>
<?php
echo '<script type="text/javascript" src="https://krayny.ru/saitstr/zametki/'.JURI::root().'modules/mod_gridmy/js/jquery.min.js"></script>'."\n";
echo '<script type="text/javascript" src="https://krayny.ru/saitstr/zametki/'.JURI::root().'modules/mod_gridmy/js/jquery.fixedheadertable.js"></script>'."\n";
echo '<script type="text/javascript" src="https://krayny.ru/saitstr/zametki/'.JURI::root().'modules/mod_gridmy/js/demo.js"></script>'."\n";

<?php
// получаем ссылку на экземпляр класса JDocument
$doc = & JFactory::getDocument();
// добавляем внешний JavaScript файл, который располагается в каталоге [корень_сайта]/modules/mod_mymodule/js/tooltip.js
$doc->addScript(JURI::root(true) . "/modules/mod_mymodule/js/tooltip.js");
?>

Подробный материал находил.

Есть еще вариант кода

Не проверял как работает и вставляется где

Подключение файлов скриптов в Joomla

Так же для того что бы подключить отдельно mootools можно использовать такую конструкцию:

Скрипты подключается к документу в области, где в шаблоне стоит

Так же файлы скриптов и сами скрипты можно подключать следующим образом:

Подключение файлов стилей в Joomla

Осуществляется аналогичным образом, что и скриптов. За исключение того что в последнюю переменную передаются дополнительные атрибуты, если они нужны, в виде массива.

еще есть такой вариант…

После того как я написал урок Библиотека jQuery User Interface. Меня очень часто просили рассказать о том как подключить jquery к сайтам написанным на движке Joomla. Так как вопрос актуальный я решил написать небольшую инструкцию по интеграции библиотеки jquery на Joomla.

Как известно в Joomla все построено на основе шаблонов, а значит и начать искать, куда нам подключить jQuery стоит именно с них.

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

Напротив используемого шаблона стоит звездочка. Запомнили название? Отлично, теперь нужно перейти по следующему адресу: Ваш сайт/templates/название шаблона/index.php. Это и есть основной файл шаблона, который склеивает все части шаблона в единый сайт.

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

1	<link rel= "stylesheet" href= "/css/editor.css" type= "text/css" />

2	<link rel= "stylesheet" href= "/css/template.css" type= "text/css" />

На основе подключения этих таблиц, можно подключить и наш файл jQuery. Должно получиться что-то схожее с этой записью:

1	<script type= "text/javascript" src= "/js/jquery.js" ></script>

Также незабываем, скопировать сам jquery файл в директорию, которую мы указали, в данном случае это: Ваш сайт/templates/название шаблона/js/jquery.js.

Самое главное сделано, но у вас наверняка возникнут вопросы, а где писать сам js код? Поэтому для примера я покажу вам написания простого скрипта с использованием этой библиотеки.

Заходим в менеджер материалов выбираем любую статью и с помощью редактора html кода встроенного в Joomla начинаем писать наш скрипт.

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

01	< p id = 'testof' >Скрыть дополнительную информацию</ p >

Так разметка готова, теперь то самое интересное. Чуть ниже начинаем писать наш скрипт:

06	$(this).html('Показать дополнительную информацию');>, function()

Вот и все наш скрипт готов, и отлично работает.

Кстати часто бывают такие случаи, когда html редактор, который стоит в Joomla, обрезает теги скрипт и в итоге нечего не работает. Для таких случаев можно просто выключать редактор в менеджере плагинов.

Плагины которые необходимо выключить подчеркнуты в скриншоте.

После того как плагины отключены, необходимо в разделе сайт в общих настройках выставить по умолчанию No Editor.

После выполнения этих действий ваш редактор будет выключен, и вы сможете спокойно работать со скриптами jQuery.

Кстати такая же проблема часто преследует пользователей, которые пытаются установить Google adsense на Joomla сайт. Через редактор закидывается скрипт с блоком рекламы, а когда сохраняешь, нечего не показывается. Но все решается, когда отключаешь редактор.

Это офиц. поддержка JOOMLA

Adding JavaScript

From Joomla! Documentation

JavaScript (also known as ECMAScript) is a scripting language primarily used in client-side web site development to extend and enhance an end-user's experience. Joomla provides developers with easy-to-use mechanisms to include JavaScript in their extensions using existing API methods.

There are a number of methods for including JavaScript in your Joomla extensions; some of these are described below.

Usage

There are three methods for embedding JavaScript into your code using the Joomla API; JDocument::addScriptDeclaration, JDocument::addScript and script. These methods should be called either in your component's View class (<yourcomponent>/views/<yourview>/view.html.php) or template script (<yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php or in the case of a module, in its template script (<yourmodule>/tmpl/<yourtemplate>.php).

Inline JavaScript

Blocks of JavaScript code can be declared directly within a component or module's display template using the JDocument class' addScriptDeclaration method:

External JavaScript

Alternatively, you may wish to separate your JavaScript into a separate file. Separating your JavaScript into an external file can make your template code easier to read especially if the JavaScript is lengthy or complex.

There are two ways to include a JavaScript file using the Joomla API. The first involves using the JDocument class' addScript method:

The second uses the JHTML class' script method:

API has changed in 3.x, so the second parameter cannot be a string. If you really need to use this method, you must include the absolute link to your javacript file:

Description

The Joomla API's JDocument::addScriptDeclaration, JDocument::addScript and script methods embed JavaScript into Joomla's index.php via the jdoc head tag:

Using the JDocument::addScript or script methods to embed JavaScript includes would result in the index.php rendering the following HTML:

Calling the class method JDocument::addScriptDeclaration would render the following HTML:

Using these methods is highly recommended as it clearly differentiates another scripting language (JavaScript) from the main PHP code, ensures all JavaScript is correctly embedded between the <head></head> tags and, in the case of JDocument::addScript and JHTML::script ensures that a JavaScript file is included only once (I.e. there is no .js file duplication).

Using a JavaScript Framework

A Javascript framework provides developers with generic functionality for handling various coding tasks in a familiar, consistent and platform-independent way. A framework enables the developer to forget about the intricacies of implementing a certain function in different web browsers and focus on the requirements of the software.

Two Javascript Frameworks are provided as part of Joomla 3.x; jQuery and Mootools. jQuery is a newly introduced framework which integrates with Joomla's new Bootstrap HTML framework; Mootools is Joomla's legacy Javascript library which is now superseded by jQuery and is included for backwards compatibility with 3rd party extensions.

In nearly all cases you should use a framework when developing Javascript in your extensions or templates and including one is very simple with Joomla's API.

Joomla 3.x jQuery

Please see the guide on Javascript Frameworks in Joomla 3.x for information about including a framework in Joomla 3.x

Joomla 1.5/2.5 Mootools

Unless you are maintaining Javascript code which leverages Mootools or you are developing an extension for Joomla 2.5 or earlier it is recommended you use jQuery instead.

Firstly, you will need to include the Mootools code in your extension. To include the Mootools framework in your extension, you add the following code to your view.html.php or tmpl file:

The above code results in the same outcome as the similar jQuery framework statement; that is it ensures Mootools is included correctly and only once.

Then using Mootools is almost identical to jQuery:

Important notes for 3rd party developers

If you are creating a custom template override or extension that needs to add a custom JS file, make sure to add important dependencies such as Jquery or Mootools before your custom JS files. JS framework fiels msut be always loaded before any other files to make sure they get executed the first, otherwise other files that load before the frameworks they need are likely to end in JS exceptions.

Some templates like Protostar or Beez insert all the dependencies you need using functions like

To load Jquery + Bootstrap but your should not relay in this fact on your extensions or custom templates overrides, always make sure your extension or custom override load the dependencies you need before the template does it, I will explain why later:

For example if you got a custom template override that need to insert a JS file with some Jquery scripts that does fancy things on all the pages where that template override is being used. In that case you should declare this on the top section of that override file:

If you are developing a 3rd party extension that you plan to put on the Joomla! extension directory you should do something like this:

The conditional clause to decide whether to add or not the extension resources is strongly encouraged and considered a good practice because it gives flexibility to 3rd party developers who don't want to use your extension resources and use custom/modified files without having to battle with Joomla! using workarounds and hacks to be able to remove your original extensions resources in order to avoid duplicates and conflicts.

Ask me why

If you check the source code of the index.php from the Protostar template, you can see that the statements

is added way before the statement

this can make you think that the framework files and your 3rd party files using methods like

will be added in the right order at the right spot, but that is not the case, because extension files and template override files are processed first and the index.php file of your current template is processed the last. This will cause that your custom JS files get inserted first and the framework files inserted from the template get inserted after.

This happens because the Joomla API (such as $doc->addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack), also once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to avid duplicates, it also means that the order of the files is not altered when the same files is attempted to be inserted several times.

Having said that doing this

at your custom templates overrides and extension, is required and does not cause harm or conflict with the call

Это также автоматически подключит фреймворк jQuery в режиме no conflict. Это означает, что работа должна осуществляться через пространство имен jQuery , а не через $ . Подключаемая версия библиотеки Bootstrap 2.3.2, и она расположена в /media/jui/js/bootstrap.js . Включает в себя методы для инициализации следующих плагинов: alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab, typeahead и affix. Подробнее об использовании Boostrap в Joomla 3 в статье "Bootstrap JHtml библиотека для Joomla 3.0".

Примечание: существует известная несовместимость между bootstrap-button и jquery-ui-button . Использование обоих кнопок на одной и той же странице приведет к конфликту.

jQuery

Для того чтобы подключить jQuery, используйте:

Это загрузит библиотеку jQuery версии 1.10.2 в режиме no conflict. Для загрузки в нормальном режиме, используйте:

jQuery UI

Библиотека JUX (Joomla User Experience) включает в себя ядро jQuery UI Core (версия 1.9.2 на момент Joomla 3.2.1) плюс Widget, Mouse, Position, а также плагин Sortable. Документацию по использованию вы можете найти на странице jQuery UI. Для загрузки ядра используйте:

Это загрузит jquery-ui.core.js из директории /media/jui/js/ . Включение jQuery UI автоматически включает JQuery в режиме no conflict, если это не было сделано ранее.

Для добавления библиотеки Sortable используйте:

Это автоматически загрузит ядро jQuery UI и библиотеку jQuery. Для прозрачности кода, лучше всего подключать эти две библиотеки через один вызов:

MooTools

Предполагается, что этот фреймворк будет исключен из будущих версий Joomla.

Joomla! Javascript Framework

Множество библиотек Joomla требуют фреймворк MooTools. Предполагается, что они будут мигрированы в фреймворк Bootstrap в будущих версиях Joomla.

Эти javascript библиотеки расположены в папке /media/system/js . Вот некоторые из них:

Применит функцию подписи (caption) ко всем элементам с классом $selector . По умолчанию классом селектора является img.caption . Для того чтобы применить его к нескольким классам просто вызовите JHtml::_('behavior.caption', $selector) несколько раз. Библиотека загрузится единожды, но будет применена ко всем указанным классам.

Для всех DOM объектов с классом $selector будет создан onhover тултип с необходимыми параметрами $params . По умолчанию классом селектора является 'hasTip' . Подключение этой библиотеки загрузит фреймворк MooTools.

Создает эффект combobox (поле со списком). Подключение этой библиотеки загрузит фреймворк MooTools.

Включает валидацию формы, которая основана на правилах, которые определены полями формы. Подключение этой библиотеки загрузит фреймворк MooTools.

Плагины для фреймворков и собственные библиотеки

Для подключения сторонних плагинов и/или своих библиотек используйте JHtml::_('script') с необходимыми параметрами. Например:

Современные веб-сайты, активно используют JavaScript для реализации дополнительного функционала, непосредственно на стороне клиента. К примеру, слайдеры и галереи изображений, валидация информации и т.д. Поэтому в данном уроке мы поговорим о том, как вставить скрипт в Joomla используя различные способы.

Как Вы знаете за формирование дизайна пользовательской части сайта, отвечает шаблон. Соответственно именно в шаблоне осуществляется подключение основных библиотек, фреймворков, скриптов и стилей. Но шаблон формирует основную структуру сайта, а за отображение информации компонентов или модулей, отвечают их встроенные макеты, которые при необходимости могут переопределяться в шаблоне. Таким образом, необходимые, для конкретных расширений скрипты, могут подключаться непосредственно в макетах.

Из выше сказанного следует, что скрипты для joomla могут быть подключены в определенном файле шаблона, или макета конкретного расширения. И наиболее удобное место – это, конечно же, главный файл шаблона index.php, так как расширения доступны не на всех страницах сайта.

Поэтому, давайте рассмотрим, первый способ подключения скриптов в Joomla, который предусматривает ручное добавление определенного кода. Итак, открываем исходные файлы CMS Joomla и переходим в каталог templates.

В данной папке мы видим список каталогов с установленными шаблонами. Далее переходим в папку активного шаблона и открываем файл index.php в текстовом редакторе.

Соответственно между тегами head как правило подключаются необходимые элементы (скрипты, стили и т.д). А значит, мы можем вручную прописать подключение или же использовать специальный метод, о котором мы далее поговорим. Поэтому давайте подключим простейший скрипт, который описан в отдельном файле script.js. Вот его код:

Соответственно между вышеуказанными тегами, используя блок <script>, прописываем подключение файла:

Хотел бы заметить, что файл со скриптом, Вы можете располагать где угодно, главное правильно указать путь подключения. Но в файловой структуре определена папка media, которая как раз и предназначена для хранения скриптов, библиотек и стилей. А значит, интересующий файл, мы будем располагать в каталоге script (данный каталог конечно же необходимо создать) вышеуказанной директории.

Обратите внимание — выражение <?php echo $this->baseurl;?>, возвращает базовый путь к сайту, относительно которого Вы прописываете путь к скрипту. После этого можно проверять результаты нашей работы.

Как Вы видите, метод alert() успешно отрабатывает.

Так же подключить файл со скриптом, вы можете более удобным способом, используя специальный метод addScript(), глобального объекта Joomla JDocument. То есть, перед кодом HTML файла index.php, используя вышеуказанный метод, зарегистрируем скрипт для подключения:

JFactory::getDocument()->addScript($this->baseurl . '/media/script/script.js');

При этом метод getDocument(), объекта JFactory, возвращает объект глобального класса JDocument. Метод addScript(), регистрирует скрипт для дальнейшего подключения в блоке . В качестве первого аргумента, необходимо передать путь к подключаемому скрипту.

Как Вы видите, скрипты подключаются довольно просто, но данный способ не совсем удобен, так как требует работы с файловой структурой.

Поэтому рассмотрим второй вариант ответа на вопрос, как вставить JavaScript в Joomla, который заключается в использовании дополнительного расширения под названием Flexi Custom Code.

После скачивания модуля, необходимо распаковать полученный архив и только потом приступать к установке расширения, используя “Менеджер расширений”.

Далее переходим в “Менеджер модулей” и открываем страницу настройки только что установленного модуля.

В текстовую область “Insert Code” добавляем необходимый JavaScript код, публикуем модуль в определенной позиции на интересующих страницах и сохраняем изменения.

Далее проверяем результаты нашей работы. Как Вы видите, данный способ более удобен, так как интересующий скрипт добавляется прямиком в панели администратора.

Читайте также: