Changed sub categories list to grid view

[[email protected]]

A client wanted to the sub categories and categories list to be in grid view and not in a list so i used the following code and placed it in the categories.css in the theme

 

.inline_list li {
    border-bottom: 1px dotted #CCCCCC;
    float: left;
    height: 85px;
    padding: 10px 0;
    width: 178px;
}
.inline_list li .img {
    float: left;
    margin: 0 56px;
}
.inline_list li .cat_name {
    float: left;
    font-weight: bold;
    text-align: center;
    width: 178px;
}

 

 

I then removed the descriptions in the category.tpl so the list only showed the category image and name. removing <p class="cat_desc">{$subcategory.description}</p>

 

From this:

 

<!-- Subcategories -->
 <div id="subcategories">

  <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>

 

to:

 <!-- Subcategories -->
 <div id="subcategories">

  <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}

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

 

this worked for me on a non-default theme and using prestashop version 1.5.4.1 i hope this is of some help to someone

[sumo23]

Hi.

Thanks for a tip. It works very nice for me. I've made some modifications to have a 4 subcategories in line.

But how can I move down grey background and comparision and sorting modules?

 

http://easycaptures.com/fs/uploaded/729/1679410282.jpg

Edited August 17, 2013 by sumo23 (see edit history)

[thai.fast]

How about the product list in grid?

 

 

 

[vekia]

product grid view prestashop: product grid prestashop modification

[brko]

Hi.

Thanks for a tip. It works very nice for me. I've made some modifications to have a 4 subcategories in line.

But how can I move down grey background and comparision and sorting modules?

 

http://easycaptures.com/fs/uploaded/729/1679410282.jpg

 

Hi,

can you please tell me what madifications have you made to have 4 categories in line? or more?

 

thanks

[vekia]

Hi,

can you please tell me what madifications have you made to have 4 categories in line? or more?

 

thanks

 

can you please share url to your website? i will check it and then - give you solution

[brko]

can you please share url to your website? i will check it and then - give you solution

 

http://bivakshop.sk/ps/index.php?id_category=14&controller=category

[vekia]

in file: http://bivakshop.sk/ps/themes/default/css/category.css line: 49

 

change width param from 178px; to 128px;

.inline_list li {
border-bottom: 1px dotted #CCCCCC;
float: left;
height: 85px;
padding: 10px 0;
width: 128px;
}

in the same file in line 45 change

.inline_list {
list-style-type: none;
margin-top: 10px;
}

effect

 

to:

.inline_list {
list-style-type: none;
margin-top: 10px;
clear: both;
display: block;
overflow: hidden;
}

[brko]

 

in file: http://bivakshop.sk/ps/themes/default/css/category.css line: 49

 

change width param from 178px; to 128px;

.inline_list li {
border-bottom: 1px dotted #CCCCCC;
float: left;
height: 85px;
padding: 10px 0;
width: 128px;
}

in the same file in line 45 change

.inline_list {
list-style-type: none;
margin-top: 10px;
}

effect

 

to:

.inline_list {
list-style-type: none;
margin-top: 10px;
clear: both;
display: block;
overflow: hidden;
}

 

Thank you very muchchchc

[sumo23]

Thanks to all. I solved my problem using tutorial  http://mypresta.eu/en/art/developer/prestashop-subcategories-grid.html

[vekia]

you're welcome

glad to hear that i could help  you in this case

if you've got any questions related to subcategories list as grid - feel free to continue discussion

 

 

with regards,

Milos

[JulesLambda]

Hey everyone !

I just followed the tutorial but it doesn't work for me.

I've got the grid, but the text and images are not center.

There is a link of the site : http://telandtab.com/index.php?id_category=6&controller=category

I'm on prestashop 1.5.6.

Thanks you !