No replies to this topic

[support]

Делается очень просто.
В админке сделаны закладки, сделаем также и на странице карточки товара.

Для примера, сделаем три закладки - Описание, Сопутствующие товары и Отзывы.
Это лишь пример, Вы можете делать сколько угодно закладок.

Открываем шаблон страницы карточки товара - /templates/шаблон/module/product_info/product_info_v1.html

После:

{config_load file="$language/lang_$language.conf" section="product_info"}


Добавляем:

<script type="text/javascript" src="admin/includes/javascript/tabber.js"></script>
<link rel="stylesheet" href="admin/includes/javascript/tabber.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="admin/includes/javascript/tabber-print.css" TYPE="text/css" MEDIA="print">


Мы тем самым подключили скрипт для создания закладок, теперь нужно просто использовать его.
Официальная страница скрипта закладок - http://barelyfitz.com/projects/tabber
Там Вы можете прочитать подробное описание, примеры подключения скрипта и т.д., я лишь вкратце расскажу.

Теперь нам нужно разбить html-код шаблона по закладкам.
Закладки строятся следующим образом:

<div class="tabber">

<div class="tabbertab">
<h3>Заголовок первой закладки</h3>
Содержимое закладки
</div>

<div class="tabbertab">
<h3>Заголовок второй закладки</h3>
Содержимое закладки
</div>

</div>


Смотрим какими метками выводится описание, сопутствующие товары и отвызы.
Описание это следующий код:

{if $PRODUCTS_DESCRIPTION !=''}
<p>
{$PRODUCTS_DESCRIPTION}
</p>
{/if}


Сопутствующие товары:

{if $MODULE_cross_selling != ''}
{$MODULE_cross_selling}
{/if}

{if $MODULE_reverse_cross_selling != ''}
{$MODULE_reverse_cross_selling}
{/if}

{if $MODULE_also_purchased != ''}
{$MODULE_also_purchased}
{/if}


Отзывы:

{if $MODULE_products_reviews != ''}
{$MODULE_products_reviews}
{/if}


Теперь делаем html-код для трёх закладок, получится следующий код:

<div class="tabber">

<div class="tabbertab">
<h3>Описание</h3>
{if $PRODUCTS_DESCRIPTION !=''}
<p>
{$PRODUCTS_DESCRIPTION}
</p>
{/if}
</div>

<div class="tabbertab">
<h3>Сопутствующие товары</h3>
{if $MODULE_cross_selling != ''}
{$MODULE_cross_selling}
{/if}

{if $MODULE_reverse_cross_selling != ''}
{$MODULE_reverse_cross_selling}
{/if}

{if $MODULE_also_purchased != ''}
{$MODULE_also_purchased}
{/if}
</div>

<div class="tabbertab">
<h3>Отзывы</h3>
{if $MODULE_products_reviews != ''}
{$MODULE_products_reviews}
{/if}
</div>

</div>

Всё, теперь втавляем данные код в шаблон /templates/шаблон/module/product_info_product_info_v1.html, к примеру вставляем его вместо:

{if $PRODUCTS_DESCRIPTION !=''}
<p>
{$PRODUCTS_DESCRIPTION}
</p>
{/if}

У нас будет три закладки, смотрите рис. 1.


Шрифты, цвета, оформление закладок можно менять через CSS стили в файле - admin/includes/javascript/tabber.css

Всё очень просто, Вы можете делать закладки с любым содержимым, т.е. добавляя любые метки шаблона карточки товара.
Например вынести дополнительные картинки в закладку, характеристики товара и т.д.