4
Сначала найдем код в 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;
}Внимание шаблон может быть некорректно отображаться, т.к. шаблон был адаптирован на свой шаблон.
Все можно исправить в стилях и кодах в шаблоне.
