[SOLVED] All product views showing products in irregular manner, not all rows have products

[peanut]

Hi

All pages with products is displaying my products in a strange manner, not all rows have products in them. Please see the screenshot to understand my problem. I can't figure why this is happening. Please help. Thank you.

[rocky]

It's because your boxes are different heights. You need to make all boxes the same height, or add a class="clear" on the first item of each row.

[peanut]

Hi Rocky,

I'm not sure where to make these changes. The following is my product list tpl code. Please help.

   {include file=$tpl_dir./pagination.tpl}
   {if $products}
       {include file=$tpl_dir./product-sort.tpl}
   {/if}



{if isset($products) AND $products}
 {assign var='liHeight' value=360}
 {assign var='nbItemsPerLine' value=4}
 {assign var='nbLi' value=$products|@count}
 {assign var='nbLines' value=$nbLi/$nbItemsPerLine|ceil}
 {assign var='ulHeight' value=$nbLines*$liHeight}
{foreach from=$products item=product name=products}
{assign var='productLink' value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}




         {if $product.on_sale}

{l s='On sale!'}
         {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product.reduction_from))}

{l s='Price lowered!'}
         {/if}

{if $product.new == 1}{l s='new'}{/if}

{$product.name|escape:htmlall:'UTF-8'|truncate:1000}


{$product.description_short|strip_tags|truncate:100:'...'}


{displayWtPrice p=$product.price}

 
 

{if ($product.quantity > 0 OR $product.allow_oosp) AND $product.customizable != 2}

            {else}
{l s='Add to cart'}
           {/if}


{/foreach}
{else}

{l s='No products'}
{/if}

[peanut]

I also get the following problem if I add quantity discounts or customization. I don't know how to make them align properly.

Screenshots shows how quantity discount is not aligned, when both discounts & customization are offered together, and when only customization is allowed. It's all appearing in the wrong place.

Please do help with this. Thanks

[rocky]

It looks like all your problems are caused by elements not being cleared of previous floated elements. You just need to add code to clear them. For example, add the following to global.css:

ul#product_list li.first_item_of_line, ul.idTabs { clear: left }

[peanut]

Thanks so much rocky! It solved my second problem however the first one, listing of products in uneven manner still persists.

[rocky]

Try setting a fixed height on ul#product_list li of the biggest height of all the boxes. That should add extra space at the bottom so all boxes are the same height.

[peanut]

There isn't any ul#product_list li apart from the one I added just now. From what I could see height is set to auto.
Perhaps you can understand better? I'm a beginner so maybe I'm doing the wrong things. Thanks Rocky

[peanut]

I'm now having another problem!!

If a product has a customization option, it no longer can be deleted, and the option of deleting or changing quantity is missing from the cart/order summary page. Screen shot attached.

[rocky]

You are using a third-party theme that I'm not familiar with. It seems that theme doesn't use ul#product_list like the default PrestaShop theme. Try the following instead:

div.products_block ul li.first_item_of_line, ul.idTabs { clear: left }

If that doesn't work, you will need to set the product name and description to fixed sizes like in the default PrestaShop theme. For some reason, your theme has them on auto instead, which is causing your problem.

[peanut]

Hi Rocky,

I tried that but it's not working. However, I think this piece of code is the trouble coz if I change clear: none to clear: left then only one product per row is shown.

/* Special style for block products in center column */

#center_column .products_block  {color: #595a5e; border: none;}
#center_column .products_block h4 a {color:#ff6600; float:left }
#center_column .products_block h3 {font-size:12px; color:black; padding:0.6em 0 0.6em 0.6em; margin:0 0 0.2em 0; width:645px; background:white; font-family:Century Gothic, Arial, Sans-Serif}
#center_column .products_block h3 span a{float:right; background:url('../img/plus-detail.gif') left no-repeat; padding-left:1.2em; font-size:10px; text-transform:uppercase; margin-right:0.8em; color:#c74815; font-family:'Lucida Grande',Arial,sans-serif;}
#center_column .products_block  span{ color: #999; line-height:20px}
#center_column .products_block  p a {color:#666; font-weight:normal; font-size:11px}
#center_column .products_block  .pprice {color:black; padding:0.2em;}
#center_column .products_block  .price_span {color:black; font-weight:bold; padding:0.5em 0;}
#center_column .products_block  .nav { float:right;}
#center_column .products_block  b { padding:0.1em 0.7em 0 0.7em}
#center_column .products_block  .view_it { background:url('../img/view_it.gif') no-repeat; width:17px; height:15px;}
#center_column .products_block  .add_it { background:url('../img/add_it.gif') no-repeat; width:17px; height:15px}
#center_column .products_block ul li {float: left; clear: none; width:138px; margin:0.5em 1em 0.8em 0; background:white; padding:1em;}
#center_column .products_block .new  {background:#98cb00; padding:0 0.3em 0 0.3em; position:absolute; text-align:center}
#center_column .products_block .new span  {color:white;}
#center_column .products_block .on_sale  {background:#E34514; padding:0 0.3em 0 0.3em; position:absolute; margin-top:2.7em; text-align:center}
#center_column .products_block .on_sale span  {color:white;}

I'm using the 'Element' theme.

[rocky]

Try:

#center_column .products_block li.first_item_of_line, ul.idTabs { clear: left }

[peanut]

no still won't work :-(

[peanut]

I think the below code (part of my product list tpl code listed above) calculates how much the height should be for the boxes, I'm not sure. Perhaps thats where my problem lies.

{if isset($products) AND $products}
 {assign var='liHeight' value=360}
 {assign var='nbItemsPerLine' value=4}
 {assign var='nbLi' value=$products|@count}
 {assign var='nbLines' value=$nbLi/$nbItemsPerLine|ceil}
 {assign var='ulHeight' value=$nbLines*$liHeight}
{foreach from=$products item=product name=products}
{assign var='productLink' value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}

[peanut]

Hi

This was resolved here: http://www.prestashop.com/forums/viewthread/76946/#328004

Thank you