Breadcrumbs

Подключение JS, CSS из любого расширения Joomla

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

Сейчас

Говорят, что описанный ниже метод устарел и позже будет удален из ядра Joomla. Новый (и более чистый) метод асинхронной загрузки файла JavaScript в Joomla выглядит следующим образом:

// В шаблоне в папке "js" асинхронно
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true), array('async' => 'async'));

// Где-то с другого ресурса
JHtml::_('script', 'https://url/yourscript.js', array('version' => 'auto', 'relative' => true), array('defer' => 'defer'));

По сути, последний массив в приведенном выше вызове функции является массивом атрибутов , поэтому технически любой атрибут, поддерживаемый Joomla, должен работать. Если вы добавите неподдерживаемый атрибут, такой как 'myattribute'=>'myattribute' в последний массив, тогда Joomla добавит в конец тега HTML скрипта следующее : myattribute=”myattribute” . Это полезно, если вы хотите загрузить пользовательские атрибуты, которые впоследствии обрабатываются внутренним или внешним скриптом.

Где посмотреть, какая функция в ядре Joomla выполняет всю работу?

Если вы действительно хотите знать, то это функция addScript , которая находится в файле Document.php , который, в свою очередь, находится в папке library/src/Document .

Раньше

head

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

$document = JFactory::getDocument(); // Подключаем один раз

Подключить файл CSS или JS

$document->addStyleSheet($url); // для стилей

$document->addScript($url); // для Javascript

где $url - переменная, содержащая полный путь к файлу javascript или CSS, например: JUri::base() . 'templates/custom/js/sample.js'

defer async

Так же для скриптов можно передать параметры:

  • Тип скрипта, если это не JavaScript,
  • defer
  • async
$doc->addScript('/media/system/js/sample.js', "text/javascript", true, false);
$doc->addScript('/media/system/js/sample.js', "text/javascript", false, true);

Если у тега SCRIPT есть атрибут async или defer(true), то браузер ставит его в очередь на загрузку и, не задерживаясь, продолжает отображать страницу.
Когда скрипт загрузится — он выполнится.
Разница между этими двумя атрибутами заключается в том, что defer сохраняет порядок выполнения скриптов, а async — нет.

Инлайн стили и скрипты

// Javascript
$document->addScriptDeclaration('
    window.event("domready", function() {
        alert("An inline JavaScript Declaration");
    });
');

// CSS
$style = 'body {'
        . 'background: #00ff00;'
        . 'color: rgb(0,0,255);'
        . '}'; 
$document->addStyleDeclaration($style);

Или свой тег

$stylelink = '<!--[if lte IE 6]>' ."\n";
$stylelink .= '<link rel="stylesheet" href="/../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";

$document = JFactory::getDocument();
$document->addCustomTag($stylelink);

Для шаблона вроде как есть более удачный вариант:

$this
   ->addStyleSheet('/templates/'.$this->template.'/css/template.css')
   ->addStyleSheet('/templates/'.$this->template.'/css/menu.css')
   ->addScript('/templates/'.$this->template.'/js/menu.js');

Почему удобнее написано тут: https://joomlaforum.ru/index.php/topic,278856.msg1387215.html#msg1387215 

Перенос скриптов вниз страницы

Да так, чтоб они подключались из любого расширения Joomla.

в шаблоне

$path = $this->baseurl . '/templates/' . $this->template . '/';
// Add JavaScript Frameworks
$this->footerScript[$path . 'js/jquery-1.9.1.min.js'] = 1;
$this->footerScript[$path . 'js/bootstrap.min.js'] = 1;
$this->footerScript[$path . 'js/common.js'] = 10;

в конце шаблона

<?php
if (is_array($this->footerScript))
{
$scriptHtml = '';
asort($this->footerScript, SORT_NUMERIC);
foreach (array_keys($this->footerScript) as $script):
$scriptHtml .= '<script src="' . $script . '"></script>';
endforeach;
echo $scriptHtml;
}
?>
</body>

В любом расширении

$doc = JFactory::getDocument();
$doc->footerScript[ 'myPath/myScript.js'] = 1; // оперируя цифрами в значении мы оперируем порядком вывода

Ссылки и благодарности

Взято из документации: docs.joomla.org

С JoomlaForum:

  • вот тема,
  • Про defer и async
  • Загрузка внизу