Как сделать вкладки в карточке товара на 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;}
$('.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());
});
Если возникнут проблемы, вы знаете к кому обратиться :)