Автор Тема: как товары поставить в 3 столбца, а не в строчку?  (Прочитано 2459 раз)

24 Апрель 2012, 19:33:15
  • Новичок
  • *
  • Сообщений: 1
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Подскажите, как товары в категориях выставить в столбцы 3-4 , а не в строчку, как в стандартном шаблоне?
24 Апрель 2012, 20:44:00
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 33325
  • Репутация: +26771/-0
    • Просмотр профиля
Поставить модуль Grid or List
Или изменить стили для product-list.tpl.
Или сделать новый шаблон product-grid.tpl.
22 Февраль 2014, 11:48:11
Ответ #2
  • Новичок
  • *
  • Сообщений: 3
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Поставить модуль Grid or List
Или изменить стили для product-list.tpl.
Или сделать новый шаблон product-grid.tpl.
Grid or List для 1.5 не найти.
Ни одного нормального ответа по этой теме.
Товар выводится по 4 столбца, но после увеличения размеров изображений товары вылезают сильно в сторону (дизайн поехал).
Задача оставить 2 товара в сроке.
Замена 4 на 2 ничего не дала. <li class="ajax_block_product {if $i==1}grid_3 alpha{elseif $i==4}{$i=0}grid_3 omega{else}item grid_3{/if} clearfix">ничего не дала.
Может хоть один даст нормальный ответ? Пошагово расписать что к чему ведь можно, или это гуру секрет? Блин каждую из этих тем просмотрели почти по две тысячи раз. Чтож такие крутые программисты не могут заморочиться и разок написать как это делается? Задолбали умники отсылающие править product_list при этом не разъясняя что делать?
{if isset($products)}
<!-- Products list -->
<ul id="product_list">
{$i = 1}
{foreach from=$products item=product name=products}
<li class="ajax_block_product {if $i==1}grid_3 alpha{elseif $i==4}{$i=0}grid_3 omega{else}item grid_3{/if} clearfix">
<div class="center_block">
<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_leowine')}" 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"><span>{l s='New'}</span></span>{/if}
</a>
<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:30:'...'}</a></h3>
<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:210:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:70:'...'}</a></p>
</div>
<div class="right_block">
{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>{/if}
{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<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}
</div>

{/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&amp;id_product={$product.id_product|intval}&amp;token={$static_token}", false)}" 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&amp;id_product={$product.id_product|intval}", false)} 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}
<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
</div>
<div class="left_block">
{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>
{$i=$i+1}
{/foreach}
</ul>
<!-- /Products list -->
{/if}
22 Февраль 2014, 14:27:38
Ответ #3
  • Новичок
  • *
  • Сообщений: 15
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
coder, тут много не программистов и все, что люди могут сделать, это скопировать и вставить код. Может напишите по шагам, что и где исправлять. И еще, такую тему хорошо бы прикрепить вверху ветки, а то по форуму искать тяжело.
22 Февраль 2014, 19:53:07
Ответ #4
  • Ветеран
  • *****
  • Сообщений: 105673
  • Репутация: +39553/-0
    • Просмотр профиля
    • Webstudio UwK
Cоздание интернет сайтов Webstudio UwK
28 Февраль 2014, 07:18:08
Ответ #5
  • Новичок
  • *
  • Сообщений: 3
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Задолбали умники которым все объяснили, в они все равно не знают что делать.
Разжевали, осталось только проглотить. Не можешь понять, ставь модуль.
Разжевали? Это во втором посте что ли?

А тем кто ищет нормальные ответы вот ссылка http://nemops.com/grid-display-prestashop-1-5/
Текст правда на английском, но зато хоть как то объясняют что к чему.
28 Февраль 2014, 14:26:34
Ответ #6
  • Ветеран
  • *****
  • Сообщений: 16670
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Для prestashop 1.5
Как сделать табличный вывод товаров.
А зачем давать ссылку на английском, если выше есть на русском?
Там же на русском тоже самое написано?
28 Февраль 2014, 15:02:31
Ответ #7
  • Новичок
  • *
  • Сообщений: 3
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Всё - разобрался!

Оказалось всё довольно просто.
В общем стоит преста 1.5.6 и шаблон от LeoTheme. Из предыдущих постов ясно, что товары выводились в 4 столбца, а требовался вывод в 2 столбца.
Поиск, в том числе и на этом форуме ничего не дал. Изучение кода выявило такую вот штуку:
В файле product_list.tpl есть строка<li class="ajax_block_product {if $i==1}grid_3 alpha{elseif $i==4}{$i=0}grid_3 omega{else}item grid_3{/if} clearfix"> так вот этот самый grid_3 описан в файле /themes/xxx/css/grid_prestashop.css /*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.
*/

/*
Variable Grid System (Fluid Version).
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/

Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
width: 960px;
margin: 0 auto;

}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 1%;
margin-right: 1%;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .grid_1 {
width:6.333%;
}

.container_12 .grid_2 {
width:14.667%;
}

.container_12 .grid_3 {
width:23.0%;
}

.container_12 .grid_4 {
width:31.333%;
}

.container_12 .grid_5 {
width:39.667%;
}

.container_12 .grid_6 {
width:48.0%;
}

.container_12 .grid_7 {
width:56.333%;
}

.container_12 .grid_8 {
width:64.667%;
}

.container_12 .grid_9 {
width:73.0%;
}

.container_12 .grid_10 {
width:81.333%;
}

.container_12 .grid_11 {
width:89.667%;
}

.container_12 .grid_12 {
width:98.0%;
}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .prefix_1 {
padding-left:8.333%;
}

.container_12 .prefix_2 {
padding-left:16.667%;
}

.container_12 .prefix_3 {
padding-left:25.0%;
}

.container_12 .prefix_4 {
padding-left:33.333%;
}

.container_12 .prefix_5 {
padding-left:41.667%;
}

.container_12 .prefix_6 {
padding-left:50.0%;
}

.container_12 .prefix_7 {
padding-left:58.333%;
}

.container_12 .prefix_8 {
padding-left:66.667%;
}

.container_12 .prefix_9 {
padding-left:75.0%;
}

.container_12 .prefix_10 {
padding-left:83.333%;
}

.container_12 .prefix_11 {
padding-left:91.667%;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .suffix_1 {
padding-right:8.333%;
}

.container_12 .suffix_2 {
padding-right:16.667%;
}

.container_12 .suffix_3 {
padding-right:25.0%;
}

.container_12 .suffix_4 {
padding-right:33.333%;
}

.container_12 .suffix_5 {
padding-right:41.667%;
}

.container_12 .suffix_6 {
padding-right:50.0%;
}

.container_12 .suffix_7 {
padding-right:58.333%;
}

.container_12 .suffix_8 {
padding-right:66.667%;
}

.container_12 .suffix_9 {
padding-right:75.0%;
}

.container_12 .suffix_10 {
padding-right:83.333%;
}

.container_12 .suffix_11 {
padding-right:91.667%;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .push_1 {
left:8.333%;
}

.container_12 .push_2 {
left:16.667%;
}

.container_12 .push_3 {
left:25.0%;
}

.container_12 .push_4 {
left:33.333%;
}

.container_12 .push_5 {
left:41.667%;
}

.container_12 .push_6 {
left:50.0%;
}

.container_12 .push_7 {
left:58.333%;
}

.container_12 .push_8 {
left:66.667%;
}

.container_12 .push_9 {
left:75.0%;
}

.container_12 .push_10 {
left:83.333%;
}

.container_12 .push_11 {
left:91.667%;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .pull_1 {
left:-8.333%;
}

.container_12 .pull_2 {
left:-16.667%;
}

.container_12 .pull_3 {
left:-25.0%;
}

.container_12 .pull_4 {
left:-33.333%;
}

.container_12 .pull_5 {
left:-41.667%;
}

.container_12 .pull_6 {
left:-50.0%;
}

.container_12 .pull_7 {
left:-58.333%;
}

.container_12 .pull_8 {
left:-66.667%;
}

.container_12 .pull_9 {
left:-75.0%;
}

.container_12 .pull_10 {
left:-83.333%;
}

.container_12 .pull_11 {
left:-91.667%;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}
Видно, что помимо grid_3 там также описаны и grid_4, grid_5 и так далее.
Решение оказалось весьма простым - просто меняем в файле product_list.tpl текст grid_3  на то, что вам нужно. У меня вышло так<li class="ajax_block_product {if $i==1}grid_5 alpha{elseif $i==4}{$i=0}grid_5 omega{else}item grid_5{/if} clearfix">Всё товары в два столбца, что и требовалось. Каких либо косяков пока не заметил.

Всем удачи!
28 Февраль 2014, 15:41:53
Ответ #8
  • Администратор
  • Ветеран
  • *****
  • Сообщений: 102503
  • Репутация: +34219/-0
    • Просмотр профиля
Название темы - Как товары поставить в 3 столбца, а не в строчку?
Правила форума:
Цитировать
Тема должна хорошо описывать суть проблемы. Заголовок темы должен нести в себя четкое описание проблемы. Избегайте не нужного цитирования сообщений, ссылок на другие сайты (не соотвествующие тематики сообщения).
Запрещается ненормативная лексика, ругань, оскорбления в любой форме.
28 Февраль 2014, 19:10:48
Ответ #9
  • Ветеран
  • *****
  • Сообщений: 1285
  • Репутация: +13/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Для prestashop 1.5
Как сделать табличный вывод товаров.
А зачем давать ссылку на английском, если выше есть на русском?
Там же на русском тоже самое написано?
Это совсем разные случаи. Там описано как изменить стандарный шаблон и сделать табличный показ товаров.
Такой способ не нужен для шаблонов от LeoTheme. В них уже есть переключалка вывода таблицей или листом.

01 Март 2014, 18:31:59
Ответ #10
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86688
  • Репутация: +25428/-0
  • Сообщество PrestaShop
    • Просмотр профиля
tigran, думаю, что тему нужно закрыть. Путаница возникла из-за того, что в одной теме обсуждали разные вопросы.

Автор nadick искал ответ на вопрос, как товары поставить в 3 столбца, а не в строчку?
Ответ полный и развернутый написал Виталий.

Вопрос автора super3ton вообще не относиться к этой теме.
Ему нужно только изменить 4 столбца на 2, да и притом к нестандарной теме.
Т.е. это частный случай и его нужно было отделить от этой темы.