Вкладки в товарах

Очень часто на странице товара нужно уместить очень много информации так, чтобы она хорошо читалась, не терялась и была упорядочена, для этого удобно использовать табы.

Структура

Создадим сниппет tabs и подключим его в нужном месте на странице товара. HTML код будет состоять из навигации, выполненной посредством списка ul и блоков с контентом. Для начала создадим 2 таба.

<div class="container_12 tabs">
    <div class="grid_12">
         <nav>
           <ul>
             <li class="active"><a href="#" data-id="one"><div class="curent"><div class="inner"></div></div>Описание</a></li>
             <li><a href="#" data-id="two"><div class="curent"><div class="inner"></div></div>Отзывы</a></li>  
           </ul>
          </nav>    
          <div id="one" class="tab productcontain">
          <div class="content">
            
          </div>          
        </div>
          <div id="two" class="tab">
          <div class="content">
           //Код отзывов
      </div>;
        </div>             
    </div>      
 </div>

Стили

Стили добавляются по вкусу. Главное расположить список навигации горизонтально и как-то отметить активный пункт. Табы по умолчанию невидимы, кроме первого. Из основного:

.tabs .tab {
    display: none;
}
.tabs #one {
    display: block;
}
.tabs ul li {
    display: inline-block;
}
.tabs ul li a {
    color: #111;
}
.tabs ul li.active a {
    color: #000;
}

Логика

Для переключения между табами, при клике на ссылку навигации нужно скрывать табы и делать видимым нужный. Убать класс “active”, c неактивных элементов навигации и добавить в активный. Для определения нужного таба используется аттрибут data-id в навигации и id в теле таба.

Для CoffeeScript:

<script type="text/coffeescript">
$ ->
  tabs = $('.tabs')
  tabs.on 'click', 'nav a', (e) ->
    e.preventDefault()
    tabs.find('nav li').removeClass 'active'
    $(@).parent().addClass 'active'
    tabs.find('.tab').hide()
    tabs.find("##{ $(@).data("id") }").show()  
</script>

Для JavaScript:

<script type="text/javascript">
(function() {
  $(function() {
    var tabs;
    tabs = $('.tabs');
    return tabs.on('click', 'nav a', function(e) {
      e.preventDefault();
      tabs.find('nav li').removeClass('active');
      $(this).parent().addClass('active');
      tabs.find('.tab').hide();
      return tabs.find("#" + ($(this).data("id"))).show();
    });
  });
}).call(this);
</script>

Дополнительные поля

Теперь все работает, и при добавлении стилей выглядит примерно так:

Но что, если нужно разместить еще дополнительную информацию, или разнести по табам уже существующую? Для этого можно создать новый таб с помощью дополнительного поля товара. Создадим поле в разделе “Настройки” в бек-офисе. Выбрать “Текстовая область” и “Индексировать”. Назовем его “Характеристики”.

Далее можно сразу отредактировать его на странице товара.

Добавим еще один таб в HTML и выведем туда это поле.

<div class="container_12 tabs">
    <div class="grid_12">
         <nav>
           <ul>
             <li class="active"><a href="#" data-id="one"><div class="curent"><div class="inner"></div></div>Описание</a></li>
             <li><a href="#" data-id="two"><div class="curent"><div class="inner"></div></div>Отзывы</a></li>  
             <li><a href="#" data-id="two"><div class="curent"><div class="inner"></div></div>Характеристики</a></li>  
           </ul>
          </nav>    
          <div id="one" class="tab productcontain">
            <div class="content">
              
            </div>          
          </div>
          <div id="two" class="tab">
            <div class="content">
             //Код отзывов
            </div>
          </div>
          <div id="three" class="tab">
            <div class="content">
              
            </div>          
          </div>               
    </div>      
 </div>

Итог

Таким же образом можно добавлять любые дополнительные поля и табы. Итоговый вид сниппета, за исключением стилей будет выглядеть так:

<div class="container_12 tabs">
    <div class="grid_12">
         <nav>
           <ul>
             <li class="active"><a href="#" data-id="one"><div class="curent"><div class="inner"></div></div>Описание</a></li>
             <li><a href="#" data-id="two"><div class="curent"><div class="inner"></div></div>Отзывы</a></li>  
             <li><a href="#" data-id="two"><div class="curent"><div class="inner"></div></div>Характеристики</a></li>  
           </ul>
          </nav>    
          <div id="one" class="tab productcontain">
            <div class="content">
              
            </div>          
          </div>
          <div id="two" class="tab">
            <div class="content">
             //Код отзывов
            </div>
          </div>
          <div id="three" class="tab">
            <div class="content">
              
            </div>          
          </div>               
    </div>      
 </div>
<script type="text/javascript">
(function() {
  $(function() {
    var tabs;
    tabs = $('.tabs');
    return tabs.on('click', 'nav a', function(e) {
      e.preventDefault();
      tabs.find('nav li').removeClass('active');
      $(this).parent().addClass('active');
      tabs.find('.tab').hide();
      return tabs.find("#" + ($(this).data("id"))).show();
    });
  });
}).call(this);
</script>

Ожидаемый внешний вид после добавления стилей: