Сначала найдем код в category.tpl:
Этот код отвечает за вывод товара в табличном виде и берет шаблон из product_brief.tpl.
<table cellspacing="0" cellpadding="0" width="100%"> {section name=u loop=$products_to_show} {if $smarty.section.u.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}<tr>{assign var="helpcounter" value=0}{/if}{assign var="helpcounter" value=$helpcounter+1} <td width="{math equation="100 / x" x=$smarty.const.CONF_COLUMNS_PER_PAGE format="%d"}%" align="left" valign="top"> {include file="product_brief.tpl.html" product_info=$products_to_show[u]} </td> {if ($smarty.section.u.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE || $products_to_show_counter eq $smarty.section.u.index+1} </tr> <tr> {section name=e loop=$smarty.const.CONF_COLUMNS_PER_PAGE max=$helpcounter} {assign var="idnrecat" value=$smarty.section.u.index-$helpcounter+$smarty.section.e.index+1} <td align="left"> <table cellspacing="0" cellpadding="0" width="100%"> <tr> <td><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$products_to_show[$idnrecat].productID}.html{else}index.php?productID={$products_to_show[$idnrecat].productID}{/if}"></a></td> </tr> </table> </td> {if $smarty.section.e.index+1 ne $smarty.const.CONF_COLUMNS_PER_PAGE}<td><img src="data/{$smarty.const.TPL}/pixel.gif" class="delim" alt=""></td>{/if} {/section} </tr> {else}<td class="delim"><img src="data/{$smarty.const.TPL}/pixel.gif" class="delim" alt=""></td>{/if} {/section} </table>
Заменяем его на ОЧЕНЬ большой код:
<div class = "tab-content" id = "tab-1"><table cellspacing="0" cellpadding="0" width="100%"> {section name=u loop=$products_to_show} {if $smarty.section.u.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}<tr>{assign var="helpcounter" value=0}{/if}{assign var="helpcounter" value=$helpcounter+1} <td width="{math equation="100 / x" x=$smarty.const.CONF_COLUMNS_PER_PAGE format="%d"}%" align="left" valign="top" style="border-right-style:solid;border-right-width:1px;border-right-color:#d4e4f0;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#d4e4f0;"> {include file="product_brief.tpl.html" product_info=$products_to_show[u]} </td> {if ($smarty.section.u.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE || $products_to_show_counter eq $smarty.section.u.index+1} </tr> <tr> {section name=e loop=$smarty.const.CONF_COLUMNS_PER_PAGE max=$helpcounter} {assign var="idnrecat" value=$smarty.section.u.index-$helpcounter+$smarty.section.e.index+1} {if $smarty.section.e.index+1 ne $smarty.const.CONF_COLUMNS_PER_PAGE}<td class="delim"></td>{/if} {/section} </tr> {else}<td class="delim"></td>{/if} {/section} </table> {if $catalog_navigator} <table cellspacing="0" cellpadding="0" width="100%"> <tr> <td class="cattop" align="left">Страницы: <span class="cattops">{$catalog_navigator}</span></td> </tr> </table> {/if} </div> <div class = "tab-content" id = "tab-2"><!--Таблица товаров --> <table cellspacing="0" cellpadding="0" width="100%"> {if $smarty.section.u.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE} <tr> {/if} <td width="{math equation="100 / x" x=$smarty.const.CONF_COLUMNS_PER_PAGE format="%d"}%" align="left" valign="top"> <!--Вставка шапки таблицы товаров--> <table cellspacing="0" cellpadding="0" width="100%"><tr><td class="hmin"> <table cellspacing="0" cellpadding="0" width="100%" class="gre"> <tr> {if $smarty.const.CONF_DISPLAY_PRCODE eq 1} <td class="lt pad" align="left" valign="middle" nowrap="nowrap">{$smarty.const.STRING_PRODUCT_CODE}</td> {/if} <td class="lt pad" align="left" valign="middle" width="41%" nowrap="nowrap">{$smarty.const.STRING_PRICE_PRODUCT_NAME}</td> <td class="lt pad" align="left" valign="middle" width="0%" nowrap="nowrap"></td> <td class="lt pad" align="left" valign="middle" width="16%" nowrap="nowrap">{$smarty.const.CURRENT_PRICE}</td> <td class="lt pad" align="left" valign="middle" width="15%" nowrap="nowrap"></td> </tr> <!--Вставка тела таблицы товаров--> {section name=u loop=$products_to_show} {if $smarty.section.u.index is even} {include file="product_brief_tab.tpl.html" product_info=$products_to_show[u] class="ptbl1"} {else} {include file="product_brief_tab.tpl.html" product_info=$products_to_show[u] class="ptbl2"} {/if} {/section} </table> </td></tr></table> {if $catalog_navigator} <table cellspacing="0" cellpadding="0" width="100%"> <tr> <td class="cattop" align="left">Страницы: <span class="cattops">{$catalog_navigator}</span></td> </tr> </table> {/if} <!--Конец правки--></div>Этим действием мы подключили табы.
Далее необходимо создать файл product_brief_tab.tpl. В нем пишем следующее:
{if $product_info ne NULL} {if $smarty.const.CONF_MOD_REWRITE eq 1} {assign var="tlink" value="<a href='product_`$product_info.productID`.html'>`$product_info.name`</a>"} {else} {assign var="tlink" value="<a href='index.php?productID=`$product_info.productID`'>`$product_info.name`</a>"} {/if} {assign var="preheader" value="<a href='admin.php?productID=`$product_info.productID`&eaction=prod' title='`$smarty.const.STRING_EDITPR`' style='float: right;'>+</a>"} {if $admlink}{assign var="postheader" value=`$preheader``$tlink`}{else}{assign var="postheader" value=$tlink}{/if} <tr class="{$class}"> <!--Код товара --> {if $smarty.const.CONF_DISPLAY_PRCODE eq 1} <td>{if $product_info.product_code}{$product_info.product_code}{/if}</td> {/if} <!--Наименование --> <td class="ptbl1"> {if $postheader ne ""}<table cellspacing="0" cellpadding="0" width="100%"><tr><td align="left">{$postheader}</td></tr></table>{/if} </td> <!--Наличие --> <td class="ptbl1">{if $smarty.const.CONF_CHECKSTOCK == '1'}{$smarty.const.IN_STOCK}: <b>{if $product_info.in_stock > 0}<span class="oki">{if $smarty.const.CONF_EXACT_PRODUCT_BALANCE == '1'}{$product_info.in_stock}{else}{$smarty.const.ANSWER_YES}{/if}</span>{else}<span class="error">{if $product_info.in_stock < 0}{$smarty.const.STOCK_TRAIN_GO}{else}{$smarty.const.ANSWER_NO}{/if}</span>{/if}</b>{/if}</td> <!--Цена --> <td class="price" id="optionPrice_{$product_info.productID}" style="border-bottom:1px solid #d4e4f0;">{if $currencies_count ne 0}{if $product_info.Price <= 0}{$smarty.const.STRING_NOPRODUCT_IN}{else}{$product_info.PriceWithUnit}{/if}{/if}</td>{if $currencies_count ne 0}{if $product_info.list_price > 0 && $product_info.list_price > $product_info.Price && $product_info.Price > 0}</tr><tr><td class="market-price">{$product_info.list_priceWithUnit}</td>{/if}{/if} <!--Заказ --> <td class="ptbl1"> <table cellspacing="0" cellpadding="0"> <tr> <td><input type="hidden" name="cart_{$product_info.productID}_x" value="{$product_info.productID}"> <a href="#" onclick="document.getElementById('HiddenFieldsForm_{$product_info.productID}').submit(); return false"><img src="data/{$smarty.const.TPL}/incart.png" alt=""></a></td> <td style="padding-left: 0px;"><input type={if $smarty.const.CONF_MULTYCART==0}hidden{else}text{/if} value="1" name="multyaddcount" {if $smarty.const.CONF_MULTYCART==1}size="2" style="margin-right: 4px; width: 16px;"{/if}> </tr> </table> </td> </tr> {/if}
Далее вставляем скрипт в начало category.tpl:
{literal} <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.tabs a').click(function(){ switch_tabs(jQuery(this)); }); switch_tabs(jQuery('.defaulttab')); }); function switch_tabs(obj) { jQuery('.tab-content').hide(); jQuery('.tabs a').removeClass("selected"); var id = obj.attr("rel"); jQuery('#'+id).show(); obj.addClass("selected"); } </script>{/literal}
Далее вставляем кнопки, где нужно:
<ul class="tabs"> <li><a href="javascript:void(0);" class="defaulttab" rel="tab-1" >Вкладка 1</a></li> <li><a href="javascript:void(0);" rel="tab-2">Вкладка 2</a></li> </ul>
Последнее действие вставляем стили:
/* Table styles */ table.gre{} table.gre td{background:#fff} table.gre td.lt{font-weight:bold;background:#fff} .pad{padding:8px;border-bottom:1px solid #d4e4f0;} .padt{padding:3px 8px} ul.tabs { width:250px; margin:0; padding:0; } ul.tabs li { display:block; float:left; padding:0 5px; } ul.tabs li a:hover, ul.tabs li a.selected { color:#5D8BB3; } ul.tabs li a { display:block; float:left; padding:5px; font-size:0.8em; background-color:#e0e0e0; color:#666; text-decoration:none; } .tab-content { clear:both; border:0px solid #ddd; padding:0px; }
Внимание шаблон может быть некорректно отображаться, т.к. шаблон был адаптирован на свой шаблон.
Все можно исправить в стилях и кодах в шаблоне.