Automatisch generiertes Produktmenü

Das automatisch generierte Produktmenü ist ein hierarchisches Listenmenü. Der Menübaum besteht aus verschachtelten <ul>-Aufzählungslisten mit einem <li>-Eintrag je Navigationspunkt, also je Kategorie. Der Vorteil gegenüber der Einzelpositionierung liegt im Aufwand. Sie geben ein einziges Tag an, den kompletten HTML-Code erzeugt der Shop zur Laufzeit. Sie müssen die Navigationspunkte also nicht einzeln anlegen, und neue Kategorien erscheinen ohne Änderung am Template. Auch die Gestaltung bleibt in Ihrer Hand. Der Shop weist jedem Navigationspunkt automatisch Style-Klassen für die verschiedenen Anzeigezustände zu, also aufgeklappt, zugeklappt und selektiert. Diese Klassen definieren Sie in Ihrer Styles-Datei. Für den Aufbau stehen zwei Tags zur Verfügung:

Tag	Zweck
`WS-ProductMenu()`	Produkt-Hauptmenü, angezeigt bis zu einer bestimmten Menüebene
`WS-ProductMenuIndex()`	Untermenü für bestimmte Menüebenen auf Basis eines Kategorie-Indexwerts

Beide Tags dürfen Sie mehrfach an verschiedenen Stellen eines Templates einsetzen, jeweils mit eigenen Parameterwerten. Binden Sie das Produktmenü in alle Shop-Templates ein, die Zugriff auf den Produktkatalog bieten sollen. Ein Template ohne dieses Tag zeigt keine Katalognavigation.

Produkt-Hauptmenü bis zu einer bestimmten Menüebene

Das Hauptmenü erzeugen Sie mit WS-ProductMenu(). Das folgende Beispiel zeigt ein Menü, das links in einer Sidebar steht und nur die oberste Ebene direkt anzeigt.

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

Nr.	Wert im Beispiel	Bedeutung
1	`sidebar_mainmenu`	Beschreibende Bezeichnung des Menüs, hier ein sidebar-positioniertes Hauptmenü. Sie wird als ID des umschließenden `div` ausgegeben.
2	`1`	Start-Ebene ist die oberste Menüebene.
3	`1`	Letzte direkt angezeigte Menüebene ist Ebene 1.
4	`show`	Die nächste Ebene unterhalb der aktuellen Menüebene wird zusätzlich angezeigt, sobald sie geöffnet ist.
5	`no`	Es werden keine `onMouseOver`- und `onMouseOut`-Ereignisse erzeugt. Das Menü besteht damit aus Links ohne Grafiken.
6	`0`	Kategorien außerhalb des ausgewählten Teilbaums erhalten keine Klassenzuordnung. Mit einem anderen Wert erhielten sie die Klasse `opened` wie die aktuell geöffneten Kategorien.

Der Shop erzeugt daraus schematisch den folgenden Code:

<!-- Der erste Parameter des Tags wird zur ID des div-Containers, die Style-Klasse setzt der Shop automatisch -->
<div id="sidebar_mainmenu" class="ws_menu">
   <!-- Aufzählungsliste für die Navigationspunkte der ersten Menüebene -->
   <ul class="level1">
        <li class="level1_li_1"><a href="http://Ihr_Domainname.websale.biz/Reiter.htm" title="Reiter">Reiter</a>
        </li>

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

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

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

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

Jedes <li> erhält automatisch eine Style-Klasse. Sie setzt sich aus der Bezeichnung des aktuellen Levels und einer Laufvariablen zusammen, im Beispiel also level1_li_1 bis level1_li_5. Diese Klassen nehmen Sie in Ihre Styles-Datei auf und gestalten sie nach Ihren Wünschen. Sollen zwei Ebenen direkt sichtbar sein, also die Hauptkategorien und ihre direkten Unterkategorien, setzen Sie den dritten Parameter auf 2:

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

Untermenü auf Basis eines Indexwerts

Steht Ihr Hauptmenü waagerecht am Seitenkopf, brauchen Sie für die Unterkategorien ein zweites, eigenständiges Menü. Genau dafür gibt es WS-ProductMenuIndex(). Das Tag baut ein Menü nicht ab der obersten Ebene auf, sondern ab einer Kategorie, die Sie über ihren Indexwert benennen. Im folgenden Beispiel erscheint links ein senkrechtes Untermenü, sobald der Besucher im waagerechten Hauptmenü eine Kategorie auswählt. Der Wert $_current_$ als erster Parameter sorgt dafür, dass genau die direkten Unterkategorien der zuletzt gewählten Kategorie verwendet werden.

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

Nr.	Wert im Beispiel	Bedeutung
1	$_current_$	Es werden nur die direkten Unterkategorien der zuletzt gewählten Kategorie verwendet.
2	`sidebar_submenu`	Beschreibende Bezeichnung des Menüs, hier ein sidebar-positioniertes Untermenü.
3	`1`	Es wird nur eine Menüebene direkt angezeigt, nämlich die erste Untermenü-Ebene.
4	`show`	Die nächste Ebene unterhalb der aktuellen Menüebene wird zusätzlich angezeigt, sobald sie geöffnet ist. Das gilt für alle Ebenen bis zu der in Parameter 3 festgelegten.
5	`no`	Es werden keine `onMouseOver`- und `onMouseOut`-Ereignisse erzeugt.
6	`0`	Kategorien außerhalb des ausgewählten Teilbaums erhalten keine Klassenzuordnung.

Wegweiser: Frei positioniertes Produktmenü

​Produkt-Hauptmenü bis zu einer bestimmten Menüebene

​Untermenü auf Basis eines Indexwerts

Produkt-Hauptmenü bis zu einer bestimmten Menüebene

Untermenü auf Basis eines Indexwerts