Append Top Menu "Class" for each menu item

Store Builder Questions
1

Hello all. Im new to the CS Cart Community and i dont have a live store. Im experimenting in my localhost server using XAMPP. I made a quick hack to learn about cs card modification. Im new to the Smary Templates and The CS Cart development. If you have any sugestions please let me know. I will post later another way to do this by editing just a sigle line of code.

[SIZE=“5”]

[COLOR=“DarkOrange”]Description[/COLOR][/SIZE]

What the hack will do?

I will append a unique HTML class to each of your top menu item.

Example:

If your menu code is

[HTML]

  • Home
    • [/HTML]

    Will make it

    [HTML]
  • Home
    • [/HTML]



    Why you will need this hack?

    You will need it to do style customizations to your menu. Lets say you want to make the first menu item display a red link. You can select it in CSS by

    [HTML].menuid0 span a{ color: red; } [/HTML]

    Or you can use the “class” attribute to make some cool JavaScript menus.



    [SIZE=“5”]

    [COLOR=“DarkOrange”]How to make the Hack[/COLOR][/SIZE]

    1. Edit your top_menu.tpl in your current template. If you dont know where to find it use the CS Cart “Customization Feature” (AdminBackend → Design → Enable Customization mode)
    2. Line 2 Add a php variable that will keep the menu id starting from zero “0”
    {php}$menuid = 0;{/php}
```<br />
3) Line 8 Make the menuid variable be displayed on your menu by changin it to <br />
```php
	<li class="first-level menuid{php}echo $menuid;{/php}{if $m.selected == true} cm-active{/if}">
```<br />
4) Line 14 Just before you close the "{/foreach}" function increase the variable +1 by adding<br />
```php
{php}$menuid += 1;{/php}
```<br />
5) Save and test.<br />
<br />
Now you must have a menu looking something like this:<br />
[HTML]<li class="first-level menuid0 cm-active"><span><a href="home.html">Home</a></span></li><br />
<li class="first-level menuid1"><span><a href="item1.html">Item1</span></li><br />
<li class="first-level menuid2"><span><a href="item2.html">Item2</span></li>[/HTML]
    2

    The following link offers another approach to do this:

    [URL=“http://forum.cs-cart.com/showthread.php?t=19385”]http://forum.cs-cart.com/showthread.php?t=19385[/URL]

    3

    I was searching for the param_id variable but i could not find it my own. Any ideas how can i learn about CS cart variables? I tried implement FirePHP but no luck.



    Anyways… here is my full code of top menu tpl (I just added [COLOR=“SeaGreen”]id=“menu{$m.param_id}”[/COLOR] on line 8 )

    ```php {* $Id: top_menu.tpl 9353 2010-05-04 06:10:09Z klerik $ *}



    {if $top_menu}


    {strip}

      {foreach from=$top_menu item="m"}

    • {$m.item}
      {if $m.subitems}
      {include file="top_menu.tpl" items=$m.subitems top_menu="" dir=$m.param_4}
      {/if}

      • {/foreach}

    {/strip}


    {elseif $items}

      {assign var="foreach_name" value="cats_$iter"}
      {foreach from=$items item="_m" name=$foreach_name}

    • {$_m.item}
      {if $_m.subitems}
      {include file="top_menu.tpl" items=$_m.subitems top_menu="" dir=$_m.param_4 iter=$smarty.foreach.$foreach_name.iteration+$iter}
      {/if}

      • {if !$smarty.foreach.$foreach_name.last}

      • {/if}
      {/foreach}

    {/if} ```

    This will output with this code
    [HTML]
  • Home
    • [/HTML]

    Tip:
    Since it will be unique its better to use the ID html property. Also to have a valid HTML/CSS the ID propery must [B]not[/B] [URL="http://www.w3schools.com/tags/att_standard_id.asp"]start with a nubmer[/URL].So use my example and you will be ok.