[Solved] How to change the number of products listed in each row

auther · March 8, 2014

Hi,

I use a custom theme on PS 1.5.4.1

I currently have 3 products displayed in each row on Product, Search page etc...

I would prefer to display 4 to 5 products in each row.

Could someone please help with the following:

1. Steps to change the number of products listed in each row

2. Subsequent setting for image size that needs to be change

3. Settings required to display the product name in 2 line (to accommodate the reduced space)

Site: www.grocery30.com

Solution: Courtesy Vekia

For 4 Products in a row:

Step 1: In the file themes/theme758/product-list.tpl change the value to 4 in the following line

{assign var='nbItemsPerLine' value=3}

Step 2: In the file themes/theme758/css/global.css add the following code:

#product_list li.span3 {

width:195px;
}

Step 3: In the admin panel Preferences - Images,

change the width & height of home_default to 193 and then regenerate thumbnails

and voila... we now have 4 products in a row

Edited March 13, 2014 by auther (see edit history)

Carolina Custom Designs · March 8, 2014

Did you mean to post here?

Marty Shue

vekia · March 8, 2014

I currently have 3 products displayed in each row on Product

you mean product page? or categories page?

auther · March 9, 2014

you mean product page? or categories page?

Hello Vekia,

In Categories page: http://grocery30.com/155-fruit-spreads

In Search results page: http://grocery30.com/search?controller=search&orderby=position&orderway=desc&search_query=jam

vekia · March 9, 2014

due to the fact that this is non-default theme, please show contents of product-list.tpl file

(it's necessary to modify this file probably)

auther · March 10, 2014

due to the fact that this is non-default theme, please show contents of product-list.tpl file

(it's necessary to modify this file probably)

Hello Vekia,

Following are the contents of the file [themes/theme758/product-list.tpl]

-----------------------------------------------------

{if isset($products)}

{assign var='nbItemsPerLine' value=3}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{foreach from=$products item=product name=products}

{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<li class="ajax_block_product span3 num-{$smarty.foreach.products.iteration}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} omega{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} alpha{/if} {if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)}last_line{/if}">

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />

</a>

{if isset($product.new) && $product.new == 1}<span class="new title_shop">{l s='New'}!</span>{/if}

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}

<span class="availability title_shop">{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.online_only) && $product.online_only}<span class="online_only title_shop">{l s='Online only'}</span>{/if}

{/if}

</div>

<h5><a class="product_link" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h5>

<p class="product_desc">{$product.description_short|strip_tags:'UTF-8'|truncate:450:'...'}</p>

<p class="product_desc mob">{$product.description_short|strip_tags:'UTF-8'|truncate:90:'...'}</p>

<p class="product_desc mob2">{$product.description_short|strip_tags:'UTF-8'|truncate:180:'...'}</p>

</div>

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale title_shop">{l s='On sale!'}</span>

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount title_shop">{l s='Reduced price!'}</span>{/if}

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}

<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{/if}

{*Thuy them o day*}

{if $product.specific_prices AND !$PS_CATALOG_MODE}<span class="price-old">{displayWtPrice p=$product.price_without_reduction}</span>{/if}

{/if}

{if isset($comparator_max_item) && $comparator_max_item && !isset($instant_search)}

<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}

{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="ajax_add_to_cart_button exclusive btn_add_cart" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}">

</a>

{else}

<a class="ajax_add_to_cart_button exclusive btn_add_cart" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", false)} title="{l s='Add to cart'}">

</a>

{/if}

{else}

{/if}

</div>

</li>

{/foreach}

(function($) {

$(function() {

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name) {

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++) {

var c = ca;

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function eraseCookie(name) {

createCookie(name,"",-1);

}

$('ul.product_view').each(function(i) {

var cookie = readCookie('tabCookie'+i);

if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current')

.parents('#center_column').find('#product_list').addClass('list').removeClass('grid').eq(cookie).addClass('grid').removeClass('list');

})

$('ul.product_view').delegate('li:not(.current)', 'click', function(i) {

$(this).addClass('current').siblings().removeClass('current')

.parents('#center_column').find('#product_list').removeClass('grid').addClass('list').eq($(this).index()).addClass('grid').removeClass('list')

var cookie = readCookie('tabCookie'+i);

if (cookie) $(this).find('#product_list').eq(cookie).removeClass('grid').addClass('list').siblings().removeClass('list')

var ulIndex = $('ul.product_view').index($(this).parents('ul.product_view'));

eraseCookie('tabCookie'+ulIndex);

createCookie('tabCookie'+ulIndex, $(this).index(), 365);

})

})(jQuery)

</script>

</ul>

{/if}

vekia · March 10, 2014

as i thought it's probably necessary to modify it:

 {assign var='nbItemsPerLine' value=3}

change value=3 to 4 or 5

will see what's goin on then

auther · March 10, 2014

as i thought it's probably necessary to modify it:
 {assign var='nbItemsPerLine' value=3}
change value=3 to 4 or 5

will see what's goin on then

I changed it to 5, It then puts 3 in one line and two in the next line and follows the same pattern.

So, i guess, now we only need to reduce the size of the image ? [guessing..]

test site for preview: http://sussta.com/43-jams-spreads

Edited March 10, 2014 by auther (see edit history)

vekia · March 10, 2014

now in file: http://sussta.com/themes/theme758/css/bootstrap-responsive.css

@media (min-width: 1200px)
.span3 {
width: 270px;
}

decrease width param to fit to your products per row number

width 195:

auther · March 10, 2014

now in file: http://sussta.com/themes/theme758/css/bootstrap-responsive.css
@media (min-width: 1200px)
.span3 {
width: 270px;
}
decrease width param to fit to your products per row number

width 195:

Awesome Vekia... That did it...

I increased the number of characters for Product.Name to 50 as well...

So do i now need to change the width & height of home_default under Preferences-Images ?

Should i set it as 195 px for both and then re-generate thumbnails ?

---------------------------

It appears that the page has shifted slightly to the left, and the width of the left column (categories) has reduced. Also on the right it is mis-aligned...

Edited March 10, 2014 by auther (see edit history)

vekia · March 10, 2014

use 193, because there is 1pix border

auther · March 10, 2014

use 193, because there is 1pix border

Did it and the products appear fine, but the following issue has appeared, please help

"It appears that the page has shifted slightly to the left, and the width of the left column (categories) has reduced. Also on the right it is mis-aligned..."

vekia · March 10, 2014

you changed something more in css?

auther · March 11, 2014

you changed something more in css?

Nope,

for .span3, i first tried 162 to check for 5 products in a row, since it dint look well i changed it to the 195 as per your recommendation for 4.

Notice how even the Home Page (www.sussta.com) seems to be misaligned

Am wondering if span3 is referenced for more than just the products

Regards,

Asif

auther · March 13, 2014

you changed something more in css?

Any suggestions on how to fix the alignment issue?

If it is set to 270 it aligns properly

Edited March 13, 2014 by auther (see edit history)

vekia · March 13, 2014

it's easy to fix, paste somewhere in global.css this code:

#product_list li.span3 {
    width:195px;
   }

effect:

auther · March 13, 2014

it's easy to fix, paste somewhere in global.css this code:
#product_list li.span3 {
    width:195px;
   }
effect:

Hello Vekia,

I made the changes to the following file: [http://sussta.com/themes/theme758/css/global.css]

themes/theme758/css/global.css

Emptied all cookies, Force Compile, but still doesn't seem to be resolved...

It clearly looks fine in the image attached by you... I must be doing something wrong...

vekia · March 13, 2014

you still use old code?

don't use it:

@media (min-width: 1200px)
.span3 {
width: 195px;
}

auther · March 13, 2014

you still use old code?

don't use it:
@media (min-width: 1200px)
.span3 {
width: 195px;
}

Awesome... That did it... I will update the solution and mark this thread as solved...

You are a Hero for starters like me !!!... Thank you...

auther · March 13, 2014

Hello Vekia,

There seems to be an issue with the instant search results, where products overlap each other.

If the user immediately presses Enter after typing the search keyword, there is no issue. The issue is only when the search results display while the user is still typing.

Everything else works fine.

Your inputs please.

vekia · March 13, 2014

your website uses different styles for instant search results.

in global css, before code you pasted before, use also this:

.instant_search #product_list li {
    width:100%!important;
   }

auther · March 13, 2014

your website uses different styles for instant search results.

in global css, before code you pasted before, use also this:
.instant_search #product_list li {
    width:100%!important;
   }

issue resolved

Cheers!!!

Edited March 13, 2014 by auther (see edit history)

vekia · March 13, 2014

issue resolved 
Cheers!!!

finally !

if you will need any additional assistance, feel free to write (remember to quote my posts - then i will be notified that you posted message)

isro · April 3, 2014

Hello,

I have the same problem in my ecommerce. Ive the template warehouse.

Im tried to change product-list.tpl, the line var='nbItemsPerLine' but i get nothing.

I would like to have only three products by row (default four).

The example url is: http://test.algounico.com/4-anillos

Thank you!

Isro

Edited April 3, 2014 by isro (see edit history)

shrinidhim · September 23, 2014

can anyone help me with same issue in 1.6.x ?

Wise · March 22, 2015

finally !

if you will need any additional assistance, feel free to write (remember to quote my posts - then i will be notified that you posted message)

Vekia, could you help me please do the same with alysum 2.9 theme. Here is my product-list.tpl. I can't see nbItemsPerLine parameter here:

{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="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<p class="compare">
<input type="checkbox" class="checkbox 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>
<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_alysum')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}"  />
<span class="subimage-container pid_{$product.id_product}"></span>
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a>
<div class="product-info">
<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>
<div class="product_desc">{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</div> 
</div> 
<div class="right_block"> 
{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">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{if $product.specific_prices}<span class="display-reduction">{if $product.specific_prices.reduction_type == "percentage"}-{$product.specific_prices.reduction*100}%{elseif $product.specific_prices.reduction_type == "amount"}-{convertPrice price=$product.specific_prices.reduction}{/if}</span><span class="old-price">{convertPrice price=$product.price_without_reduction}</span>{/if}{/if} 
</div>
{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}", 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=1&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
{/if} 
{else}
<a class="button exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Details'}">{l s='View'}</a><br />
{/if}
{elseif ($product.id_product_attribute != 0)}
<a class="button exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Details'}">{l s='View'}</a><br/><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>{/if}
{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
{/if}
</div>
</div>
</li>
{/foreach}
</ul>
<script type="text/javascript">
$(document).ready(function(){
 $.ajax({
   type: 'POST',
   url: baseDir+'modules/themesettings/ajax.php',
   data: 'id={foreach from=$products item=p name=prd}{$p['id_product']}{if $smarty.foreach.prd.last}{else},{/if}{/foreach}&lang_id={$cookie->id_lang}',
   success: function(result){
     if (result == '0')
     {
       console.log('no data')
     } else {                          
       var pData = JSON.parse ( result );
       $.each(pData, function (id) {
        $(".pid_"+id).append("<img src='"+pData[id]+"' alt='' />");
        $(".pid_"+id).parent().addClass("hasSubImage");
       });        
     }
   }
 });
});
</script>
<!-- /Products list -->
{/if}

Anaa · October 15, 2015

HI Auther,

May I know is your products (on category page) List View working normally after those changes? Mine mess!!! see screen shot? Any idea? Any solution?

If click on list view mess --then click back on Grid view 3 products show in a 1 row ....

Regards

Anaa

[Solved] How to change the number of products listed in each row

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites