[Solved] How to change Product list to Grid

[bruce-rez]

Hi,

I use Prestashop 1.5.4.1.

I want to change my product list to grid view.

I've already tried the tutorial from nemo (http://nemops.comgrprestashop-1-5/) and it's not working for me because it's about the layout with 2 columns, in my case I have 3 columns.

Any help or guidance would be appreciated.

Edited May 22, 2013 by bruce-rez (see edit history)

[vekia]

hey this tut is very good, what you have to do is to change the css parameters for separate product.

If your website is online - the url will be really helpfull for us

[bruce-rez]

vekia,

I know this is a good tutorial but as I mentioned my website layout is set to 3 columns (i need 3 columns) and the tutorial is for 2 columns.

 

Thank you

Edited June 19, 2013 by bruce-rez (see edit history)

[vekia]

hey

 

follow all steps there, upload new product-list.tpl file to your theme directory (don't forget about backup!)

 

and then:

 

Notice the “{if $smarty.foreach.products.iteration%4 == 0}last_row_item” part of the code. If you want to change the number of items displayed, change the 4 to something else. Of course, you’ll then need to change the css accordingly.

 

 

change the 4 to 3 - should fit to your design, if not - change it to 2

[SmartDataSoft]

hello,,

 

you can change the css to do this.

 

#product_list li {

 

 

border: 1px solid #EEEEEE;

border-radius: 3px 3px 3px 3px;

float: left;

height: 150px;

margin-bottom: 14px;

padding: 12px 8px;

width: 150px;

}

 

and it will show you grid on your site inform me if it solved

[vekia]

but if he will have 4 products in row css styles will not help - because product list will look weirdy (thin block with huge overlaping image)

 

the most important thing is to decrease the number of products in row - then edit the css

 

that's only my opinion

[SmartDataSoft]

if you do this css like this it will solve your issue.

#product_list li {
border: 1px solid #EEEEEE;
border-radius: 3px 3px 3px 3px;
float: left;
height: 222px;
margin-bottom: 14px;
padding: 12px 8px;
width: 160px;
}
#product_list li .left_block {
display: block;

}

#product_list li .center_block {
border-right: 1px dotted #CCCCCC;

padding: 0 7px;

}
#product_list li .right_block {
clear: both;

position: relative;
text-align: right;
width: 100%;
}
#product_list li .content_price {
float: left;
margin: 26px 0 15px;
}
#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
color: #990000;
display: block;
font-weight: bold;
margin-right: 10px;
text-transform: uppercase;
}

 

i have see live by fire bug here is the image after edit the css, let me inform if that solve your issue.

[bruce-rez]

vekia,

hey

 

follow all steps there, upload new product-list.tpl file to your theme directory (don't forget about backup!)

 

and then:

 

 

 

 

change the 4 to 3 - should fit to your design, if not - change it to 2

vekia,

As you mentioned I changed %4 to %3 in the codes to get 3 products per row but other blocks like "View", "Description","Compare", etc were messed up.

 

smartdatasoft,

I replaced my product_list.css by your codes but for some unknown reasons I do not get the 3 products per row, it's still shows the product in list.

Edited June 19, 2013 by bruce-rez (see edit history)

[bruce-rez]

vekia,

hey

 

follow all steps there, upload new product-list.tpl file to your theme directory (don't forget about backup!)

 

and then:

 

 

 

 

change the 4 to 3 - should fit to your design, if not - change it to 2

vekia,

As you mentioned I changed %4 to %3 in the codes to get 3 products per row but other blocks like "View", "Description","Compare", etc were messed up.

 

smartdatasoft,

I replaced my product_list.css by your codes but for some unknown reasons I do not get the 3 products per row, it's still shows the product in list.

Edited June 19, 2013 by bruce-rez (see edit history)

[vekia]

vekia...

 

add to #product_list li display:inline-block;

(product-list.css file in your theme directory)

 

#product_list li {
display: inline-block;
}

 

 

i've noticed that you use CCC to minify css / js files. In this case - remember to turn force compilation on. It is necessary when you changing tpl files or css / js with CCC option turned to on.

 

waiting for your reply

 

regards

[bruce-rez]

vekia,

I am setting this option as you mentioned when I change/mnodify any tpl or css files.

[bruce-rez]

vekia,

I inserted the code

#product_list li {

display: inline-block;

}

but I get this 2 or 3 products per row (I want to set correctly 3 products per row and centered equally), it's not consistent and some product titles are moved incorrectly.

 

Thank you

Edited June 19, 2013 by bruce-rez (see edit history)

[vekia]

You have to add additional styles to <h3> block:

 

#product_list li h3 {
padding: 0 0 10px 0;
font-size: 13px;
color: #000;
display: block;
clear: both;
max-width: 140px;
text-align: center;
}

 

you can personalize design of the list by editing css styles

[bruce-rez]

vekia,

I used and mixed your codes with some of mine, It looks much better, actually It works.

I have an issue that I have to fix, This is about the Tablecloth products. Some of them are not aligned correctly horizontally.

The issue starts from third row from top. I think personally this is because of the long length of some products Name.

Do you have any idea how we can use the Line Break {(br /)} in product name to resolve this miss alignment?

 

 

Tested with FireFox 20 Mac version.

 

Thank you

Edited June 19, 2013 by bruce-rez (see edit history)

[SmartDataSoft]

hello, bruce-rez

 

if you write this code it will solve your product name one line , two line problem which break the layout . i just check with fire bug. and it work.

#product_list li .center_block {
   height: 234px;
}

[vekia]

hello

 

it's because name of the product is much longer than other names:

 

so h3 height values are different for each product (one has got 20px other 40px)

 

just add height param with clear:both;

 

#product_list li h3 {

height:40px;

clear:both;

}

[bruce-rez]

vekia, smartdatasoft

That fixed the problem.

Thank you both of you.

[vekia]

thanks for information that you solved it, if you've got any other questions realted to this case - feel free to continue discussion here

 

regards

[cjrent]

Thank you for this information. I seem to be having a little trouble with it and was hoping someone could double check what I did? I'm hoping a fresh pair of eyes can tell me where I went wrong. The site I am using to test on is: http://boojh.x10host...roller=category

 

You can see where things look a bit wonky here and towards the bottom the

Sort by and Show X Products per page are not sitting on the page properly.

 

I've attached the product_list.css as well. Any insight would be greatly appreciated.

 

Thanks.

 

product_list.css

[vekia]

and what about this:

 

 

?

 

it also looks weirdy

[cjrent]

Vekia - I know, I'm not sure how that happened.

 

I've been trying to figure it out but my brain has gone to mush.

 

I'm using Prestashop 1.5.4.1 and using the default template (Which I made a copy of).

[vekia]

okay so im going to check it

im conviced that this is related to the css + maybe some .tpl changes

 

i will let you know here if i will find solution

[cjrent]

thank you vekia, that's really very nice of you.

[vekia]

remove the height: 234px; from:

http://boojh.x10host.com/ps/themes/cjrtheme/css/product_list.css

#product_list li .center_block {
border-right: 1px dotted #CCCCCC;
padding: 0 7px;
height: 234px;
}

 

+

 

top:0px; to top:-180px; in

#product_list li .discount {
position: absolute;
top: -180px;
right: 0;
display: inline-block;
font-weight: bold;
padding: 1px 5px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
background: none repeat scroll 0 0 #9B0000;
}

 

+

 

remove the:

float: left;

margin: 26px 0 15px;

from:

#product_list li .content_price {
float: left;
margin: 26px 0 15px;
clear: both;
}

[cjrent]

oh wow, you are a star. that look so much better. thank you so much.

[cjrent]

how are you able to figure this out? is there some sort of program you are using?

[vekia]

browser only and chrome dev console: ctrl+shif+J / or F12

[cjrent]

thank you. i will try that. i was told to only use notepad++ so visualization is difficult for me. and i find i need that.

[ploaie]

Quick and dirty solution for changing default view from list to grid prestashop:

 

{if $smarty.get.product_mode == 'list'} became {if $smarty.get.product_mode == 'grid'}

and

{if $smarty.get.product_mode == 'grid'} became {if $smarty.get.product_mode == 'list'}

 

The code is in product-list.tpl

 

Be sure you are renaming the picture list/grid  too.

Mine are located in themes/blabla/img/list.png and themes/blabla/img/grid.png

 

Prestashop version: 1.5.4.1

Edited April 8, 2014 by ploaie (see edit history)

[yourshop]

Sir, when I click on view product details, the product details page not opening, my site name is - www.pandoras.in Pls help me.

Edited April 27, 2014 by yourshop (see edit history)

[vekia]

Sir, when I click on view product details, the product details page not opening, my site name is - www.pandoras.in Pls help me.

 

and how it's related to grid product view on category page?