Создаём закладки на странице карточки товара

[VaM 363]

Делается очень просто.

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

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

Это лишь пример, Вы можете делать сколько угодно закладок.

Открываем шаблон страницы карточки товара - /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

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

Например вынести дополнительные картинки в закладку, характеристики товара и т.д.