Twitter Bootstrap – це найпопулярніша платформа HTML, CSS й JS для розробки гнучких та мобільних проектів в Інтернеті. Зараз вже багато розробників шаблонів для Joomla стали використовувати в своїх шаблонах бібліотеку (фреймворк) Twitter Bootstrap 3, але як завжди є одне АЛЕ...
В Joomla 3 за замовчуванням використовується бібліотека Bootstrap 2, і немає можливості її відключення, а також підключення бібліотеки Bootstrap 3, стандартними засобами. В Joomla 4 нам обіцяють підтримку Bootstrap версії 4, але це буде пізніше, а поки нам потрібно якось інтегрувати Bootstrap 3 в нашу поточну версію Joomla.
У цьому посібнику розповідається як обійти проблему використання (інтеграції) Bootstrap 3 в шаблоні та розширеннях Joomla 3.
1 крок. Відключення бібліотеки Bootstrap 2
Використання одночасно кілька бібліотек Bootstrap на сайті може привести до не передбачувані наслідки, тому перед підключенням Bootstrap 3 нам потрібно відключити Bootstrap 2.
Щоб зрозуміти які наслідки можуть бути при відключенні бібліотеки Bootstrap 2 потрібно знати, як і де підключається цей фреймворк.
Стандартний й правильний спосіб підключення Bootstrap 2 це виклик методів framework() та loadCss() з класу-утиліти JHtmlBootstrap, з бібліотеки Joomla.
Приклад підключення:
// Метод для завантаження JavaScript фреймворку Bootstrap 2 в початок документа.
JHtml::_('bootstrap.framework');
// Завантажує файли CSS, необхідні для Bootstrap 2.
JHtml::_('bootstrap.loadCss');
Викликатися ці методи можуть в будь-яких розширеннях: компонентах, модулях, шаблонах, а також макетах Joomla. Крім цього фреймворк Bootstrap може викликатися в тих же методах утиліти Bootstrap, наприклад, в "Bootstrap tooltip" (спливаючі підказки Bootstrap).
Як відключити?
З шаблонами все просто - не підключати Bootstrap 2 в вашому шаблоні і все... Але що робити з компонентами, модулями та макетами?
- Перший й трудомісткий спосіб – це знаходження і перевизначення, в вашому шаблоні, файлів (макетів) всіх розширень де підключається Bootstrap 2, видалення рядків підключення вище зазначених методів. Як це робиться в цій статті я описувати не буду, в інтернеті є багато матеріалів на цю тему.
- Другий спосіб – це використання розширень третьої сторони, які дозволяють це зробити. Наприклад, системний плагін "Joomla options", який дозволяє відключити бібліотеки: Mootools, JQuery і Bootstrap.
Встановлюється цей плагін, як і звичайне розширення Joomla: Розширення → Менеджер розширень → Встановити. Після встановлення плагіну його потрібно включити і налаштувати: Розширення → Менеджер плагінів → Вибір типу → system. Увага: не відключайте бібліотеку jQuery, це може порушити роботу вашого сайту.
Які наслідки?
Якщо компонент або модуль використовує елементи Bootstrap 2, то майже всі ці елементи не працюватимуть, або будуть працювати, але неправильно. Також вони не будуть оброблятися стилями CSS. Нижче показаний модуль входу на сайт до його перевизначення:
Тому, після підключення Bootstrap 3 всі ці елементи повинні бути перевизначені в вашому шаблоні Joomla, як це зробити дивіться нижче.
2 крок. Підключення бібліотеки Twitter Bootstrap 3
Підключити бібліотеку Bootstrap 3 також можна декількома способами.
- Використовувати плагін третьої сторони, який дозволяє підключити бібліотеку Bootstrap 3.
- Використовувати шаблон, в якому вже підключена бібліотека Bootstrap 3.
- Завантажити фреймворк на офіційному сайті та підключити його вручну.
- Для передплатників JKassa – використовувати бібліотеку "Genetics Framework" (gsWork) в якій вже передбачені основні методи для виведення елементів Bootstrap 3.
Використання бібліотеки "Genetics Framework"
Для початку використання бібліотеки gsWork досить у вашому шаблоні викликати два методи:
// Метод для завантаження JavaScript фреймворку Bootstrap 3 в початок документа. GsworkHtmlBootstrap3::framework(); // Завантажує файли CSS, необхідні для Bootstrap 3. GsworkHtmlBootstrap3::loadCss();
Окрім методів, які підключають JavaScript скрипти та CSS стилі бібліотека gsWork має кілька методів, які допомагають швидко та легко використовувати елементи Bootstrap 3 в ваших розширеннях або шаблоні-макеті компонента JKassa:
- modal – Додає підтримку JavaScript для модальних вікон Bootstrap;
- renderModal – Метод візуалізації модальних вікон Bootstrap;
- tooltip – Додає підтримку JavaScript для підказок Bootstrap;
- startAccordion – Додає підтримку JavaScript для акордеонів Bootstrap;
- endAccordion – Закриває поточний акордеон;
- addSlide – Починає показ нового слайда акордеона;
- endSlide – Закриває поточний слайд.
Детальніше про використані цих методів дивіться в документації й обговореннях на форумі підтримки передплатників JKassa.
3 крок. Перевизначення файлів розширень та макетів
Якщо ви НЕ використовуєте готовий шаблон, в якому вже перевизначені фали під Bootstrap 3, нижче показаний список файлів, які необхідно перевизначити, щоб зробити ваш шаблон сумісним з Bootstrap 3.
Файли повинні бути розміщені в your_website/template/your_template/html/:
- Компоненти (в цій папці)
- com_contact
- com_content
- com_search
- com_tags
- com_users
- com_weblinks
- Макети в папці - layouts
- Модулі (в цій папці)
- mod_breadcrumbs
- mod_login
- mod_menu
- mod_search
- modules.php
З питань, пов'язаних з міграцією Bootstrap, наступна посилання буде корисна для вас - Migrating from 2.x to 3.0.
Також ви можете використовувати, як приклад, простий шаблон для Joomla! 3.x, сумісний з Twitter Bootstrap v3.x.
Нижче показаний модуль входу на сайт після його перевизначення:
4 крок. Шаблон-макет Bootstrap 3 для компонента Jkassa
Одним з нововведень в JKassa (в порівнянні з JoomlaKassa) це шаблони для завантаження динамічного контенту розширень JKassa (компонента та модулів) в зовнішньому інтерфейсі магазину. Шаблони JKassa побудовані на використанні мови Liquid, мова з відкритим вихідним кодом, що дозволяє легко поєднати дизайн розширень JKassa з дизайном вашого основного шаблону для сайту.
Одним з таких шаблонів є шаблон "jkTemplates - Bootstrap 3" сумісний з Twitter Bootstrap v3.x. Для його установки й вибору його як шаблон за замовчуванням, в адміністративному інтерфейсі JKassa перейдіть в розділ: Компоненту → JKASSA → Інструменти → Дизайн.
Підсумок
Пройшовши по цим крокам, ви зможете "обійти" Joomla та використовувати улюблений шаблон, який побудований на фреймворку Twitter Bootstrap 3. Але Joomla, як і ми, не стоїть на місці і вже зовсім скоро ми зможемо насолоджуватися новим дизайном наших сайтів та інтернет магазинів, працюючих на Bootstrap 4!
