Product page ~ Grid view ~ 3 Columns

[PeteFF]

Hi

 

I am trying to change the product list page to a grid view with 3 columns of products as described here

 

http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html

 

A few things not quite right.........

 

1/ If i remove the Right column, on the footer.tpl ,which is what i want for the product list page, it also removes the Right column on the other pages.

 

2/ When i change  <div id="center_column" class="grid_7 omega"> it is to wide and moves the list

down below the left column

 

3/ If i change to grid-6 it is to narrow.

 

4/ Finally how do i change;

the font size for the product list page

the truncation of the description under the image

the size of the image

 

If someone could assist please 

 

Pete

 

 

[vekia]

in fact im author of this guide so i suppose that i can help you in this case

 

 

1) 1/ If i remove the Right column, on the footer.tpl ,which is what i want for the product list page, it also removes the Right column on the other pages.

 

 

in this case you have to define some kind of if conditions in footer section. as you said you want to dremove right column only from product listing page, so instead of 'remove' code of right column use this if condition:

{if $page_name!='category'}<div id="right_column" class="column grid_2 omega">
{$HOOK_RIGHT_COLUMN}
</div>{/if}

then your right column will disappear from product listing (categories) page. remember about pages like manufacturers, tags, new products, prices drop etc. these pages also use product listing!

 

 

2/ When i change  <div id="center_column" class="grid_7 omega"> it is to wide and moves the list

down below the left column

 

 

add "grid_7 omega aplha" to your class.

 

 

 

3/ If i change to grid-6 it is to narrow.

see above

 

 

 

4/ Finally how do i change;

the font size for the product list page

the truncation of the description under the image

the size of the image

 

font size: where exactly? product name? price? maybe desc?

truncate: {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} - it's a truncate modifier

image: preferences > images and change image size for home_default

[PeteFF]

Hi

 

And as always , thank you for your help 

 

1/ Done........ great

 

2/ Where should i change "Grid" ? If i do header.tpl, all pages change

 

3/ NA

 

4/ Sorry for poor description........ Change text font on products list page , the actual product description, in grid view.

 

Thanks 

[Tomasci]

Hello,

 

I also have a few questions about the grid-list-minilist switcher as described on:
http://mypresta.eu/en/art/developer/grid-and-list-products-view-switcher.html

 

Works like a charm!

 

But I want to add the view button to grid and minilist view. When an attribute must be chosen there is no button at all. The link is there, though not obvious enough.

 

An example can be found here: http://shop.lrpartners.nl/85-oorhangers  (only temporary though)

 

Thanks!

[vekia]

   #product_list_mini li .lnk_view {
        display: block;
        margin-top:15px;
        padding:0 10px;
        border:none;
        font-weight:bold;
        color:#0088CC;
        background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;
        display:none;
    }

remove display:none;

[Tomasci]

I removed "display:none;" from product_list.css but it had no effect.

 

Cache is off, forced compilation is on.

 

What did I miss?

[vekia]

it's enabled now:

[Tomasci]

it's enabled now:

 

Yes, that is allready part of it. (missed that one, was focussing on grid view)

 

 

I want this also to be there in grid view, so I deleted the display:none; from the block starting with  #product_list_grid li .lnk_view

 

Now it is also there, but it doesn't fit as seen below:

 

How do I make the box fit just right?   Thanks again!

[vekia]

you have to increase <li> height, it must be the same for each object, you can do it with css styles

[Tomasci]

I must be looking the wrong way. I only have 2 (different) 'height' in product_list.css:

#product_list li p.product_desc {...}

    line-height:16px;

 

#product_list li .ajax_add_to_cart_button span {...}

    height: 26px;

 

Please clearify wich heights you mean?

 

I am a total newbie when it comes to webdevelopment. Thank you.

[vekia]

tried to check your website, but now there is:

- no grid

- no minilist

- no css styles at all

[Tomasci]

tried to check your website, but now there is:

- no grid

- no minilist

- no css styles at all

Yes, because I added 10px to each above described height, as an experiment.

 

It's back the way it was now.

[vekia]

product-list.css line 167

#product_list_grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
}

[Tomasci]

 

product-list.css line 167

#product_list_grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
}

Thanks, that's it!

 

One last question and it 's perfect:

 

How to change the white space above the image in grid view, within the box borders?  (called "padding" I asume)

 

(I allready managed to remove the image border, and move the "view" link up, by experimenting. But wasn't able to find the right line for the vertical position of image.)

[vekia]

in this case you have to disable  .left_block

 

product_list.css line 187

#product_list_grid .left_block {
display: block;
clear: both;
overflow: hidden;
height: 20px;
text-align: center;
margin-top: 10px;
}

change display:block; to display:none;

 

effect:

[Tomasci]

in this case you have to disable  .left_block

 

product_list.css line 187

...

 

Awesome!! Thanks!!

[Tomasci]

Dear Vekia

 

I was able to increase the size of the images (following other conversations on this forum) and remove the 'in stock' by adding a 'display: none;'.  (as seen in your last post)

 

This makes the price and add to cart button a bit too close to each other, how can I add some white space?

 

I tried for example adding margin-top: 10px; to #product_list_grid li .ajax_add_to_cart_button span {...}