Закладки на странице карточки товара (VAMshop)

Как сделать закладки на странице карточки товара написано в “Вопросах и ответах” оффсайта. Но информация там уже устарела, поэтому я и публикую этот пост.

В админке на странице start.php основная информация по клиентам, заказам и товарам выводится в закладках. Сделаны они с помощью jQuery. Не будем изобретать велосипед и те же скрипты используем на карточке товара.

1. В файле шаблона templates/ваш шаблон/module/product_info/product_info_v1.html после

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

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

   добавляем:

   {literal} <link type="text/css" href="jscript/jquery/plugins/ui/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="jscript/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jscript/jquery/plugins/ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ $('#tabs').tabs(); }); </script> {/literal}

   {literal} <link type="text/css" href="jscript/jquery/plugins/ui/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="jscript/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jscript/jquery/plugins/ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ $('#tabs').tabs(); }); </script> {/literal}

   Тем самым мы «прикручиваем» скрипт к странице.

2. В том же файле в нужном нам месте добавляем блок закладок в таком виде:

   <div id="tabs"> <ul> <li><a href="#vkladka_1">кнопка первой вкладки</a></li> <li><a href="#vkladka_2">кнопка второй вкладки</a></li> <li><a href="#vkladka_3">кнопка третьей вкладки</a></li> </ul> <div id="vkladka_1">текст первой вкладки</div> <div id="vkladka_2">текст второй вкладки</div> <div id="vkladka_3">текст третьей вкладки</div> </div>

   <div id="tabs"> <ul> <li><a href="#vkladka_1">кнопка первой вкладки</a></li> <li><a href="#vkladka_2">кнопка второй вкладки</a></li> <li><a href="#vkladka_3">кнопка третьей вкладки</a></li> </ul> <div id="vkladka_1">текст первой вкладки</div> <div id="vkladka_2">текст второй вкладки</div> <div id="vkladka_3">текст третьей вкладки</div> </div>

   Обрамляющий блок должен называться tabs, а вот блоки вкладок можно назвать произвольно. Количество вкладок неограничено.

3. Для того, чтобы настроить дизайн, пропишем стили в файле стилей.

Вот и всё.