PrestaShop Forum

Prestashop 1.5
Для того, чтобы выводить товары в табличном (grid) виде, нужно:

1. Изменить шаблон страницы категории.
Это файл: /themes/default/product-list.tpl
Вывод 4 товаров в 1 ряд:
{if isset($products)}
    <ul id="product_list" class="clearfix">
    {foreach from=$products item=product name=products}
    <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%4 == 0}last_row_item{else}item{/if}">
        <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
           <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
            {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
        </a>
        <p class="clear"></p>
        <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a></h3>
        <div class="content_price">
            {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
                        {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
            {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
                            {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>
                            {else}
                            <span style="height:16px; margin: 5px 0; display: block"></span>
            {/if}
            {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
                {if ($product.allow_oosp || $product.quantity > 0)}
                    {if isset($static_token)}
                        <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                    {else}
                        <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                    {/if}                     
                {else}
                    <span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
                {/if}
            {/if}
            {if isset($comparator_max_item) && $comparator_max_item}
                <p class="compare">
                    <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} />
                    <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                </p>
            {/if}     
        </div>
    </li>
    {/foreach}
    </ul>
{/if}


2. Изменить файл стилей
/themes/default/css/product_list.css
ul#product_list {
    list-style-type: none
}
    #product_list li {
        text-align: center;
        float: left;
        width: 126px; /* Ширина блока зависит от ширины центральной колонки вашей темы*/
        height: 300px;  /* Высота блока складывается из высоты картинки, заголовка, описания и прочих элементов */
        padding: 16px;
        margin-bottom: 14px;
        margin-right: 10px;
        background-color: #f9f9f9
    }
    #product_list li.last_row_item {margin-right: 0;clear:both;}

    #product_list li a {
        color: #374853;
        text-decoration: none
    }
    #product_list a.product_img_link {
    overflow:hidden;
    position:relative;
    float: left;
    display:block;
    border: 1px solid #ccc
    }
    #product_list a.product_img_link img {
        display: block;
        vertical-align: bottom
    }

    #product_list li span.new {
        display: block;
        position: absolute;
        top: 15px;
        right:-30px;
        padding: 1px 4px;
        width: 101px;
        font-size:10px;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform:rotate(45deg);
        -ms-transform: rotate(45deg);
        background-color: #990000
    }
    #product_list li h3 {
        padding:0 0 10px 0;
        font-size:13px;
        color:#000
    }

    #product_list li p.product_desc {
        overflow: hidden;
        padding:0;
        line-height:16px;
    }
    #product_list li p.product_desc,
    #product_list li p.product_desc a {
        color:#666;
    }

    #product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
        display: block;
        font-weight: bold;
        margin: 5px 0;
        padding: 1px 5px;
        color: #990000;
        text-transform: uppercase
    }
    #product_list li .discount {
        display: inline-block;
        font-size: 10px;
        color: #fff;
        background: none repeat scroll 0 0 #9B0000
    }

    #product_list li .content_price {
        width: 142px;
        float: left;
    }
        #product_list li .price {
            display: block;
            padding-bottom: 15px;
            font-weight:bold;
            font-size: 16px;
            color:#990000
        }
        #product_list li span.availability {
            display:none; /* remove to show availability */
            color: #488C40
        }
    #product_list li .ajax_add_to_cart_button {
        padding-left: 20px
    }
    #product_list li .ajax_add_to_cart_button span {
        display: block;
        position: absolute;
        top: -1px;
        left: -12px;
        height: 26px;
        width: 26px;
        background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
    }
    #product_list li p.compare {padding-bottom: 0;margin-top: 10px;}

Спасибо конечно но почему то у меня выводит 3 в ряд может надо что то исправить

Цитироватьwidth: 126px; /* Ширина блока зависит от ширины центральной колонки вашей темы*/

Меньше сделай ширину.

Благодарю.

Добрый день. были по 1 товару в ряд. Сделала как написано у вас и получилось,что они друг на друга наезжают.
1. Что надо исправить,чтобы не 4,а 3 товара были в ряд.
2. Изображения почему не открываются? в шаблоне пересоздала миниатюры и поменяла размер под это количество в ряд

Что нужно менять, завист от темы. В стандарной теме prestashop 1.6 нужно поменять названия классов.
col-xs-12 col-sm-4 col-md-3
на классы большего размера.

А как сделать вариант с переключением туда и обратно grid - list

Скачайте prestashop 1.6 там есть переключатель лист-таблица.

Цитата: Adik от 25 июня 2014, 12:55:41
Что нужно менять, завист от темы. В стандарной теме prestashop 1.6 нужно поменять названия классов.

Код Выделить Развернуть

col-xs-12 col-sm-4 col-md-3
на классы большего размера.

у меня версия 1.5.6
{if isset($products)}
    <ul id="product_list" class="clearfix">
    {foreach from=$products item=product name=products}
    <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%4 == 0}last_row_item{else}item{/if}">
        <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
           <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
            {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
        </a> здесь что поменять для отображения 3х в ряд.

после того как поменяла с 1 товара на 4 в ряд пропали изображения. http://f5.s.qip.ru/TEGM1TpC.png

В prestashop 1.5 нужно шаблон переделывать и стили менять. Была такая тема. Там не получиться только класс поменять. Вверху написано как можно сделать.

Цитата: -SiGi- от 25 июня 2014, 13:45:47
Скачайте prestashop 1.6 там есть переключатель лист-таблица.

Мои сайты на этой версии пока работать не могут только 1.4.х.х

Не нужно всю тему ставить, доставточно изменить шаблон product-list.tpl и добавить стили их темы prestashop 1.6.

Всё сделала Виталий написал. Версия 1.5.6. в ряд встали 3 товара
Изображений нет.

Попробуйте перегенерировать изображения. Проверьте формат у избражений указан правильно или нет.

Изображения перегенерировала, всё равно остаётся проблема.
Если просматривать код страницы,то пути к изображениям разные. На главной странице в ИЗБРАННОМ  путь <img class="round3" src="http://savebeauty.ru/27-large_default/pomada.jpg" alt="Помада"> , а в категории <img src="http://savebeauty.ru/29-home/pomada.jpg" alt="Помада" width="130" height="160">