[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
Владимир Кисилица
01 марта 2016, 15:41
modx.pro
9
6 335
+6

Комментарии: 33

Роман Садоян
01 марта 2016, 21:32
+2
Или я не соображаю или правда тяжело написано, думаю так будет проще:
[[frontTabs?
	&tab=`чанк оформления TV по умолчанию` //параметр для указания чанка по умолчанию
	&tpl_имяTV=`Чанк с оформлением`
	&tpl_имяДругойTV=`чанк с оформлением`
]]
Компонент в принципе нужный, однозначно в избранное, спасибо!
Юрий
03 марта 2016, 21:10
0
Здесь на сайте справа «Прямой эфир» реализован с помощью этого компонента?
    Павел Гвоздь
    03 марта 2016, 21:23
    +1
    Определённо нет. Табы делать не так уж и сложно, чтобы для этого ставить компонент. По крайней мере Василий не из таких. Ну, насколько я его знаю. :))
      Юрий
      03 марта 2016, 21:30
      0
      Табы делать легко. Но табы с ajax — подгрузкой контента (как здесь) сложнее :)
        Роман Садоян
        03 марта 2016, 22:10
        +1
        Ajax подгрузки контента здесь нет, весь контент загружен, просто скрывается.

        Пример этих табов с иходным кодом тут — табы.

        UPDATE: Понял про что-ты — так это возможно pdoPage (судя по JSON массиву от сервера) с Ajax загрузкой контента.
    Владимир Кисилица
    03 марта 2016, 21:45
    +1
    Нет, здесь табы реализованы не этим компонентом.
      Василий Наумкин
      03 марта 2016, 22:22
      0
      Только на пару лет раньше, а так — конечно =)
      Ольга
      05 апреля 2016, 15:46
      0
      Подскажите, пожалуйста. Почему-то не выводится [[+value]] :( Название вкладки выводится ([[+caption]]), а [[+value]] нет :( Тип ввода стоит Текстовый редактор, Тип вывода по умолчанию.
      Вкладки вывожу так: [[frontTabs?]], в чанках ничего не меняла.
        Владимир Кисилица
        05 апреля 2016, 16:24
        0
        Значение, точно есть в доп. поле?
          Ольга
          05 апреля 2016, 19:43
          0
          да, перепроверила, все есть.
        adminixi
        01 июля 2016, 14:29
        0
        Добрый день!

        У меня та же проблема, как Вы это решили?
          Ольга
          16 июля 2016, 19:17
          0
          Здравствуйте. Если еще актуально. Решили таким образом: [[frontTabs?resource=`[[*id]]`]]. Не определялся ресурс по дефолту.
        Андрей
        07 декабря 2016, 10:32
        0
        Добрый день.
        Подскажите, можно ли вывести разным видом сами закладки табов? Мне в разных такладках табов нужно вывести разную инфу (у меня есть таб «Отзывы» и там нужно вывести средний рейтинг и есть таб «Вопросы» — там нужно вывести их количество.)
        Я так понимаю нужно сюда смотреть: frontTabs.wrapper?
          Владимир Кисилица
          07 декабря 2016, 10:48
          0
          чанк для оформления берется из &tplHeader. В этом чанке доступны все поля modTemplateVar. Можно взять плейсхолдер «name» и в зависимости от его значения выводить нужную информацию.
            Андрей
            07 декабря 2016, 17:53
            0
            Спасибо. Выявил проблему — именно в браузере Опера вкладки не скрываются а отображаются одна под одной. Не знаете в чем дело? В консоли:
            Строка 29 файла default.js компонента отдает undefined
            Помимо этого в консоли:
            jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/
            .send @ jquery.min.js:4
          adminixi
          19 марта 2017, 17:15
          0
          Не выводит [[+body]]

          frontTabs.wrapper
          <div id="frontTabs">
          	<ul class="nav nav-tabs">
          		[[+header]]
          	</ul>
          	<div>
          		[[+body]]
          	</div>
          </div>
            adminixi
            23 марта 2017, 14:22
            0
            Никто не знает, почему?

            Если вместо [[+body]] вписать что-то другое, то оно выводится во вкладках, а вот содержимое tv не выводится.
            Sibic
            22 ноября 2017, 14:32
            0
            Подскажите а есть возможность сделать извне ссылку для перехода внутрь конкретного таба?
              Владимир Кисилица
              22 ноября 2017, 14:44
              0
              Здравствуйте, к сожалению этой возможности нет, но её можно добавить расширив default.js
              Sibic
              22 ноября 2017, 14:58
              0
              Я понимаю что штатной возможности нет, может быть подскажите скрипт
              tantan
              25 декабря 2017, 20:41
              0
              Здравствуйте, подскажите возможно ли сделать так что бы вкладка не выводилась, если соответствующий доп параметр пустой? Просто есть карточки продукта с вкладками Описание, Тех.спецификация, Документация, Видео. Проблема в том что пока не по всем товарам есть видео, а по некоторым его и не будет, а пустые вкладки выглядят не красиво.
                Владимир Кисилица
                26 декабря 2017, 10:29
                0
                Компонентом это не предусмотрено. Попробуйте так:
                [[+value:notempty=`тут размещаем html код чанка`]]
                Это нужно сделать для чанков tplHeader и tpl
                  Андрей
                  06 февраля 2018, 12:15
                  0
                  Добрый день. У вас получилось сделать?
                алексей
                10 сентября 2018, 15:37
                0
                этот компонент вообще работает?
                кто может подсказать по внедрению?
                  Андрей
                  25 июня 2019, 15:25
                  0
                  Что не получается?
                  Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                  33