13
итак, приступим к реализации.
1. Заходим в админку: Настройки / Общие настройки / и активируем (включаем) чекбокс "Принудительная очистка кэша"
2. В файле шаблона core/tpl/user/ВАШ_ШАБЛОН/head.tpl.html ищем строку
{* подключение скриптов *}
ниже нее вставляем
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
3. В файле шаблона core/tpl/user/ВАШ_ШАБЛОН/product_detailed.tpl.html в нужном для Вас месте вставляем код:
<div id="product-tabs">
<ul>
<li><a href="#tab1">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
</ul>
<div>
<div id="tab1">
Текст вкладки 1
</div>
<div id="tab2">
Текст вкладки 2
</div>
<div id="tab3">
Текст вкладки 3
</div>
</div>
<script>
{literal}
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({
srcNode: '#product-tabs'
});
tabview.render();
});
{/literal}
</script>
</div>
4. В файле шаблона data/ВАШ_ШАБЛОН/style.css добавляем стили, приведу простой пример стиля - само собой можно оформить более красивые стили с изображениями и т.п.
/* Product tabs */
#product-tabs{clear:both;}
ul.yui3-tabview-list{margin-top:10px;}
.yui3-tab-label{border-left:1px solid #CCC;border-right:1px solid #CCC;border-top:1px solid #CCC;margin-right:3px;}
div.yui3-tabview-panel{border:1px solid #CCC;padding:20px;margin-bottom:10px;}
.yui3-tab-selected{background-color:#CCC;margin-right:3px!important;}
4. Обновляем страницу товара. Заходим в админку: Настройки / Общие настройки / и деактивируем (выключаем) чекбокс "Принудительная очистка кэша".
На этом установка окончена, ну а вкладки уже используйте на свое усмотрение я например туда вставил виджеты комментариев из соц.сетей.
tabs.png 17.95К
316 Количество загрузок:Также табы можно использовать например для вывода описания либо характеристик товара.
