Всем привет! В прошлой статье я рассказывал о 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');Можно также подключить еще один файл стилей в самом файле 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-документе.
Подключение скриптов в зависимости от jQuery (jQuery плагины)
Теперь давайте поговорим о том, как подключать jQuery плагины. jQuery плагин это скрипт, написанный на языке программирования javaScript, используя методы jQuery, но тут есть некоторые моменты в подключении вместе с библиотекой jQuery.
Сразу скажу о порядке подключения. Если ваш скрипт работает в зависимости от jQuery, (любой jQuery плагин), то его подключение всегда должно идти ниже подключения библиотеки jQuery. JQuery всегда идет выше. Далее, инициализация плагина — инициализация всегда идет ниже подключения самого плагина. Получается следующая иерархия:
- подключение jQuery;
- подключение плагина jQuery;
- инициализация плагина
Подключать нужно именно в таком порядке, иначе ничего работать не будет, а в консоль логе вы получите ошибку, впрочем об ошибках мы еще поговорим ниже.
Как я говорил выше в 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>» можно сразу вставить стили. Для этого вставим следующий код:
<?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.
Вот как выглядит консоль в Mozilla Firefox:
Консоль в Firebug браузера Mozilla Firefox. Для тех, кто не знает что такое Firebug — это расширение для Firefox инспектора кода, написанный сторонним разработчиком.
Обычно для верстки сайтов я использую браузер 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 использует алиас «$«, поэтому нужно ее локализовать. Как это сделать я писал выше и показывал три варианта.
Если вы получите ошибку и не знаете в каком коде ее искать, то можете щелкнуть по ссылке в правой части окна и открыть документ в котором находится код, вызвавший ошибку.
Вот наверно на это все, что я хотел рассказать. Надеюсь я помог вам разобраться и теперь вы поняли что к чему. Будут вопросы — задавайте в комментариях, с удовольствием отвечу.
Пока и до новых встреч!
Загрузка...