How to display/hide sub-categories (on Categories Menu) clicking on the category tab?

[CSilva]

Hi,

 

does anyone knows how to display sub-categories (on the left Categories Menu) when clicking on the correspondent category?

 

To display/hide the sub-categories it's necessary to click on the "+" and "-" symbols, and i would like to change that, to clicking in the category name/tab.

 

 

thanks,

Edited June 4, 2013 by CSilva (see edit history)

[vekia]

Hello, ofcourse it is possible, but you have to edit the .tpl file of the block categories module.

But it isn't as simple as it seems. Before i will modify the source, i have to ask:

 

How deep is your categories tree? Im asking because:

 

- now, when you click on the category name - script loads category page with product list

- after changes it will be available to load only subcategories - which mean that your customers will haven't got an ability to open main category page (only subcats)

[CSilva]

Hi vekia,

 

thanks for reply!

 

Answering your question:

 

It's possible that i'll have products directly on a category, but mostly, the structure will be composed by subcategories (with products) inside the category (category->subcats)!

 

I just want the clients to load the products list page.

 

If i place the products directly on a category, then it will load the products page when clicking on the category tab.

 

Basically i want to remove the page with the list of subcats, replacing that link with the drop down effect.

 

 

thanks,

Edited June 4, 2013 by CSilva (see edit history)

[CSilva]

- after changes it will be available to load only subcategories - which mean that your customers will haven't got an ability to open main category page (only subcats)

 

 

If you mean the ability to open the page with the list of subcats, that's exactly what i want!

Edited June 4, 2013 by CSilva (see edit history)

[CSilva]

I've also tried to add a different color when a category/subcat is selected, with the code

.categories_block_left li:active {
background-color:#fddd04;}

, on global.css (block categories), but it didn't worked out.

 

 

 

Does anyone knows how to make this work?

 

 

thanks,

Edited June 4, 2013 by CSilva (see edit history)

[CSilva]

Anyone???

 

 

Here is an example of the effect i want, with jQuery! No one knows how can i make this changes on the Prestashop 1.5.3.1 categories block (default template)?

 

Accordion Menu in jQuery

Edited June 4, 2013 by CSilva (see edit history)

[CSilva]

I think the changes must be on the file 'category-tree-branch.tpl' (located in yourshop/modules/blockcategories), but i'm not sure where.

I've found a post that says it is on the line:

{$node.name|escape:htmlall:'UTF-8'}

 

Does anyone knows what are the necessary changes, so the parent categories simply expand to show the subcategories when clicked, and the subcategories work as links to the product list page?

 

To hide the "+" and "-" button, i know it's necessary to remove or comment the following classes, on the file 'global.css', located in yourshop/themes/default/css/:

#categories_block_left li .OPEN,
#categories_block_left li .CLOSE {
display:block;
float:right;
margin:10px 10px 0;
height:9px;
width:9px;
background:url(../../../modules/blockcategories/img/icon/open-close.png) no-repeat 0 -9px;
background-color:#fd0612;
cursor:pointer
}
#categories_block_left li .CLOSE {background-position:0 0}

 

 

I will be gratefull for any help with this changes!

Edited June 27, 2013 by CSilva (see edit history)

[CSilva]

Does anyone knows a addon or module that allows me to do something like this?

 

 

There's an atached picture that shows an example of what i want!

 

 

 

thanks,

[Adrenalin]

Come right with this? Exactly what I am trying to do but as per usual the forums point me to change some tpl files and I am not comfortable doing that. I know it can be done in BO.

[CSilva]

Come right with this? Exactly what I am trying to do but as per usual the forums point me to change some tpl files and I am not comfortable doing that. I know it can be done in BO.

 

Hi Adrenalin,

 

i have found the solution in this topic (French forum): http://www.prestashop.com/forums/index.php?/topic/257799-bloc-categorie-supprimer-bouton-plus-lien/unread/

A big thanks to cupidon4040!

 

The changes are not on tpl files or in the BO, but in the treeManagement.js and in the global.css files.

 

This is how the treeManagement.js should be:

 

//add growers to each ul.tree elements
$('ul.tree.dhtml ul').prev().removeAttr('href');
$('ul.tree.dhtml ul').prev().addClass('grower OPEN');

//dynamically add the '.last' class on each last item of a branch
$('ul.tree.dhtml ul li:last-child, ul.tree.dhtml li:last-child').addClass('last');
//collapse every expanded branch
$('ul.tree.dhtml a.grower.OPEN').addClass('CLOSE').removeClass('OPEN').parent().find('ul:first').hide();
$('ul.tree.dhtml').show();
//open the tree for the selected branch
$('ul.tree.dhtml .selected').parents().each( function() {
if ($(this).is('ul'))
toggleBranch($(this).prev(), true);
});
toggleBranch( $('ul.tree.dhtml .selected'), true);
//add a fonction on clicks on growers
$('ul.tree.dhtml a.grower').click(function(){
toggleBranch($(this));
});
//mark this 'ul.tree' elements as already 'dynamized'
$('ul.tree.dhtml').addClass('dynamized');
$('ul.tree.dhtml').removeClass('dhtml');
}
});

 

In the global.css file, just remove this code:

#categories_block_left li .OPEN,
#categories_block_left li .CLOSE {
display:block;
float:right;
margin:10px 10px 0;
height:9px;
width:9px;
background:url(../../../modules/blockcategories/img/icon/open-close.png) no-repeat 0 -9px;
background-color:#fd0612;
cursor:pointer
}
#categories_block_left li .CLOSE {background-position:0 0}

 

To make this perfect, i just need to know how to make the expanded categories close when i click in another one. And how to change the color of the selected one.

 

If someone could give a hand with this, i'll be gratefull!!!

 

 

cheers,

Edited July 12, 2013 by CSilva (see edit history)

[Adrenalin]

I sorted mine in the BO.

 

thanks.

[gnattle]

I sorted mine in the BO.

 

thanks.

 

Hi

 

Where abouts?

 

Cheers

[Adrenalin]

Hi

 

Where abouts?

 

Cheers

 

For the life of me can't remember. Will check this evening for you.

[deonderd]

goto modules -> categoriesblock -> maximum dept =0

 

and it works grtz

[mickeymouse]

works perfect thanks CSilva

[bapu]

Hi ,

 

     Please help me . I am using prestashop 1.6 version . And here I want , when some one click on a subcategory the corresponding category and subcategory  only be display on left side bar that means in block categories  not everything . 

 

    Can it possible.

[vekia]

Hi ,

 

     Please help me . I am using prestashop 1.6 version . And here I want , when some one click on a subcategory the corresponding category and subcategory  only be display on left side bar that means in block categories  not everything . 

 

    Can it possible.

 

you mean that you want to hide subcategories from center block?

[bapu]

Hi,

 

Thank you for reply . 

 

 If  the top-menu structure is like below in Prestashop-1.6:

 

 Samsung (Main category1)                                   Sony(Main category2)                               Motorolla(Main category3)

 3g-Mobile     2g-Mobile  (subcategories)              3g-Mobile      2g-Mobile (subcategories)    3g-Mobile         2g-Mobile

  sam1            sam5         (sub-sub categories)      son1               son5    (sub-subcategories) mot1                  mot5

  sam2            sam6                                                son2               son6                                     mot2                  mot6

  sam3            sam7                                                son3               son7                                     mot3                  mot7

 

When some one will click on son6 then it should display only the Main category (Sony) , subcategories(3g-Mobile of Sony , 2g-Mobile of Sony) and all its corresponding sub-subcategories on left-side bar of prestashop(block-category module), not all main categories  and its subcategories that are present .

 

Can it possible.

[bapu]

Hi it is urgent please help ...

[vekia]

sry but i don't know what is this

 

:/

[hi2014]

you mean that you want to hide subcategories from center block?

Vekia, yes, definitely I would be interested in that. How or what is the best way please?

For PS 1.5 and 1.6 is there a checkbox or selection that allows not having the subcategories listed in the body page or it still involves editing some .tpl files, like categories.tpl?  If editing involved, which please, and what to comment out or replace with what?

 

UPDATE:

I think I may have gotten the answer.  Trying it and experimenting.

If it works, I'll post info for the how-to here.

Edited September 23, 2014 by hi2014 (see edit history)

[prerana]

Hi Adrenalin,

 

i have found the solution in this topic (French forum): http://www.prestashop.com/forums/index.php?/topic/257799-bloc-categorie-supprimer-bouton-plus-lien/unread/

A big thanks to cupidon4040!

 

The changes are not on tpl files or in the BO, but in the treeManagement.js and in the global.css files.

 

This is how the treeManagement.js should be:

 

//add growers to each ul.tree elements
$('ul.tree.dhtml ul').prev().removeAttr('href');
$('ul.tree.dhtml ul').prev().addClass('grower OPEN');

//dynamically add the '.last' class on each last item of a branch
$('ul.tree.dhtml ul li:last-child, ul.tree.dhtml li:last-child').addClass('last');
//collapse every expanded branch
$('ul.tree.dhtml a.grower.OPEN').addClass('CLOSE').removeClass('OPEN').parent().find('ul:first').hide();
$('ul.tree.dhtml').show();
//open the tree for the selected branch
$('ul.tree.dhtml .selected').parents().each( function() {
if ($(this).is('ul'))
toggleBranch($(this).prev(), true);
});
toggleBranch( $('ul.tree.dhtml .selected'), true);
//add a fonction on clicks on growers
$('ul.tree.dhtml a.grower').click(function(){
toggleBranch($(this));
});
//mark this 'ul.tree' elements as already 'dynamized'
$('ul.tree.dhtml').addClass('dynamized');
$('ul.tree.dhtml').removeClass('dhtml');
}
});

In the global.css file, just remove this code:

#categories_block_left li .OPEN,
#categories_block_left li .CLOSE {
display:block;
float:right;
margin:10px 10px 0;
height:9px;
width:9px;
background:url(../../../modules/blockcategories/img/icon/open-close.png) no-repeat 0 -9px;
background-color:#fd0612;
cursor:pointer
}
#categories_block_left li .CLOSE {background-position:0 0}

To make this perfect, i just need to know how to make the expanded categories close when i click in another one. And how to change the color of the selected one.

 

If someone could give a hand with this, i'll be gratefull!!!

 

 

cheers,

 

 

Hi CSilva,

 

Were you able to figure out how to make the expanded categories close when i click in another one?

If yes, please post the solution. Waiting for it.

 

Regards,

Prerana

[kiranrathod]

sry but i don't know what is this

 

:/

 

 

He says 

 

when category clicked 

then only the clicked category & IT'S sub categories (category and sub category tree) should display at the left block 

 

& ( more important ) 

when again he clicks on the sub category of the selected category (left block) then he should get the same category and sub category tree

 

[menu] [category one] [category two] [category three]

 

click on [category two] which results 

 

 

 ->category name

 -->subcategory one 

 -->subcategory two

     ...............

 

 

later if he clicks 

 

-->subcategory one (subcategory of selected category )

    same tree should display as above because its in the same parent category 

 

 ->category name

 -->subcategory one 

 -->subcategory two 

     ...............

 

 

 

 

 

 

 

 

 

 

 

[tonyfusillo]

I solved it in BO, very easily: 

Modules->category blocks->Dynamic-> set to NO.

 

This set all my sub cats in left menu open and visible.

[John Azar]

I couldn't display image on thumbnail so I decided to hide subcategory, I found this solution it worked for me

I am using prestashop cloud 1.6.1.3.

go to Modules (or Modules and Services), then look for Theme Configurator.

Then, scroll down until you see the option labeled Display Subcategories and switch it on or off depending on your needs.

[pearlpandz]

hi the same problem i met in cs-cart... 

 

any one pls help me