[SOLVED] Display sub categories as grid

[RCP90]

Hi,

 

is it possible to display sub categories in a grid format? At the moment I cannot seem to figure out how to do this.

 

 

Any help with this would be appreciated,

 

Thank you

 

EDIT:

 

Just to add, is it normal that sub categories are not displayed? I only have the default products in prestaShop (1.5.4.1) but when a top level category is selected it will simply show all products of all categories, without showing any sub categories.

Edited May 14, 2013 by RCP90 (see edit history)

[nadie]

Hi,

 

is it possible to display sub categories in a grid format? At the moment I cannot seem to figure out how to do this.

 

something similar to this:

 

 

http://www.toolstop..../hand-tools-b60

 

Any help with this would be appreciated,

 

Thank you

 

 

Grid subcategories: http://victor-rodena...prestashop-1-5/ (In Spanish) (Sorry)

 

Grid product by categories: http://nemops.com/gr...prestashop-1-5/

 

Sorry for my English

[RCP90]

Nadie,

 

Thank you for your reply, I shall take a look at this, i will let you know the results

 

Although, strangely i am not getting any sub categories to display not even in a list. I have the default out of the box products, and have placed some of them 3 category levels deep, however when the top level category is click it will just show all of the products directly, as though ti has skipped all of the categories.

Edited May 3, 2013 by RCP90 (see edit history)

[nadie]

Nadie,

 

Thank you for your reply, I shall take a look at this, i will let you know the results

 

 

Ok

 

Perfect !

 

Sorry for my English

[nadie]

 

Although, strangely i am not getting any sub categories to display not even in a list. I have the default out of the box products, and have placed some of them 3 category levels deep, however when the top level category is click it will just show all of the products directly, as though ti has skipped all of the categories.

 

¿Use template default Prestashop or no?

 

Sorry for my English

[RCP90]

Hello,

 

I am using this theme

 

http://themeforest.net/item/warehouse-responsive-html5-prestashop-theme/full_screen_preview/3178575

 

 

[nadie]

Hello,

 

I am using this theme

 

http://themeforest.n...preview/3178575

 

 

 

In category.tpl,

 

 

Check to see if you have this code:

 

{if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
  <h3>{l s='Subcategories'}</h3>
  <ul class="inline_list">
  {foreach from=$subcategories item=subcategory}
   <li class="clearfix">
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {else}
   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {/if}
 </a>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 {if $subcategory.description}
  <p class="cat_desc">{$subcategory.description}</p>
 {/if}
   </li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>
 {/if}

[RCP90]

Hello,

 

Thank you again for the reply, I could find this;

 

   {if isset($warehouse_vars.show_subcategories) && $warehouse_vars.show_subcategories == 1}
		  {if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
  <h3>{l s='Subcategories'}</h3>
		    <script type="text/javascript" >
$(window).load(function() {
   setHeight2('.grid_list_categories li');
});

</script>
  <ul class="grid_list_categories clearfix">
  {foreach from=$subcategories item=subcategory}
   <li>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" />
  {else}
   <img src="{$img_cat_dir}default-medium_default.jpg" alt=""   />
  {/if}
 </a>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'|truncate:42:'...'}</a>

   </li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>
 {/if}{/if}

[RCP90]

Hi,

 

Just to clarify something. My sub categories are appearing on the left hand side of the site. What i want is to have them in the middle of the page, in a grid format so that the user can navigate though them, to the product they require.

 

currently even if a top level category is selected every product form all sub categories are being displayed, with the sub categories being displayed on the left hand side, acting more like a filter.

[RCP90]

just an update, i discovered an option in the theme editor 'display sub categories'.

 

[demaxim]

does anyone knows how to add unique class for each third category in list, like for product works

 

<li class="{if $smarty.foreach.products.iteration is div by 3} product_list-3{/if}"></li>

 

 

thanks

Edited July 20, 2013 by demaxim (see edit history)

[thelatinspirit]

as you solved your problem?

could you tell me how you have solved your problem with categories in grid?

 

thanks for your answer.

[vekia]

 

 

as you solved your problem?
could you tell me how you have solved your problem with categories in grid?

thanks for your answer.

subcategories as grid in prestashop 1.5

[fishordog]

subcategories as grid in prestashop 1.5

Hi, Vekia i've seen you posting on mypresta.eu.

Could you please tell me how to fix my subcategories grid.

Here's a screenshot of how it displays . 

Edited October 20, 2013 by SeVi (see edit history)

[fishordog]

I just changed

 

.inline_list li .img {

display: block;

margin-left: auto;

margin-right: auto

margin-top: 15px;

}

 

 

to 

.inline_list li .img {

display: block;

margin-left: auto;

margin-right: auto

margin-top: auto;

}

 

but it still doesn't look good. What do i do to remove that dotted margin(or make it clear) and how do i make it display category names if they have longer names? As you can see in category #2

Edited October 20, 2013 by SeVi (see edit history)

[vekia]

i think that in this case it will be necessary to increase height for <li> object

[fishordog]

i think that in this case it will be necessary to increase height for <li> object

it worked. thanks

[vekia]

glad to hear that i could help you a little in this case

i checked your website some time ago and i saw that now it works well

thank you for confirmation

 

with regards,

Milos

[mzungu2003]

Hi,

 

I've tried all the suggestions above and still cannot seem to get my grid view to look right. At present it looks like this:

 

 

I want the image to be centred and the grid boxes to be slightly taller.

 

The code I currently have is:

 

.inline_list {

list-style-type:none;

margin-top:5px;

}

 

.inline_list  li {

text-align: center;

float: left;

display: inline-block;

width: 96px;

height: 125px;

margin: 5px;

}

 

.inline_list  li .img {

display: block;

margin-left: auto;

margin-right: auto;

margin-top: auto;

}

 

.inline_list  li img {

border:1px solid #ccc

}

 

.inline_list  li .cat_name {

font-size:12px

}

 

Any help is much appreciated,

 

Many Thanks

[vekia]

is your website online? if so, can you share url please?

[mzungu2003]

yeah, my website is online at: www.inkfinity.co.uk =)

[vekia]

yeah, my website is online at: www.inkfinity.co.uk =)

 

problem solveD?

take a look:

[mzungu2003]

I still see this:

 

 

Any reason why?

[vekia]

try to clear browser cache, maybe you see still old version of the css files

on category page, where you see subcategories press ctrl+F5

[mzungu2003]

Tried clearing of cache, changing browsers, changing PC - still seeing the same result...

[leecharles]

Hi everyone, I have followed Vekia tutorial on subcategory grid.

They are displaying now as a grid but the pictures are to the left of box and the text is all over the place.

My url is www.gr8-kitchenware.co.uk

any advice to put right is gratefully appreciated.

Kind Regards,

Lee

uk

[vekia]

remove float:left; from:

.inline_list li .img {
display: block;
float: left;
margin-top: 15px;
}

also, if i were you i will increase height param in:

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

for example, use 120px;

 

 

effect:

[leecharles]

Hey thanks Vekia for your reply.

I had changed float left to float center and that worked but have now just removed it as per yr advice. Have increased height to 100 and it looks good.

 

However for some reason on my home page the featured products some of the image blocks are stuck together, please could you tell me what to change?

 

Kind Regards,

Lee

sorry www.gr8-kitchenware.co.uk

[vekia]

something strange happened: your page loads loads and finally die.

 

[leecharles]

Hi Vekia,

its loading fine at this end?

[vekia]

it's not related to this topic but i will help,

in the future please create new threads to questions not related to main case in topic, where you post.

 

ok, so, open homefeatured.tpl file

there is a code:

{assign var='nbItemsPerLine' value=4}

 

change it to:

{assign var='nbItemsPerLine' value=5}

[leecharles]

Thanks worked like a dream!

Kindest Regards,

Lee

SOLVED

[Tomasci]

Hello Vekia,

 

I have also adapted my template to this grid categorieview. Managed to enlarge it a bit. Beautifull!

But since I've done that, 'featured products' at my homepage doesn't fit.

 

Could have also been from changing preferences/images home_default size to 140px??

(I did so for the grid/list/minilist product layout)

 

Please help.

 

PS 1.5.6.2

shop.lrpartners.nl

[Tomasci]

Also on my productpages, the small thumbnails, I screwed up in some way

[vekia]

hello

 

subcategory images aren't related to featured products images.

your problem is related to something else, to picture sizes used in homefeatured module

[vekia]

Also on my productpages, the small thumbnails, I screwed up in some way

 

you changed size of medium_default picture

it is used also as a thumbs for product picture on product page

[Tomasci]

Thanks, home featured is ok now.

 

 

By changing the size from medium_default back to 56 x 56px (from 100x100), I also changed the image size of my subcategories (grid-view).

Could I seperate these 2 in some way?

Maybe by creating a new image (preferences/images/...) and referring it to the subcategory in code?

 

 

Same for my products (grid_view). By changing the home_default images size back to 124 x 124px (from 140x140), my products images within categories became smaller.

[vekia]

you can do it,

just create new imagetype for your categories.

you can do it under preferences > images tab. 

Create new image, for example, named "category_image"

use it only for categories.

 

Then in category.tpl change medium_default to category_image (for subcategories)

 

voila

[Tomasci]

I have tried but it had no effect. Example: http://shop.lrpartners.nl/nl/40-mannen

No cache, compilation forced and all images are regenerated.

 

 

This is the code in witch I changed it, name of image is "category_thumb" (100x100px):

{if $subcategory.id_image}
                            <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_thumb')|escape:'html'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {else}
                            <img src="{$img_cat_dir}default-category_thumb.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {/if}

 

=> also tried without removing the last "home_default"(.jpg)

 

In product-list.tpl: (for product listing within category => new image: "catprodview"; 124x124px)

  <div class="center_block">
                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}
                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'catprodview')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
                    {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
                </a>

 

 

I missed something in the PrestaShop back office?

 

Many thanks!

[vekia]

you changed images for products to catprodview

you created this imagetype a nd marked it as image for products?

in addition, it's necessary to regenerate thumbnails, you did that?

[Tomasci]

you changed images for products to catprodview

you created this imagetype a nd marked it as image for products?

in addition, it's necessary to regenerate thumbnails, you did that?

 

Yes I have:

 

After having no succes regenerating this particular image sizen in products & categories, I regenerated (multiple times) without result.

 

Allthough I'm new at this, it looks like a logic peace of code. I have no idea why it is not having its effect.

 

Can it help if I provide you with a superadmin login in private message?

[vekia]

sure i can check it,

what kind of problems you've got now? images just don't want to appear? or you just don't see any change?

[Tomasci]

They appear exactly the same as before, no change.

 

Here I see the subcategory images at 56x56px, while they should be 100x100px,

and here I see the subcategory images at 124x124px, while it should be 140x140px. (they are slightly smaller and to the left)

 

I can't send you private message, so I've send you a friend request to share the login info.

 

Thanks many, many times! A true PrestaShop Legend you are!

[vekia]

done you can send me private messages now  

[Tomasci]

done you can send me private messages now  

 

I have tried a few times more with different names and sizes. Still no result.

The image previously referred to as 'catprodviews' is now called 'product_layout'.

 

I've send you some credentials in PM. Thanks again!

[vekia]

hello

 

i know where the problem is

check this:

 

http://www.prestashop.com/forums/topic/313709-solved-new-picture-problem-tumbnails-not-showing-right/

start reading from my post nb #9 

 

thanks for credentials

i checked it - everything is okay there,

problem described and solved in thread that i posted above