Скрипт магазина для вашего бизнеса

PHP скрипт интернет-магазина

ShopCMS.Ru

Профессиональный скрипт интернет-магазина

ShopCMS – быстрый и удобный скрипт интернет-магазина!
Всё самое лучшее создано для Вас и Ваших покупателей!
Главная Новости Купить Хостинг Клиентам Услуги Файлы Контакты Форум

Режимы показа товаров табличный и строчный одновременно

Обсуждение вопросов связанных с шаблонами и дизайном ShopCMS.

Режимы показа товаров табличный и строчный одновременно

Сообщение artmtmnw » 22 июл 2013, 12:20

Здравствуйте. Расскажу как сделать 2 вида вывода товара табличный и строчный режимы. Через jquery.
Сначала найдем код в 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`&amp;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;
}


Внимание шаблон может быть некорректно отображаться, т.к. шаблон был адаптирован на свой шаблон.
Все можно исправить в стилях и кодах в шаблоне.
artmtmnw
Активист
 
Сообщения: 14
Зарегистрирован: 16 июл 2013, 06:04


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron
Copyright © 2000-2011 phpBB Group. Все права защищены.
Отдел продаж: sales@shopcms.ru