frontTabs
Компонент для создания блока с вкладками на фронтенде сайта.
Создаете ТВ в категории frontTabs, или любой другой на Ваш выбор, и выводите их на фронтенде в виде блока с вкладками
Параметры сниппета
| Название | Описание |
|---|---|
&activeClass | Класс активного таба. |
&category | Названия категории, в которой находятся ТВ, для вывода в виде блока с вкладками. |
&rememberTab | Запоминать активную вкладку (Для каждой страницы отдельно). |
&resource | ID ресурса. Если не указан используется ID текущего ресурса. |
&toPlaceholder | Если не пусто, сниппет сохранит все данные в плейсхолдер с этим именем, вместо вывода не экран. |
&tpl | Чанк оформления контента каждого таба. Доступны все поля modTemplateVar. |
&tplHeader | Чанк для вывода одного переключателя таба. Доступны все поля modTemplateVar. |
&tplWrapper | Чанк-обертка. Для заворачивания всех результатов. Понимает два плейсхолдера: [[+header]] и [[+body]]. |
Системные настройки
| Название | Описание |
|---|---|
[[++ft_frontend_css]] | Путь к файлу со скриптами. Если вы хотите использовать собственные скрипты - укажите путь к ним здесь, или очистите параметр и загрузите их вручную через шаблон сайта. |
[[++ft_frontend_js]] | Путь к файлу со стилями. Если вы хотите использовать собственные стили - укажите путь к ним здесь, или очистите параметр и загрузите их вручную через шаблон сайта. |
Перед использованием необходимо предварительно создать и настроить ТВ.
Примеры
Сниппет поддерживает кастомные чанки для оформления отдельных ТВ. Если вы хотите использовать другой чанк для конкретного ТВ, то нужно указать его в параметре tpl_{ключ ТВ}.
Например, указания отдельного чанка для ТВ с ключом img, будет таким:
modx
[[frontTabs? &tpl_img=`ft_tab_img`]]Также реализовано запоминание вкладок. То есть, если значение параметра rememberTab равно 1, то после перезагрузки страницы, активным будет таб, который был активен до перезагрузки страницы. Компонент использует cookie для запоминания состояния вкладок. На отдельной странице, оно может быть своим.
Например, имеем 3 вкладки: Описание, Галерея, Коментарии. Для товара /tovar-1.html, активная вкладка для текущего посетителя будет "Комментарии", а для товара /tovar-2.html, активной вкладкой может быть "Галерея".
Пример вызова:
modx
[[frontTabs? &rememberTab=`1`]]Сниппет использует стандартный набор скриптов и стилей с именами default соответственно, по типу компонента miniShop2. Как и в miniShop2, их можно заменить на свои скрипты в системных настройках компонента.
Верстка чанков, которые идут в сборке с компонентом, использует Bootstrap 3.
Важно о селекторах
Для корректной работы компонента, при кастомизации стандартных чанков, нужно использовать служебные селекторы элементов, или использовать свои. Для использования своих селекторов нужно кастомизировать default.js компонента Селекторы по умолчанию:
#frontTabs .ft-tab- для самой вкладки.#frontTabs .ft-content- для контента, который привязан ко вкладке.
Недостатки
Для вывода вкладок, для которых не требуются ТВ, например, вызов сниппетов (вывод галереи, или коментариев). Должна быть создана ТВ-заглушка. Пример, выводим галерею товара, создаем пустую ТВ gallery с типом "Hidden", а в вызове сниппета указываем для нее индивидуальный чанк
modx
[[frontTabs? &tpl_gallery=`ft_gallery_tpl`]]Код чанка ft_gallery_tpl
modx
<div class="ft-content row">
<div class="col-lg-12">
[[msGallery? &tplOuter=`@INLINE [[+rows]]`]]
</div>
</div>