support 436 Posted June 21, 2011 Report Share Posted June 21, 2011 Делается очень просто. В админке сделаны закладки, сделаем также и на странице карточки товара. Для примера, сделаем три закладки - Описание, Сопутствующие товары и Отзывы. Это лишь пример, Вы можете делать сколько угодно закладок. Открываем шаблон страницы карточки товара - /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 Всё очень просто, Вы можете делать закладки с любым содержимым, т.е. добавляя любые метки шаблона карточки товара. Например вынести дополнительные картинки в закладку, характеристики товара и т.д. 1 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.