< Solved > Thumbnail View on Subcategory pages

[Vilas]

Hello Friends,

 

I am using PS 1.5.4.1. I like to know is that possible to show thumbnail view instead of grid view on sub-category pages.

 

For e.g.

 

 

 

on above page, sub-categories are appearing in grid view & I want to show in thumbnail view in 2 lines.

 

e.g.

 

product name product name

image image

price price

add to cart add to cart

 

Currently its appearing as below.

 

 

Wish to show like this.

 

 

Will be great if anyone suggest.

 

Thanks

Edited August 24, 2013 by Vilas (see edit history)

[vekia]

take a look here: http://www.prestashop.com/forums/topic/244509-solved-display-sub-categories-as-grid/

it's very similar question

[Vilas]

Dear Vekia,

 

Found solution on that link. But still some modification is necessary to show subcategories in proper view.

 

Also product thumbnail option solution in not there. So how to do that also?

 

Will be great if you have a look on site once again & suggest solution.

 

Thanks

[vekia]

subcategories displays only categories, not products, so my question is, why you want to display products instead of subcategories? i don't understand it a bit, can you clarify what you expect in this case?

[Vilas]

Dear Vekia,

 

Apologize for confusion. Skip the product part. First will change look to thumbnail for subcategories. I did same thing as suggested in that solution link. But on my site there thumbnail is not appearing properly.

 

That only the thing I want to correct.

 

Thanks

[Vilas]

No Solution

[vekia]

take a look here: sucategories grid view

 

after this modification you should increase the width of <li> object - then you will achieve what you want

[Vilas]

Dear Vekia,

 

Thanks for details. Did the same thing as suggested. But still its not appearing properly. Please have a link on below url to know exact issue.

 

 

 

Thanks & sorry for trouble.

 

Regards

Edited August 23, 2013 by Vilas (see edit history)

[vekia]

we are so close

 

how many subcategories per row you want to display in subcategories block?

[Vilas]

Hmm...

 

Atleast 6 Categories per row

Edited August 20, 2013 by Vilas (see edit history)

[vekia]

okay, so change the width of: .inline_list li to 153px; exactly as i show below:

(it's a part of: /themes/default/css/category.css)

.inline_list li {
text-align: center;
float: left;
display: inline-block;
width: 153px;
height: 100px;
border: 1px dotted #ccc;
margin: 4px;
}

[Vilas]

Dear Vekia,

 

Did some more modification as per your instructions, Now its perfectly looking good. Many thanks for it. But have one more issue about that bread-cum navigation option.

 

Category name is appearing twice. I wish to move that home navigation option before to that boldly written category name & want to remove that navigation option which is there.

 

Is that possible?

 

Please find image for reference.

 

[vekia]

if you want to remove the breadcrumb - open the category.tpl file and just remove the code:

{include file="$tpl_dir./breadcrumb.tpl"}

 

then in the h1 tag add:

<a href="{$base_dir}" title="{l s='Return to Home'}"><img src="{$img_dir}icon/home.gif" height="26" width="26" alt="{l s='Home'}" /></a>

[Vilas]

I have removed that breadcumb code. But unable to identify in which file I have to update the next script?

 

Will be great if you tell me file name in which I have to add that h1 tag.

[vekia]

in the category.tpl file

 

you will find there <h1> tag (you've got only one <h1> there so it will be easy to find )

[Vilas]

Added that script below to h1 tag. But still not appearing properly. You may have a look once again on url to know how its looking now

 

 

Thanks

Edited August 23, 2013 by Vilas (see edit history)

[Vilas]

[vekia]

your header looks the same before?

[vekia]

you changed something else?

[Vilas]

In that category.tpl file?? No not. Let me replace it with original one once & let me check by doing same modifications again.

 

Will get back to you.

[Vilas]

your header looks the same before?

 

 

Its look changed to this After removing that breadcumb script from category.tpl

 

Did same process once again But still not success.

Edited August 22, 2013 by Vilas (see edit history)

[Vilas]

I have added below code to grid_prestashop.css

 

.container_9 .grid_5

{width:980px; padding-top: 190px;}

 

Now that category page looking fine.

 

But I am worried whether its correct or it might be harmful to other pages.

 

What you suggest?

 

Thanks

[vekia]

it looks still the same, there is something wrong with:

1. .tpl file contents
   
2. css file
   

 

you said that you changed grid values, maybe this is the problem?

[vekia]

your header hasn't got any height value and i see, that it isn't default (css)

so i suppose that you changed something for it?

 

try to add height param for #header

for example #header {height:200px;}

[Vilas]

From my end its looking fine. Please find image for your reference.

 

 

 

 

You may have look on it.

Edited August 23, 2013 by Vilas (see edit history)

[vekia]

here it is:

 

my bad

 

i cleared cache in my browser and now it works well

[Vilas]

Is that possible to show products too in thumbnail view on category pages? as like current subcategories.

 

Currently appearing products as below.

 

 

 

Wish to show like below.

 

 

Thanks

[vekia]

yes it is, but in this case you alse have to edit the css and i suppose that also .tpl file a bit.

 

changed code:

product_list li {
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 180px;
display: inline-block;
}
#product_list li .left_block {
float: left;
padding-top: 58px;
width: 15px;
display: none;
}


#product_list li .center_block {
float: left;
padding: 0 7px;
}


#product_list li .right_block {
text-align: center;
position: relative;
}

 

in: /themes/default/css/product_list.css

[Vilas]

Did the same. But looking little bit conjusted. Will be great if you have a look on that page now & suggest something better idea.

[vekia]

i checked and this is what i see:

 

 

looks very very well

[Vilas]

The font of the product name looks too much bold I think

 

Is there is any way to change it?

 

Also the p class is assigned to price of product. Also its assigned to other some sections. Is there is any way to make something different class for price?

[vekia]

you can create any class you want, but remember to change it in the product-list.tpl file and create class definition in the global.css file.

 

you can change the font size and weight in:

#product_list li h3 {
padding: 0 0 10px 0;
font-size: 13px;
color: #000;
}

 

change the font-size:13px; and for example add font-weight: lighter;

[Vilas]

Font option worked perfectly.

 

 

One more thing I have observed. Some of boxes of products are not appearing in one line.

 

Please find image for reference.

 

 

 

 

Will be great if you provide solution on same.

 

Also I am don't have any idea about adding a class. Can u suggest something easier class creating option

Edited August 27, 2013 by Vilas (see edit history)

[Vilas]

[vekia]

to product li h3 add height param, for example height: 150px;

#product_list li h3 {
padding: 0 0 10px 0;
font-weight: lighter;
font-size: 11px;
color: #000;
min-height: 0px;
position: relative;
display: block;
height: 150px;
}

 

then it will be looks like:

[Vilas]

It also worked perfectly.

 

Will be great if you provide any simple modification option for below query.

 

Also the p class is assigned to price of product. Also its assigned to other some sections. Is there is any way to make something different class for price?

 

Thanks

[vekia]

this is the code for class price:

 

#product_list li .price {
display: block;
margin-bottom: 15px;
font-weight: bold;
font-size: 18px;
color: #990000;
}

 

and it is related only to the #product_list, it mean, that this class will work only for product listing

[Vilas]

Thanks for kind help.

 

That means If suppose I have to make price class for product page then I have to create code like below.

 

#product li .price {

display: block;

margin-bottom: 15px;

font-weight: bold;

font-size: 18px;

color: #990000;

}

am I right? No matter margin, font will be set according to page.

Edited August 23, 2013 by Vilas (see edit history)

[Vilas]

Also suppose if I have any module named as shop_window so in such case only first line will be changed like

 

#shop_window .price {

display: block;

margin-bottom: 15px;

font-weight: bold;

font-size: 18px;

color: #990000;

}

 

is that also right?

 

Why this li will be used??? any special reason ?

 

Sorry for troubling you.

[vekia]

one question: where you've got this: #shop_window ?

[Vilas]

Its custom module which was created by one of the developer on my request.

[Vilas]

Also suppose if I have any module named as shop_window so in such case only first line will be changed like

 

#shop_window .price {

display: block;

margin-bottom: 15px;

font-weight: bold;

font-size: 18px;

color: #990000;

}

 

is that also right?

 

Why this li will be used??? any special reason ?

 

Sorry for troubling you.

 

Does it right ??

[vekia]

code above will work only for .price element located inside another object with id="shop_window".

I don't understand what you exactly expect now

[Vilas]

No no nothing I am expecting. I am just only trying to learn how to create a class. As per above comment, it means I am right about how to create class.

 

Thanks for your kind help.

[vekia]

i just thought that something doesnt work for you

thanks for clarification if you will have any other questions - feel free to write

[Vilas]

Hmm.. Sorry for creating confusion

 

Thanks for your kind support. Have a nice time ahead.