[frontTabs] Реализация вкладок на странице сайта

Здравствуйте, уважаемое сообщество. Представляю свой компонент для вывода блока с вкладками (табами) на страницах сайта, с возможностью настройки в админке MODX.





В админке, все выглядит как группа TV, которая находится в одной категории. По умолчанию это категория с именем frontTabs.

Возможности:

• Запоминание активных вкладок.
• Подключение отдельных чанков для оформления отдельного дополнительного поля.
• Кастомизация js и css

Запоминание активной вкладки

Для запоминания активной вкладки используются cookie, которые пишутся для каждой страницы отдельно. Для включения этой опции, нужно указать параметр rememberTab:

[[frontTabs?rememberTab=`1`]]

Чанки

Компонент поддерживает подключение чанков для оформления контента отдельных вкладок (параметр &tpl_имя_tv). Допустим на странице товара, есть TV image и youtube_video, в которых хранится ссылка на картинку и видео соответственно. Также нам нужно вывести допустим общую информацию о доставке, которая имеет значение по умолчанию, а также может меняться для конкретного товара. Тогда вызов сниппета и код чанков будут иметь такую структуру:

Вызов сниппета:

[[frontTabs?
	&tab=`ft_tab` //чанк по умолчанию
	&tpl_image=`ft_image_tab`// чанк для оформления TV image
	&tpl_youtube_video=`ft_video_tab`// чанк для оформления TV youtube_video
]]

Оформление чанка ft_tab:

<div class="ft-content row">
	<div class="col-lg-12">
		[[+value:default=`[[+default_text]]`]]
	</div>
</div>

Оформление чанка ft_image_tab:

<div class="ft-content row">
	<div class="col-lg-12">
		<img src="[[+value]]" alt="" />
	</div>
</div>

Оформление чанка ft_video_tab:

<div class="ft-content row">
	<div class="col-lg-12">
		<iframe width="560" height="315" src="[[+value]]" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

В админке:



Еще пример, для вывода галереи msGallery:

[[frontTabs?
	&tab=`ft_tab`
	&tpl_gallery=`ft_gallery_tab`
]]

Код чанка ft_gallery_tab:

<div class="ft-content row">
	<div class="col-lg-12">
		[[msGallery]]
	</div>
</div>

Недостатки

Для вывода информации сниппетами, нужно все равно заводить TV (например скрытого типа), и прописывать вызов сниппета в поле «Значение по умолчанию», или оформить индивидуальный чанк для этой ТВ. Это планируется исправить в будущих обновлениях. Пока не решил как, есть идея реализовать это как конфигурирование в json, при этом оставить возможность работы через TV.

Использование индексов
Для определения по какой вкладке был произведен клик, а также какой блок показать, используются индексы в DOM, что не хорошо. Получается, что работа js зависит от структуры верстки.

В планах:

На основе собственных размышлений и собранного фидбека, составил список будущих наработок:

• Для оформление чанков использовать не только Bootstrap 3, но и собственную верстку, чтобы при вызове на сайтах без Bootstrap, блок с вкладками выглядел адекватно.
• Вместо индексов DOM, использовать селекторы (например название TV)
• Конфигурирование вкладок в json формате.
• Индивидуальные чанки для шапки.

Хотелось бы получить отзывы от сообщества, чтобы понять, нужно ли продолжать работу и в какую сторону двигаться.

Ссылка на компонент в modstore

[[frontTabs?
	&tab=`чанк оформления TV по умолчанию` //параметр для указания чанка по умолчанию
	&tpl_имяTV=`Чанк с оформлением`
	&tpl_имяДругойTV=`чанк с оформлением`
]]

<div id="frontTabs">
	<ul class="nav nav-tabs">
		[[+header]]
	</ul>
	<div>
		[[+body]]
	</div>
</div>