Правильне підключення стилів і JS плагінів в Joomla
- підключення стилів
- підключення скриптів
- Підключення скриптів в залежності від jQuery (jQuery плагіни)
- Можливі помилки. консоль браузера
- Uncaught referenceError: JQuery is not defined
- TypeError: $ (...). *** is not a function
- TypeError: $ (...) .ready is not a function
Всім привіт! В минулій статті я розповідав про 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-документі.
Підключення скриптів в залежності від 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 використовує алиас «$«, тому потрібно її локалізувати. Як це зробити я писав вище і показував три варіанти.
Якщо ви отримаєте помилку і не знаєте в якому коді її шукати, то можете клацнути по посиланню в правій частині вікна і відкрити документ в якому знаходиться код, який викликав помилку.
Ось напевно на це все, що я хотів розповісти. Сподіваюся я допоміг вам розібратися і тепер ви зрозуміли що до чого. Будуть питання - задавайте в коментарях, із задоволенням відповім.
Поки і до нових зустрічей!
Перевірка орфографії
Php echo $ this-> template?Js" type = "text / javascript"> </ script> <script src = "/ templates / <?
Php echo $ this- > template?
Php $ doc = JFactory :: getDocument (); $ BaseUrl = JUri :: base (); $ Doc-> addStyleSheet ($ baseUrl.'templates / папка шаблону / css / style.css '); ?
Doc-> addStyleDeclaration ($ style); ?
MagnificPopup ({type:' inline '});}); '); ?
Php JHtml :: stylesheet ( 'com_search / search.css', array (), true); JHtml :: script ( 'com_search / search.min.js'); ?
Що не так і де шукати помилку?