Делаем раздел Услуги на основе вкладок BootStrap

На практике, была задача сделать раздел услуги в виде вкладок, и что бы была возможность добавлять в этот раздел контент, не правя код, а прямо непосредственно из под админки ModX.

Для осуществления я взял за основу элемент BootStrap "вкладки". Приступим.

Для начала, мы в админке ModX сформируем страницу-контейнер, которая в себе будет содержать наши элементы, и которые можно будет редактировать, добавлять и удалять. Получиться для примера дерево элементов вот такого вида:

Добавим стили и код для наших вкладок.

CSS

/*СТИЛИ ДЛЯ ТАБОВ НА СТРАНИЦЕ УСЛУГИ*/
.container-page-002-content a.nav-link {
    color: #0f9c3e;
    font-weight: 700;}
.container-page-002-content .nav-tabs .nav-link.active {
    border-color: #0f9c3e #0f9c3e #fff;}
.container-page-002-content .nav-tabs {
    border-bottom: 1px solid #0f9c3e;}

Для кода возьмём за базу этот код вкладок

HTML

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Код (символ "((" заменяем на две квадратные скобки)

<ul class="nav nav-tabs" id="myTab" role="tablist">
    ((!pdoResources? 
    &parents=`8` 
    &depth=`0` 
    &limit=`0`
    &includeTVs=`` 
    &includeContent=`1`
    &tplFirst=`tab_element_first`
    &tpl=`tab_element`))
</ul>
<div class="tab-content" id="myTabContent">
    ((!pdoResources? 
    &parents=`8` 
    &depth=`0` 
    &limit=`0`
    &includeTVs=`` 
    &includeContent=`1`
    &tplFirst=`tab_element_body_first`
    &tpl=`tab_element_body`))
</div>

Теперь пишем чанки наших шаблонов

Чанк: tab_element_first (символ "((" заменяем на две квадратные скобки)

<li class="nav-item">
    <a class="nav-link active" id="id((+id))" data-toggle="tab" href="#id((+id))-tab" role="tab" aria-controls="id((+id))" aria-selected="true">((+pagetitle))</a>
</li>

Чанк: tab_element (символ "((" заменяем на две квадратные скобки)

<li class="nav-item">
    <a class="nav-link" id="id((+id))" data-toggle="tab" href="#id((+id))-tab" role="tab" aria-controls="id((+id))" aria-selected="true">((+pagetitle))</a>
</li>

Чанк: tab_element_body_first (символ "((" заменяем на две квадратные скобки)

<div class="tab-pane fade show active" id="id((+id))-tab" role="tabpanel" aria-labelledby="id((+id))-tab">
    ((+content))
</div>

Чанк: tab_element_body (символ "((" заменяем на две квадратные скобки)

<div class="tab-pane fade" id="id((+id))-tab" role="tabpanel" aria-labelledby="id((+id))-tab">
    ((+content))
</div>

По аналогии все это возможно осуществить и на других CMS.