Jump to content

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


Recommended Posts

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.

vamshop-tab.png

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

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

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

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...