Automatically generated product menu

The automatically generated product menu is a hierarchical list menu. The menu tree consists of nested <ul> unordered lists with one <li> entry per navigation item, that is, per category. The advantage over individual positioning lies in the effort. You specify a single tag; the shop generates the complete HTML at runtime. So you do not have to set up the navigation items individually, and new categories appear without any change to the template. Styling also remains in your hands. The shop automatically assigns each navigation item style classes for the different display states, that is, opened, closed, and selected. You define these classes in your styles file. Two tags are available for the structure:

Tag	Purpose
`WS-ProductMenu()`	Product main menu, displayed up to a specific menu level
`WS-ProductMenuIndex()`	Submenu for specific menu levels based on a category index value

You may use both tags multiple times at different positions in a template, each with its own parameter values.

Include the product menu in all shop templates that are to provide access to the product catalog. A template without this tag shows no catalog navigation.

You generate the main menu with WS-ProductMenu(). The following example shows a menu placed on the left in a sidebar that displays only the topmost level directly.

~WS-ProductMenu(sidebar_mainmenu,1,1,show,no,0)~

No.	Value in the example	Meaning
1	`sidebar_mainmenu`	Descriptive name of the menu, here a sidebar-positioned main menu. It is output as the ID of the surrounding `div`.
2	`1`	Start level is the topmost menu level.
3	`1`	Last directly displayed menu level is level 1.
4	`show`	The next level below the current menu level is additionally displayed as soon as it is opened.
5	`no`	No `onMouseOver` and `onMouseOut` events are generated. The menu therefore consists of links without graphics.
6	`0`	Categories outside the selected subtree receive no class assignment. With a different value they would receive the `opened` class like the currently opened categories.

The shop generates the following code schematically from this:

<!-- The first parameter of the tag becomes the ID of the div container, the style class is set automatically by the shop -->
<div id="sidebar_mainmenu" class="ws_menu">
   <!-- Unordered list for the navigation items of the first menu level -->
   <ul class="level1">
        <li class="level1_li_1"><a href="http://Your_domain_name.websale.biz/Reiter.htm" title="Reiter">Reiter</a>
        </li>

        <li class="level1_li_2"><a href="http://Your_domain_name.websale.biz/Pferd.htm" title="Pferd">Pferd</a>
        </li>

        <li class="level1_li_3"><a href="http://Your_domain_name.websale.biz/Stall-%26-Weide.htm" title="Stall &amp; Weide">Stall &amp; Weide</a>
        </li>

        <li class="level1_li_4"><a href="http://Your_domain_name.websale.biz/NEU.htm" title="Neuheiten">Neuheiten</a>
        </li>

        <li class="level1_li_5"><a href="http://Your_domain_name.websale.biz/Aktionen.htm" title="Aktionen">Aktionen</a>
        </li>
   </ul>
</div>

Each <li> is automatically given a style class. It is composed of the name of the current level and a running variable, in the example level1_li_1 to level1_li_5. You add these classes to your styles file and design them to your liking. If two levels are to be directly visible, that is, the main categories and their direct subcategories, set the third parameter to 2:

~WS-ProductMenu(sidebar_mainmenu,1,2,show,no,0)~

Reference: WS-ProductMenu()

Submenu based on an index value

If your main menu is horizontal at the top of the page, you need a second, standalone menu for the subcategories. This is exactly what WS-ProductMenuIndex() is for. This tag does not build a menu from the topmost level but from a category that you identify via its index value. In the following example, a vertical submenu appears on the left as soon as the visitor selects a category in the horizontal main menu. The value $_current_$ as the first parameter ensures that exactly the direct subcategories of the most recently selected category are used.

~WS-ProductMenuIndex($_current_$,sidebar_submenu,1,show,no,0)~

No.	Value in the example	Meaning
1	$_current_$	Only the direct subcategories of the most recently selected category are used.
2	`sidebar_submenu`	Descriptive name of the menu, here a sidebar-positioned submenu.
3	`1`	Only one menu level is displayed directly, namely the first submenu level.
4	`show`	The next level below the current menu level is additionally displayed as soon as it is opened. This applies to all levels up to the one defined in parameter 3.
5	`no`	No `onMouseOver` and `onMouseOut` events are generated.
6	`0`	Categories outside the selected subtree receive no class assignment.

Reference: WS-ProductMenuIndex() Guide: Freely positioned product menu

​Product main menu up to a specific menu level

​Submenu based on an index value

Product main menu up to a specific menu level

Submenu based on an index value