Twitter Bootstrap – это самая популярная платформа HTML, CSS и JavaScript для разработки гибких и мобильных проектов в Интернете. Сейчас уже многие разработчики шаблонов для 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!
