Append Top Menu "Class" for each menu item

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.



What the hack will do?

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


If your menu code is


  • Home
  • [/HTML]

    Will make it

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


    [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 />
    	<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}$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]

    The following link offers another approach to do this:


    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}


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

    • {/foreach}


    {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 !$smarty.foreach.$foreach_name.last}

    • {/if}

    {/if} ```

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

    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=""]start with a nubmer[/URL].So use my example and you will be ok.