Change sub-categories to grid view
by John on Jun.30, 2009, under Hints/Tips/Hacks
Below is the code to change your sub-categories page from the list in the default theme to a grid with 3 column and no descriptions.
Overwrite the following code in your global.css file should be about line 1500, you will need to edit the colours to match your theme as this is not the default theme.
You will also need to replace your product-list.tpl file with this one for v1.1 and this one for v1.2
You will also need to change your pagination to suit the new 3 column format. Just edit the pagination.php file in the root folder. Near the top you will see: $nArray = array(10, 20, 50). Just alter the number to suit the new layout.
/* 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;
}
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 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{ 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:;
font-weight:bold;
display: block;
}
ul#product_list li .on_sale{
color:#da0f00;
text-transform:;
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.2em;
}
ul#product_list li span.availability{
color:#000;
font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }
Related posts:
31 Comments for this entry
Leave a Reply
-
Welcome to Free Prestashop Modules!
Feel free to join the discussion by leaving comments, and stay up to date by subscribing to our RSS feed.
You can also subscribe by email by filling the field below:
Custom Search
Visitors in the last 7 days
2,046Unique
VisitorsPowered By
September 1st, 2009 on 10:44 am
it didn’t work for me in Prestashop 1.2. When I uploaded your new product-list.tpl, the products did not display correctly. It was still in a single column but the pictures of the products and the buttons are completely mislplaced. Is this compatible with 1.2?
September 1st, 2009 on 10:46 am
Probabaly not compatible with 1.2. I will update it in a moment.
September 1st, 2009 on 10:51 am
Ok I have added a v1.2 download. Its taken from a site that I have so I know it works fine. Try that and see what happens.
September 4th, 2009 on 2:10 am
Hello,
“Just edit the pagination.php file in the root folder. Near the top you will see: $nArray = array(10, 20, 50). Just alter the number to suit the new layout”
i use ‘prestashop 1.2′.
I changed to : $nArray = array(12, 24, 48)
The ’select’ in the bottom of the page works fine, i see 12, 24 and 48 but still 10 products by page !
If i use an echo $n; i can see in the pagination.php that the value is still 10 !
Do you have a solution for that please ?
Thank you
September 4th, 2009 on 2:25 am
Hello,
i found the solution : in the Back Office, preferences, products, you have to change the number of products by page.
Thank you for your great website and helpful hints ^^
September 17th, 2009 on 10:30 pm
How can i made it to disply the short product description with the format i want, example:
(short desc display under the picture)
- WINDOWS
- 200 MHZ
- SPNISH
- etc
September 20th, 2009 on 10:21 am
It is possible to stop prestashop removing HTML formatting by removing a section of code from the product-list.tpl file as below.
{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
This is the line that concerns the short description for product lists, if you remove the section that says |strip_tags:’UTF-8′ then any html that you enter as a short description will display on the front-end.
October 29th, 2009 on 2:20 pm
Any way to have attributes below short description?
October 29th, 2009 on 4:31 pm
I presume you are refering to the product page and not the category page.
If you edit your product.tpl file and move the section that refers to attributes up the page so that it is above the code for the price block.
October 29th, 2009 on 5:41 pm
Im refering to category listing. I need this same attributes like on product page. Do you think simply move all block from product.tpl to product_list.tpl will by enough ?
October 31st, 2009 on 10:43 am
So you want to be able to select attributes from the categories pages? There is no module currently for that, it would need alteration of some presta files. Moving the attributes code from product.tpl is unlikely to work.
October 31st, 2009 on 2:43 pm
Yes – exactly what I need is have possibility to get similar products with this same features (like “Similar to this product are also:”).
It will by store with woman underwear, so it will by great to have listing all strings in this same size and color
what do you think ?
November 2nd, 2009 on 7:58 am
There is a module that displays related products here but its displays on the product page
October 31st, 2009 on 8:25 pm
Could you explain a way to make the view, grid or list, selectable by the customer as it is in Magento?
November 2nd, 2009 on 7:43 am
You need to get a coder to acheive this as as far as I am aware no one has created that kind of module
November 1st, 2009 on 9:41 am
hello i used your code to form a grid layout it works like a charm..i would just like to have 4 columns instead of 3
November 2nd, 2009 on 7:46 am
You would need to change the width of
ul#product_list li {in your global.css to make them smaller to fit more into the space.November 23rd, 2009 on 2:41 am
Hi there,
First of all, thank so much for the great modification, works like a charm.
I do have one question that should be relatively simple, just wondering how to get the “add to cart” button back as it is now removed with your script.
Any support would be greatly appreciated as I am a bit of a noob when it comes to PHP.
Richard.
November 29th, 2009 on 8:31 am
You need to add the following code in your product-list.tpl file.
<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}" rel="nofollow">{l s='Add to cart'}
{else}
<span class="exclusive">{l s='Add to cart'}
{/if}
If you add it just above the code for the view button it should look ok.
December 6th, 2009 on 8:44 pm
The only problem with this method is if the description is too long or goes beyond the set height it will break the grid layout…
December 7th, 2009 on 10:42 am
The description code isnt include in the product-list.tpl file that I have included, so that wouldnt be a problem if you use it.
January 5th, 2010 on 7:29 am
Hi,,
I have proplem with”Price lowered”
It goes on same place and nameof the product is?
February 3rd, 2010 on 10:26 am
hi
,
is this gonna work in PS 1,2,5 or 1,3,0 ?
thank for everything
February 4th, 2010 on 7:46 am
Only works with 1.2
May 23rd, 2010 on 12:00 pm
This worked great for me. the only problem I have is when the number of products is not divisible by 3, the page navigator at the bottom screwed up.
Meaning, the nav bar at the bottom jump up to the “not enough 3 products” line, instead of staying at the bottom.
Please see the pic:
http://i233.photobucket.com/albums/ee1/harrypotter30022003/error.jpg
Any suggestion?
Thanks in advance
P.S: How can i get the comment module with captcha and commenters’ details like yours? thanks again for this great work!!!
May 24th, 2010 on 3:22 pm
Which comment module are you talking about?
May 25th, 2010 on 9:28 am
this comment module in your page, just below this. Since the comment module pre-installed in prestashop is not very convenient since it requires guest to register and login… also no recaptcha so is there any better comment module similar in this website ???
How about my error? any idea??
Thank you very much…
June 9th, 2010 on 5:18 pm
Hello, the module is very good, thanks for this module, and, just i have a problem, the product link is bad, because just take a little portion of the image.
http://www.sistemform.com/pruebas/tienda/manufacturer.php?id_manufacturer=3
and i was made change in global.css the ul#product_list a.product_img_link and nothing, Could you help me please?.
Thanks.
June 9th, 2010 on 6:49 pm
Hello, well i the solution of my problem is just put position:absolute; in the seccion:
ul#product_list a.product_img_link{
float:left;
margin-right:0.6em;
margin-left:35px;
margin-top:-1px;
position:absolute;
}
and the problem dissapear.
Thanks for the module.
June 16th, 2010 on 7:47 pm
Hi All,
thanks for the piece of code, it saved me a lot of time.
The point is that i get the same thing than Tony (23rd May)
When the the number of product listed is not divisible by 3
the pagination controls are not shown at the botton of the page.
Any suggestion?
Thanks in advance,
Jose
June 17th, 2010 on 7:44 am
I shall have a look and get back to you.