[SOLVED] Categories block: assing ID to each category <li>

[jordiob]

Hi!

I'd like to assing an ID or CLASS to every item on my dropdown menu, so I can assign styles to every one of them

Now, my menu looks like this

></pre>
<ul>
option 1
option 2
option 3
option 4
option 5
last option

And I'd need something like

></pre>
<ul>
option 1
option 2
option 3
option 4
option 5
last option

Any clues?

Thanks a lot

[rocky]

It's hard to be specific without actually looking at your dropdown code. I suggest using something like this:

{$name}

This will create opt1, opt2, etc classes for each option using the ID.

[jordiob]

Thanks!

The point is, I don't have the generating code in my tpl files, they look like this

category-tree-branch.tpl

>
{$node.name|escape:html:'UTF-8'}
   {if $node.children|@count > 0}
</pre>
<ul>
       {foreach from=$node.children item=child name=categoryTreeBranch}
           {if $smarty.foreach.categoryTreeBranch.last}
                       {include file=$branche_tpl_path node=$child last='true'}
           {else}
                       {include file=$branche_tpl_path node=$child last='false'}
           {/if}
       {/foreach}
</ul>
<br>   {/if

blockcategories-tpl

[removed][removed]

<!-- Block categories module -->



       {foreach from=$blockCategTree.children item=child name=blockCategTree}
           {if $smarty.foreach.blockCategTree.last}
                       {include file=$branche_tpl_path node=$child last='true'}
           {else}
                       {include file=$branche_tpl_path node=$child}
           {/if}
       {/foreach}



[removed]
// <![CDATA[
   // we hide the tree only if JavaScript is activated
   $('div#categories_block_left ul.dhtml').hide();
// ]]>
[removed]
<!-- /Block categories module -->

And the .js

//animate the opening of the branch (span.grower jQueryElement)
function openBranch(jQueryElement, noAnimation) {
       jQueryElement.addClass('OPEN').removeClass('CLOSE');
       if(noAnimation)
           jQueryElement.parent().find('ul:first').show();
       else
           jQueryElement.parent().find('ul:first').slideDown();
}
//animate the closing of the branch (span.grower jQueryElement)
function closeBranch(jQueryElement, noAnimation) {
   jQueryElement.addClass('CLOSE').removeClass('OPEN');
   if(noAnimation)
       jQueryElement.parent().find('ul:first').hide();
   else
       jQueryElement.parent().find('ul:first').slideUp();
}

//animate the closing or opening of the branch (ul jQueryElement)
function toggleBranch(jQueryElement, noAnimation) {
   if(jQueryElement.hasClass('OPEN'))
       closeBranch(jQueryElement, noAnimation);
   else
       openBranch(jQueryElement, noAnimation);
}

//when the page is loaded...
$(document).ready(function () {
   //to do not execute this script as much as it's called...
   if(!$('ul.tree.dhtml').hasClass('dynamized'))
   {
       //add growers to each ul.tree elements
       $('ul.tree.dhtml ul').prev().before(" ");

       //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 span.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().prev(), true);
           });
           toggleBranch( $('ul.tree.dhtml .selected').prev(), true);

       //add a fonction on clicks on growers
       $('ul.tree.dhtml span.grower').click(function(){
           toggleBranch($(this));
       });
       //mark this 'ul.tree' elements as already 'dynamized'
       $('ul.tree.dhtml').addClass('dynamized');

       $('ul.tree.dhtml').removeClass('dhtml');
   }
});

[rocky]

It's the first line of category-tree-branch.tpl:

Change it to:

Then you can use li.cat1, li.cat2, etc.

[jordiob]

Sir, you made this newbie poster a happy man.
Thanks a lot for the help

[silvianna]

and How to assign ID or CLASS on li of sub children / sub category?

>
{$node.name|escape:htmlall:'UTF-8'}
   {if $node.children|@count > 0}
</pre>
<ul>
       {foreach from=$node.children item=child name=categoryTreeBranch}
           {if $smarty.foreach.categoryTreeBranch.last}
           {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
           {else}
           {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
           {/if}
       {/foreach}
</ul>
<br>   {/if}<br

[rocky]

The template is called recursively, so the subcategories should already have classes.

[silvianna]

I mean, what I need is to assign different background image of each sub category, how to do that?

[rocky]

Just set a different background for each ID. It doesn't matter whether it is a main category or subcategory. For example:

li.cat2 { background: url(../img/cat2.jpg) }
li.cat3 { background: url(../img/cat3.jpg) }

[siomer]

Hi, I have problem with this combination of code. I'm using "prestashop" template. I have change it for my graphics. And when I editing the category_tree_branch.tpl file as rocky says with code:

it is not showing on my site that li of each category have own specific class. The li class haven't any class...

Please rocky or anyone here. Help Me

Link to my site is top-level.tl/bill


OK I SOLVED MY PROBLEM.

CHANGE OF THIS CODE IS IN MODULES/BLOCKCATEGORIES/ NOT IN YOUR TEMPLATE PATH

[sakrafanas]

Hello, who can tell what do i need to modify to show li with id's? Posted code with explanation is not visible anymore.