v.1.3 Trzy kolumny na stronie z listą produktów

[Shem]

Witam,

 

Niby prosta sprawa, ale nie wychodzi. Chciałbym mieć na stronie "product_list" zamiast produktów w wierszach to w trzech kolumnach.

 

 

Udało mi się zrobić 3 kolumny tagiem "column-count:3" w global.css, ale wyświetlają mi się jedna pod drugą zamiast obok siebie. Dałem tag "float:left" w punkcie css-a odpowiadającego za wyglad listy "ul" w pliku "product_list.tpl".

 

Moze ktoś wie gdzie i jak to ustawić, żeby wyświetlało jak chcę? Szukałem w necie ale nie znalazłem rozwiązania.

 

Z góry dziękuję.

[scholl]

Będziesz musiał dopracować wygląd ale zrób tak:

 

CSS

 

/* product-list.tpl */
ul#product_list { margin-top: 2em; list-style-type: none }
ul#product_list li {
background: #FFF;
padding: 4px;
height:220px;
clear:both;
margin-bottom:0.3em;
float: left;
width: 29%;
height: 255px;
margin-right: 8px;
clear: none;
margin-left:4px;
margin-top:2px
}
}
* html ul#product_list li {
height: auto !important;
height: 130px
}
ul#product_list li a {
text-decoration: none;
color: #000
}
ul#product_list a.product_img_link {
border: solid 1px #d0d3d8;
float:left;
margin-right:0.6em;
margin-left:15px;
margin-top:30px
}
ul#product_list a.product_img_link img { vertical-align: bottom }
ul#product_list li h3{ margin:0.4em 0; width:160px;padding-bottom:2px;height:10px; text-align: center}
ul#product_list li .new {
background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border:1px solid #488C40;
color:white;
font-size:0.6em;
font-weight:bold;
margin:0pt 1em 0pt 0pt;
padding:0pt 0.4em;
text-transform:;
vertical-align:0.3em
}
ul#product_list li p.product_desc {
margin-bottom: 0;
font-size: 0.92em
}
ul#product_list li div.center_block {
float: left;
width: 100%
}
ul#product_list li div.right_block {
float:left;
text-align:center;
margin-left:2em;
margin-top:0.5em;
display:inline
}
ul#product_list li .discount {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .on_sale {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em
}
ul#product_list li .price {
display: block;
font-size: 170%;
margin-bottom: 0.3em
}
ul#product_list li span.availability {
color: #488c40;
font-size: 0.9em
}

ul#product_list li span.notavailable {
 color: red;
 font-size: 0.9em
 }
ul#product_list li a.button { margin-top: 0.5em }

 

product-list.tpl

 

{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear">
{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.index % 2}alternate_item{else}item{/if} clearfix">
  <div class="center_block">
   <h3>{if $product.new == 1}<span class="new">{l s='new'}</span>{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:100:'...'}</a></h3>
   <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'}" /></a>
  </div>
  <div class="right_block">
   {if $product.on_sale}
 <span class="on_sale">{l s='On sale!'}</span>
   {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $product.reduction_from))}
 <span class="discount">{l s='Price lowered!'}</span>
   {/if}
   <div>
 <span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />
 <span class="availability">{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}</span>{else}<span class="notavailable">{l s='Out of stock'}{/if}</span>
   </div>
<!--    {if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
 <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$base_dir}cart.php?add&id_product={$product.id_product|intval}&token={$static_token}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
   {else}
  <span class="exclusive">{l s='Add to cart'}</span>
   {/if} -->
   <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
  </div>
 </li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}