frontTabs

Скачать frontTabs в магазине дополнений →
25 февраля 2016, 15:09

Компонент для создания блока с вкладками на фронтенде сайта.

Создаете ТВ в категории frontTabs, или любой другой на Ваш выбор, и выводите их на фронтенде в виде блока с вкладками

Параметры сниппета

Название Описание
&activeClass Класс активного таба.
&category Названия категории, в которой находятся ТВ, для вывода в виде блока с вкладками.
&rememberTab Запоминать активную вкладку (Для каждой страницы отдельно).
&resource ID ресурса. Если не указан используется ID текущего ресурса.
&toPlaceholder Если не пусто, сниппет сохранит все данные в плейсхолдер с этим именем, вместо вывода не экран.
&tpl Чанк оформления контента каждого таба. Доступны все поля modTemplateVar.
&tplHeader Чанк для вывода одного переключателя таба. Доступны все поля modTemplateVar.
&tplWrapper Чанк-обертка. Для заворачивания всех результатов. Понимает два плейсхолдера: [[+header]] и [[+body]].

Cистемные настройки

Название Описание
[[++ft_frontend_css]] Путь к файлу со скриптами. Если вы хотите использовать собственные скрипты - укажите путь к ним здесь, или очистите параметр и загрузите их вручную через шаблон сайта.
[[++ft_frontend_js]] Путь к файлу со стилями. Если вы хотите использовать собственные стили - укажите путь к ним здесь, или очистите параметр и загрузите их вручную через шаблон сайта.

Перед использованием необходимо предварительно создать и настроить ТВ.

Примеры

Сниппет поддерживает кастомные чанки для оформления отдельных ТВ. Если вы хотите использовать другой чанк для конкретного ТВ, то нужно указать его в параметре tpl_{ключ ТВ}. Например, указания отдельного чанка для ТВ с ключом img, будет таким:

[[frontTabs? &tpl_img=`ft_tab_img`]]

Также реализовано запоминание вкладок. То есть, если значение параметра rememberTab равно 1, то после перезагрузки страницы, активным будет таб, который был активен до перезагрузки страницы. Компонент использует cookie для запоминания состояния вкладок. На отдельной странице, оно может быть своим. Например, имеем 3 вкладки: Описание, Галерея, Коментарии. Для товара /tovar-1.html, активная вкладка для текущего посетителя будет "Комментарии", а для товара /tovar-2.html, активной вкладкой может быть "Галерея". Пример вызова:

[[frontTabs? &rememberTab=`1`]]

Сниппет использует стандратный набор скриптов и стилей с именами default соответственно, по типу компонента miniShop2. Как и в miniShop2, их можно заменить на свои скрипты в системных настройках компонента.

Верстка чанков, которые идут в сборке с компонентом, использует Bootstrap 3.

Важно о селекторах

Для корректной работы компонента, при кастомизации стандартных чанков, нужно использовать служебные селекторы элементов, или использовать свои. Для использования своих селекторов нужно кастомизировать default.js компонента Селекторы по умолчанию:

  • #frontTabs .ft-tab - для самой вкладки.
  • #frontTabs .ft-content - для контента, который привязан ко вкладке.

Недостатки

Для вывода вкладок, для которых не требуются ТВ, например, вызов сниппетов (вывод галереи, или коментариев). Должна быть создана ТВ-заглушка. Пример, выводим галерею товара, создаем пустую ТВ gallery с типом "Hidden", а в вызове сниппета указываем для нее индивидуальный чанк

[[frontTabs? &tpl_gallery=`ft_gallery_tpl`]]

Код чанка ft_gallery_tpl

<div class="ft-content row">
    <div class="col-lg-12">
        [[msGallery? &tplOuter=`@INLINE [[+rows]]`]]
    </div>
</div>