Modifying No. of Products per Row in Product List

[roz]

Hi!

 

i need help on changing the number of products per row on the product list. i want to have at least 6 products in a row.

 

i was able to do that by changing some values in product-list.tpl but i think i'm missing something because when i change on List view from Grid list, the layouts breaks.

 

can anyone share me the correct way how to do it? 

 

many thanks!

 

 

[roz]

this issue can probably be solved in modifying the global.js that handles the grid/list view. but i have no idea which needs to change.

 

can  someone please help? thank you!

[Sergio Ruiz]

Check topic: http://www.prestashop.com/forums/topic/316622-how-to-add-more-columns-to-product-list-on-ps-16/

[roz]

hi Sergio! thanks for the quick reply.

 

actually i already have done that part, but realized when i change to List View, the layout breaks.

 

[MarysWebLab]

hi Sergio! thanks for the quick reply.

 

actually i already have done that part, but realized when i change to List View, the layout breaks.

 

 

 

I don't know if you found the solution but I am posting it here, just in case that could be useful for you or anyone else...

 

As you said we have also to edit the global.js file.

Find this part of code (for me was at the line 169)

	if (view == 'list')
	{
		$('ul.product_list').removeClass('grid').addClass('list row');
		$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');

and replace this part

('col-xs-12 col-sm-6 col-md-4')

with your custom code from the product.tpl and you are done. Otherwise the js doesn't know which class should remove and therephore the one column class couldn't be properly added.

[MarysWebLab]

Another issue that you may have is that when someone clicks on the grid/list icons for a second time the page is again a mess.

In order to fix this we have again to replace a class in the global.js file. (For me it was at 209 line).

$('ul.product_list').removeClass('list').addClass('grid row');
		$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');

So you have also change the col-xs-12 col-sm-6 col-md-4 and replace it with your custom class there too.