Jump to content

Recommended Posts

Помогите уже замаялся как сделать 3 и больше колонок товара. Как тут http://nanevskom.com/catalog/group=1 или тут http://samovary.su/. Перепробывал разные методы нечего не помогло(.

пробывал так нечего не работает или я чего-то не то делаю

Лезем в шаблон products.tpl

Меняем блок от :
{if $products}
<!-- Список товаров /-->
до :
<!-- Список товаров #End /-->
{else}
Товары не найдены
{/if}

Код зависим от верстки сайта Вашего, так что покажу на пальцах:

{section name=lots loop=$products/3 step=3}
$item=$smarty.section.foo.index;

<!-- Выводим данные о $products[$item] /-->
<!-- Выводим данные о $products[$item + 1] /-->
<!-- Выводим данные о $products[$item + 2] /-->
{/section}

$item=$item+3;

<!-- Выводим огрызки -->
{section name=last_lots loop=$products%3 start=$item}
<!-- Выводим данные о $products[last_lots] /-->
{/section}

<!-- Добиваем пустые блоки, если требуется /-->
{if $products%3 == 2}
<!-- Добить один пустой блок /-->
{elseif $products%3 == 1}
<!-- Добавить два пустых блока /-->
{/if}


и так пробывал в catalog.tpl нужно указать количество столбцов, найдите строчку {if $smarty.foreach.products.iteration%2 == 0} и вместо 2 укажите нужное число столбцов.

покажите пожалуйста если не трудно пример на основе default темы.

Link to post
Share on other sites

Именно, при блочной верстке:

{foreach name=products item=product from=$products}
<div style="float:left;width:***;overflow:hidden;">Содержание элемента строки</div>
{if $smarty.foreach.products.iteration%3 == 0}
<div style="clear:both;"><!-- /--></div>
{/foreach}

Т.е. закидываем все товары подряд, и через три вставляем пустой блок, не обтекаемый ни с одной стороны - так организуем переход на следующую строку.

Как верно говорит Косяк, ширина блоков должна быть соответствующая. И должен быть выставлен "overflow:hidden", чтобы содержание не распирало блоки больше нужного размера.

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

Минус верстки блоками в 3 столбца тоже есть. Если ширины их содержащего элемента слегка не достаточно (к примеру монитор старенький или окно браузера маленькое), очевидным образом один блок из трех уедет на следующую строку. И будет у вас

[товар][товар]
[товар]
[товар][товар]
[товар]
[товар][товар]
[товар]

Что на мой взгляд немного коряво.
Можно избавиться: выставив блокам одинаковую высоту и удалив <div style="clear:both;"><!-- /--></div>
Но ограничивать высоту блоков - плохая идея.

При верстке в 2 столбца, конечно блоки красиво становятся в один столбец :)

Link to post
Share on other sites

Несерьезно...

В style.css

.product_block {
float:left;
width:200px; <---- Вот тут ширина блока товара, уменьшаем ее !
overflow:hidden;
margin-bottom:16px;
}

В цикле в catalog.tpl и/или products.tpl в районе 95 строки:

<!-- Товар #End /-->
{if $smarty.foreach.products.iteration%3 == 0} <---- двоечку поменяли на троечку
<div class="clear"><!-- /--></div>

Link to post
Share on other sites
  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...