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

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

40 400 в Joomla 33

Всем привет! В прошлой статье я рассказывал о jQuery плагине модальных окон для сайта Magnific Popup. В статье я затронул подключение плагина к сайту, но в данной статье хочу показать, как правильно подключать стили, jQuery плагины и скрипты на Joomla (в том числе и инициализация плагинов). В комментариях к статье как-то интересовались этим вопросом и конкретно интересовала Joomla. Ну что ж, думаю этот вопрос многих заинтересует. В качестве примера подключения плагина возьму опять таки Magnific Popup. Все остальные плагины подключаются примерно также.

Подключение стилей

Давайте сначала подключим файл стилей, т.к. сначала всегда подключаются стили, а потом уже скрипты на JS. Обычно файл стилей обзывают — style.css. Он может быть общим, также могут быть и дополнительные — меню (menu.css), адаптивная сетка (gride.css), типографика (typography.css) и т.д.

Итак, для подключения стилей открываем главный файл вашего шаблона — index.php. Расположен он по адресу — «/templates/папка вашего шаблона/index.php«. Открываем данный файл любым текстовым редактором, а еще лучше редактором кода — Sublime, Notepad++ и др. и в начале документа выше кода «defined(‘_JEXEC’) or die;» вставляем следующий код:

$doc = JFactory::getDocument();
$baseUrl = JUri::base();

$doc->addStyleSheet($baseUrl.'templates/'.$this->template.'/css/style.css');

У меня файл стилей style.css лежит в папке «CSS». Проследите за тем, чтобы был указан именно правильный адрес до файла стилей. Обратите внимание в адресе вместо названия папки шаблона подставлен код $this->template. Данный код автоматически выводит название папки шаблона, т.е. если вы вдруг переименуете папку, то новое название папки  выведется автоматически.

Также желательно все пути до стилей и скриптов указывать в абсолютном виде, т.е. с доменом сайта. Для этого мы создаем переменную «$baseUrl» и заносим в нее значение «JUri::base()«. Можно конечно сразу в путь дописать «JUri::base()«, не создавая переменную. Но так лучше делать, если вы используете «JUri::base()» только один раз, а если хотя бы 2 раза и более, то лучше уже через переменную. Таким образом, код будет быстрее интерпретироваться сервером и потреблять меньше памяти. На глаз вы можете это и не заметить, но тем не менее нужно делать именно так.

В результате в исходном коде страницы в секции «<head></head>» у нас появится строка подключения файла стилей.

<link rel="stylesheet" href="http://ваш домен.ru/templates/ваш шаблон/css/style.css" type="text/css" />

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

$doc->addStyleSheet($baseUrl.'templates/'.$this->template.'/css/gride.css');
Переменные $doc и $baseUrl не копируйте. Они создается один раз и все.

Можно также подключить еще один файл стилей в самом файле style.css, используя импорт — @import url(‘путь до файла’). Открываете подключенный файл стилей, в моем случае это файл style.css, и в самом начале вставляете следующий код — @import url(‘gride.css’); У меня файл gride.css лежит в той же папке, что и файл style.css. Если у вас они лежат в разных папках, то указывайте правильный путь.

Все, с подключением стилей разобрались. Теперь давайте перейдем к скриптам.

Подключение скриптов

Скрипты подключаются примерно также, как и стили. Ниже строки подключения стилей выводим следующий код:

$doc->addScript($baseUrl.'templates/'.$this->template.'/js/magnific-popup.min.js');

В результате в исходном коде страницы в секции «<head></head>» получим строку подключения скрипта Magnific Popup:

<script src="http://ваш домен.ru/templates/ваш шаблон/js/magnific-popup.min.js" type="text/javascript"></script>

Вообще, я в последнее время не подключаю скрипты в head, т.к. скрипты тормозят загрузку страницы. Я подключаю их в конце документа до закрывающего тега «</body>«. Подключение делаю следующим образом:

<script src="/templates/<?php echo $this->template ?>/js/magnific-popup.min.js"></script>

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

Читайте также:  Мультиязычный сайт на Joomla 3 - инструкция в видеоформате

Подключение скриптов в зависимости от jQuery (jQuery плагины)

Теперь давайте поговорим о том, как подключать jQuery плагины. jQuery плагин это скрипт, написанный на языке программирования javaScript, используя методы jQuery, но тут есть некоторые моменты в подключении вместе с библиотекой jQuery.

Сразу скажу о порядке подключения. Если ваш скрипт работает в зависимости от jQuery, (любой jQuery плагин), то его подключение всегда должно идти ниже подключения библиотеки jQuery. JQuery всегда идет выше. Далее, инициализация плагина — инициализация всегда идет ниже подключения самого плагина. Получается следующая иерархия:

  1. подключение jQuery;
  2. подключение плагина jQuery;
  3. инициализация плагина

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

Как я говорил выше в Joomla скрипты я подключаю в нижней части страницы, а библиотека jQuery подключена в секции «<head></head>«, правда подключение из ядра Joomla я отключаю и подключаю из CDN с помощью небольшого плагина. Как это делать я расскажу в следующей статье, поэтому подписывайтесь на обновления. Также, я отключаю библиотеку Mootools, которая также подключается из ядра. Иногда она вызывает конфликты скриптов, да и не нужна она вовсе. Сегодня практически все плагины работают на jQuery.

Покажу подключение и инициализацию плагина Magnific Popup на примере:

<script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="/templates/<?php echo $this->template ?>/js/magnific-popup.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $('.popup-content').magnificPopup({
            type: 'inline'
        });
    });
</script>

Инициализацию (вызов плагина) надо всегда обрамлять кодом

jQuery(document).ready(function($) {
...
});

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

$(document).ready(function() {
...
});

Это одно и тоже, просто в первом случае мы локализуем псевдоним «$«, чтобы он у нас не конфликтовал с другими библиотеками, которые могут быть подключены на сайте. Например, библиотека Mootools в Joomla. Есть также и такая запись:

(function($){
...
})(jQuery);

Я всегда пользуюсь первым вариантом.

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

<?php
$doc = JFactory::getDocument();
$baseUrl = JUri::base();
$doc->addStyleSheet($baseUrl.'templates/папка шаблона/css/style.css');
?>

Как видим подключение файла стилей ничем не отличается от подключения в файле index.php шаблона сайта. Только единственное здесь вместо кода «$this->template» не будет выводиться название вашего шаблона. Вписываем его руками. Также в секцию «<head></head>» можно сразу вставить стили. Для этого вставим следующий код:

Читайте также:  Дополнительные поля в Joomla 3.7.+
<?php
$doc = JFactory::getDocument();

// Добавление стилей в Head
$style = 'body {'
 . 'background: #00ff00;'
 . 'color: rgb(0,0,255);'
 . '}';
$doc->addStyleDeclaration($style);
?>

Таким же образом подключаем и скрипты:

$doc = JFactory::getDocument();
$doc->addScript($baseUrl.'templates/папка шаблона/js/magnific-popup.min.js');

Добавим код javaScript в Head документа:

<?php
$doc = JFactory::getDocument();

// Добавление кода JS в Head
$doc->addScriptDeclaration('
    jQuery(document).ready(function($) {
        $('.popup-content').magnificPopup({
            type: 'inline'
        });
    });
');
?>

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

<?php
    JHtml::stylesheet('com_search/search.css', array(), true);
    JHtml::script('com_search/search.min.js');
?>

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

Возможные ошибки. Консоль браузера

Бывает такое, что вроде бы все сделали правильно, а не работает. Что не так и где искать ошибку? В первую очередь необходимо заглянуть в консоль браузера на наличии в нем ошибок. Чтобы открыть консоль на открытой в браузере странице нажимаем клавишу «F12» и в открывшемся инспекторе кода переключаемся на вкладку «Console». Вот как выглядит консоль в браузере Google Chrome.

Консоль Google Chrome

Вот как выглядит консоль в Mozilla Firefox:

Консоль в браузере Mozilla Firefox

Консоль в Firebug браузера Mozilla Firefox. Для тех, кто не знает что такое Firebug — это расширение для Firefox инспектора кода, написанный сторонним разработчиком.

Консоль в Firebug

Обычно для верстки сайтов я использую браузер Firefox, и пользуюсь встроенной консолью, но бывает и такое, что открываю Firebug. Поэтому я его держу на всякий случай.

С консолью разобрались, теперь перейдем к ошибкам…

Uncaught referenceError: JQuery is not defined

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

TypeError: $(…).*** is not a function

Вместо *** будет подставлен метод, который создает плагин jQuery. Например, в Magnific Popup это метод  — «magnificPopup();«. Так вот, если вы не подключите сам плагин Magnific Popup (я беру его для примера) и создадите вызов данного плагина, то в консоле у вас может появиться следующая ошибка —  «TypeError: $(…).magnificPopup is not a function». Такая ошибка может возникнуть также, если вы подключите сам плагин ниже кода инициализации скрипта.

TypeError: $(…).ready is not a function

Данная ошибка может возникнуть, если вы не локализовали алиас «$«. Например, если на вашем joomla сайте подключена библиотека Mootools, то вам следует знать, что Mootools также, как и jQuery использует алиас «$«, поэтому нужно ее локализовать. Как это сделать я писал выше и показывал три варианта.

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

Ссылка на код, вызвавший ошибку

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

Пока и до новых встреч!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (5 оценок, среднее: 5,00 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории