Заказать звонок
Заказ обратного звонка

Как сделать вкладки в карточке товара на OkayCMS и SimplaCMS


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

На базе стандартной OkayCMS или SimplaCMS доработка будет работать так:

  • первая вкладка по умолчанию будет открыта;
  • активная вкладка выделена;
  • при переходе по вкладкам контейнер с контентом будет плавно менять свою высоту в зависимости от объема содержимого;
  • доработка дает возможность добавлять несколько разных блоков с вкладками на одной странице сайта.

Важно: Данный код необходимо разместить в файл с расширением tpl, где Вам необходимо вывести вкладки, например, в карточке товара для отображения во вкладках информации - Описание товара, Характеристики, Отзывы. (В данном случае это product.tpl. Блок размещаем в том месте кода, где Вы хоитите выводить вкладки.)

<div class="tabs">
 
    <div class="tab_navigation">
        <a href="#tab1" class="tab_navigation_link">Название таба №1</a>
        <a href="#tab2" class="tab_navigation_link">Название таба №2</a>
        <a href="#tab3" class="tab_navigation_link">Название таба №3</a>
    </div>
     
    <div class="tab_container">
        <div id="tab1" class="tab">Содержимое таба №1</div>
        <div id="tab2" class="tab">Содержимое таба №2</div>
        <div id="tab3" class="tab">Содержимое таба №3</div>
    </div>
     
</div>


В файле стилей необходимо внести следующее поле для корректного отображения вкладок, а именно скрытия неактивных вкладок:

.tab{display: none;}


 
После того как все подготовлено, вставляете скрипт, который отвечает за механизм работы вкладок. В нашем случае скрипт размещаем в product.tpl. Так же скрипт можно поместить в файл script.js, который обычно располагается в папке js  с названием темы.
 
$('.tabs').each(function(i) {
    var cur_nav = $(this).find('.tab_navigation'),
        cur_tabs = $(this).find('.tab_container');
    if(cur_nav.children('.selected').size() > 0) {
        $(cur_nav.children('.selected').attr("href")).show();
        cur_tabs.css('height', cur_tabs.children($(cur_nav.children('.selected')).attr("href")).outerHeight());
    } else {
        cur_nav.children().first().addClass('selected');
        cur_tabs.children().first().show();
        cur_tabs.css('height', cur_tabs.children().first().outerHeight());
    }  
});
$('.tab_navigation_link').click(function(e){
    e.preventDefault();
    if($(this).hasClass('selected')){
        return true;
    }
    var cur_nav = $(this).closest('.tabs').find('.tab_navigation'),
        cur_tabs = $(this).closest('.tabs').find('.tab_container');
    cur_tabs.children().hide();
    cur_nav.children().removeClass('selected');
    $(this).addClass('selected');
    $($(this).attr("href")).fadeIn(200);
    cur_tabs.css('height', cur_tabs.children($(this).attr("href")).outerHeight());
});
 
 
Пробуйте!
Если возникнут проблемы, вы знаете к кому обратиться :)
 
 
Мы стали партнерами OkayCMS Как отключить выделение номера телефона в браузере на iPhone

Комментарии

Пока нет комментариев

Оставить комментарий