> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Automatisch generiertes Produktmenü

> Wie Sie in WEBSALE V8s mit WS-ProductMenu() und WS-ProductMenuIndex() ein hierarchisches Listenmenü für den Warenkatalog erzeugen lassen.

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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ProductMenu(sidebar_mainmenu,1,1,show,no,0)~
```

![Pm Autobeispiel1](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=ee4e0597caeee0a5ef60dceccac7d919)

| 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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- 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`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ProductMenu(sidebar_mainmenu,1,2,show,no,0)~
```

![Pm Autobeispiel1variante](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1variante.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=2785b040f5946ebde4f0324dfeaa7f8c)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ProductMenuIndex($_current_$,sidebar_submenu,1,show,no,0)~
```

![Submenu Current](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/submenu_current.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=74c37f0e1a12560d4239ed9466f73786)

| 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ü](https://dokumentation.websale.de/v8s/navigation/frei-positioniertes-produktmenue.md)


## Related topics

- [Anzahl der Produkte pro Seite](https://dokumentation.websale.de/v8s/kategorien/anzahl-der-produkte-pro-seite.md)
- [Frei positioniertes Produktmenü](https://dokumentation.websale.de/v8s/navigation/frei-positioniertes-produktmenue.md)
- [Navigation](https://dokumentation.websale.de/v8s/navigation.md)
- [PM- (Produktmenü)](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md)
- [Standardgrafiken](https://dokumentation.websale.de/v8s/einstellungen/standardgrafiken.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.