Category tree preopened

[skulaluks]

Hi,
Is there a possibility to have the category tree pre-opened just to its first level?

I played with the sourcecode related to this topic that is here:
\themes\prestashop\js\tools\treeManagement.js
\modules\blockcategories\category-tree-branch.tpl

but i didn't do anything generally usable.

Can anyone help?

[rocky]

Give the category you want to expand an ID like "default", then use code like the following to expand it by default:

<script type="text/javascript">
openBranch($('ul.tree.dhtml li.default'), true);
<script>

Change true to false if you don't want the animation.

[skulaluks]

Where can I assign the IDs of the categories of the tree that i want to have open by default?

i would make some changes in the line 37 or 38 of the \js\tools\treeManagement.js where is executed the code during the pageload, but i dont know what.

       //collapse every expanded branch
       $('ul.tree.dhtml span.grower.OPEN').addClass('CLOSE').removeClass('OPEN').parent().find('ul:first').hide();
       $('ul.tree.dhtml').show(); 

[rocky]

To add an ID to the categories, change line 1 of modules/blockcategories/category-tree-branch.tpl from:

 

<li {if isset($last) && $last == 'true'}class="last"{/if}>

 

to:

 

<li id="cat{$node.id}" {if isset($last) && $last == 'true'}class="last"{/if}>

[skulaluks]

Hi that is what i wanted, but it still doesnt work properly.
The only problem is that it works only for one category (The 1st one on the 0th level).
the second one is not opened.
I tried to call the javasctipt twice for more 0th level categories, but it always worked only for the first one:

       openBranch($('ul.tree.dhtml li#cat98'), true); 
               openBranch($('ul.tree.dhtml li#cat99'), true); 
       //mark this 'ul.tree' elements as already 'dynamized'

this bahaved same:

           toggleBranch($('ul.tree.dhtml li#cat98')); 
       toggleBranch($('ul.tree.dhtml li#cat99')); 
       //mark this 'ul.tree' elements as already 'dynamized'

[skulaluks]

I already tried many combination, byt it seems that the tree can have only one category preopened.

[skulaluks]

Please help, it doesnt work.
All my tree branches have assigned ids of their categories
(eg.

)

I tried to open the branch by calling javascript from firebug console, but

openBranch($('ul.tree.dhtml li#cat98'), true); 

doesnt work at all.

Can anyone please tell me what script should be call to open the branch?
Thank you

[vasikgreif]

Same here, the code does open the first category only... Any ideas what to do? Thanks

[skulaluks]

solved!

 

1. add an ID to the categories, change line 1 of modules/blockcategories/category-tree-branch.tpl to:

 

<li id="cat{$node.id}" {if isset($last) && $last == 'true'}class="last"{/if}>

 

to tag each branch with its own id.

 

2. add following javascript in the js/tools/treeManagement.js before the closing bracket} of the

 

$(document).ready(function ()

 

function:

 

if (window.location.pathname=='/')
 {
setTimeout("$('#cat99').children('span.grower').trigger('click')",500);
setTimeout("$('#cat98').children('span.grower').trigger('click')",1000);
 }

 

in my case it preopens category 99 and 98 with tiny delay of half of a second.

Edited May 19, 2012 by rocky
Added missing code (see edit history)

[skulaluks]

oh, here in this forum is some hacker censoring script that rewrote part of the solution code:
instead of [removed] use vindow.location with w

[vasikgreif]

Thanks, works like a charm! I have one more problem with this solution though. I would need to have the tree opened into one sublevel on all pages. I tried to delete the if ([removed].pathname=='/'), which makes the opening work on all pages, but it closes the branch where the sublevel is selected... Any ideas how to fix this?

[George K.]

does not work! i dont know why

[Artx]

Read carefuly, everything`s written. I can`t stand people has a problem and solution need`s to be feeded right in mouth.

And thank you Skulaluks, helped me too.

[navlaca]

Hello Rocky, I am very much interested by the solution of this query but unfortunatelly the code of your reply does not show on this topic (the text is hidden - problem may be linked to the upgrade of the forum).

Could you please give me the solution. Thank you very much in advance.

[vivek tripathi]

An another way to show category tree preopend

add following code at the top in modules->blockcategorie->blockcategories.tpl

<script type="text/javascript">
$(document).ready(function(){
 $('.grower').trigger('click')
});
</script>

 

 

[tehteh]

solved!

1. add an ID to the categories, change line 1 of modules/blockcategories/category-tree-branch.tpl to:

 

to tag each branch with its own id.

...

There is missing (empty) part about adding an ID to category. Can someone share the code how to do it?

[Jimmy S]

Can someone add the missing part in the solution?

[George K.]

dose this topc censored by some one >? where is the missing codes?

[rocky]

Seems it was lost in the transition to the new forum. I added my code back again.

[greek_batter]

Hello and sorry for the incovenience but still we cant see the added code...

[pecopico]

ummm gracias, pero mucho más fácil es En el backoffice > módules > bloque de categorias (configurar) y elegir "no dinámico" y poner una profundidad por ejemplo de 10. Ahora la tendrás abierta automáticamente.

[Sharak]

I managed to make this much simpler. Let's say we have 3 levels of categories:

Main category
 Subcategory
		 Sub-subcategory
 Subcategory
Main category
...

 

By default in dynamized mode only main categories are visible and has growers to expand. If you want main categories and subcategories be visible by default and only subcategories to have growers to show sub-subcategories you just need one small change in treeManagement.js (location: /themes/<your_theme>/js/tools/):

//add growers to each ul.tree elements
	$('ul.tree.dhtml ul').prev().before("<span class='grower OPEN'> </span>");

change to:

//add growers to each ul.tree elements
	$('ul.tree.dhtml ul il ul').prev().before("<span class='grower OPEN'> </span>");

Edited March 23, 2013 by Sharak (see edit history)

[pepe9o]

solved!

 

1. add an ID to the categories, change line 1 of modules/blockcategories/category-tree-branch.tpl to:

 

<li id="cat{$node.id}" {if isset($last) && $last == 'true'}class="last"{/if}>

 

to tag each branch with its own id.

 

2. add following javascript in the js/tools/treeManagement.js before the closing bracket} of the

 

$(document).ready(function ()

 

function:

 

if (window.location.pathname=='/')
 {
setTimeout("$('#cat99').children('span.grower').trigger('click')",500);
setTimeout("$('#cat98').children('span.grower').trigger('click')",1000);
 }

 

 

Hello all, sorry for digging this up. I have a problem with this "if". This one is not working.

How can i open this category only on my home page ? Or, if all categories are closed, this one have to be open.

Can someone help ?

[ErikSebastia2]

Hi,

 

How I can do to has only one category opened, I mean Colabsible. When you "click" in one category, it open the tree. After, when you click to another category, the previous category tree closes and the new are opened.

 

By default in treemanagement, does not have this function. When you click in one category, it still opened.

 

Thanks

 

Best regards

[rocky]

Sounds like you want my free Sliding Accordion Categories module, though it is designed for PrestaShop v1.4.x only. Send me a private message with your email address and I'll send it to you. I have a paid AJAX version that dynamically loads categories and is also designed for PrestaShop v1.4.x.

 

P.S. Woohoo! 10,000th post.

[ErikSebastia2]

Hi Rocky!

 

Congrat for you 10.000 posts!! Few days ago I send to you an email for the module, but I had to update the shop to 1.5.x and I need this feature in blockcategories module.

 

At this time, I have a shop on 1.4.9 with your module Sliding Accordion Categories. It's great module, but I have 2 problems with it: incompatibility with 1.5 and problems with old version of IE (7 and 6).

 

For this reason, I modified the blockcategories of PS with the same aparence of the S.A.C. and now the only problem is the opened trees.

 

 

 

Thanks

 

Best regards

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

[rocky]

I see. It looks like you'll have to write some JavaScript to .slideUp() all categories before you .slideDown() a category. Unfortunately, I'm focused on writing guides instead of coding at the moment. I'm currently working on writing a guide for how to use phpMyAdmin. Maybe when I write a PrestaShop Development Guide, I'll get back into some programming again.

[ErikSebastia2]

Yes, I need to modify the JavaScript file, treemanagement.js.

 

Someone knows how I had to modify it to do the collabsable option?

 

Thanks

[ErikSebastia2]

Up!

[richard655]

While skulaluks code does work for those of us who don't want a delay nor an animation is is not so great.

 

Change

 if (window.location.pathname=='/')
 {
setTimeout("$('#cat99').children('span.grower').trigger('click')",500);
setTimeout("$('#cat98').children('span.grower').trigger('click')",1000);
 }

to

		   	
	   	 if (window.location.pathname=='/')
	{
			// change grower class so you won't have to click twice to close the category
			$('li#cat2').children('span.grower').addClass('OPEN').removeClass('CLOSE');
			//show whatever menu you want
			$('li#cat2').children('ul').show();
	}

 

And you have categories that start open with no delay and with no animation.

[eduardofk]

Hello to all, I can´t make this possibly, I want to display the categories preopenned, till the first subcategory and then I want to show (in dynamic mode) the grower in the first subcategory that could display if user want and do click the third and maybe fourth category. Please help me. Thank you in advance

[ilovekutchi.com]

I managed to make this much simpler. Let's say we have 3 levels of categories:

Main category
	 Subcategory
			 Sub-subcategory
	 Subcategory
Main category
	...

By default in dynamized mode only main categories are visible and has growers to expand. If you want main categories and subcategories be visible by default and only subcategories to have growers to show sub-subcategories you just need one small change in treeManagement.js (location: /themes/<your_theme>/js/tools/):

//add growers to each ul.tree elements
		$('ul.tree.dhtml ul').prev().before("<span class='grower OPEN'> </span>");

change to:

//add growers to each ul.tree elements
		$('ul.tree.dhtml ul il ul').prev().before("<span class='grower OPEN'> </span>");

 

Thank you Sharak!! I could finally get it working in PS 1.5.6.2!

 

PS: however, your code has a typo: it should be "...ul li ul..." instead of "...ul il ul..."

Edited February 28, 2014 by ilovekutchi.com (see edit history)

[alano3city]

how to add class on page load to category which has expandable subcategories? i would like to highglight it by bolding.