> ## 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. # Frei positioniertes Produktmenü > Wie Sie in WEBSALE V8s ein Produktmenü aus Bereichen und Schleifen selbst aufbauen, mit PM-DataComplete oder mit PM-DataLevel1 bis PM-DataLevel10. Diese Seite beschreibt den zweiten der beiden Menütypen. Beim ersten Typ erzeugt ein einziges Tag das fertige Listenmenü, hier bauen Sie das Menü dagegen selbst aus Bereichen und Schleifen auf und können jeden Navigationspunkt einzeln positionieren und gestalten. Der Ablauf ist immer derselbe. Zuerst laden Sie den Menübaum mit einem Tag vor. Danach geben Sie ihn mit Bereichen und Schleifen so aus, wie Sie es brauchen. Binden Sie das Produktmenü in alle Shop-Templates ein, die Zugriff auf den Produktkatalog bieten sollen. Ein Template ohne dieses Konstrukt zeigt keine Katalognavigation. ## Schritt 1: Menübaum vorladen Ohne vorgeladenen Menübaum bleiben alle Bereiche und Schleifen leer. Dafür stehen zwei Tags zur Verfügung, die den Tags des automatisch generierten Menüs entsprechen und dieselben Parameter haben. | Tag | Zweck | | - | - | | `WS-LoadProductMenu()` | lädt ein Hauptmenü mit direkter Anzeige bis zu einer bestimmten Menüebene | | `WS-LoadProductMenuIndex()` | lädt eine Untermenü-Struktur für bestimmte Menüebenen auf Basis eines Indexwerts | Über die Parameter legen Sie unter anderem die Start-Ebene und die End-Ebene fest. Die Bedeutung der einzelnen Parameter ist beim automatisch generierten Produktmenü beschrieben und gilt hier unverändert. Wegweiser: [Automatisch generiertes Produktmenü](https://dokumentation.websale.de/v8s/navigation/automatisch-generiertes-produktmenue.md) Setzen Sie den fünften Parameter auf `yes` und nutzen damit die MouseOver-Funktion, benötigen Sie die WEBSALE JavaScript-Bibliothek ab Version 1.8.1. Sie muss im `` jedes Templates eingebunden sein, das dieses Produktmenü enthält. ## Schritt 2: Ausgabemethode wählen Für die Ausgabe gibt es zwei Methoden. Sie unterscheiden sich vor allem im Pflegeaufwand, wenn der Produktkatalog wächst. | Methode | Aufbau | Sinnvoll, wenn | | - | - | - | | `PM-DataComplete` | ein Bereich und eine Schleife für alle Ebenen | neue Kategorien und Ebenen ohne Template-Änderung erscheinen sollen | | `PM-DataLevel1` bis `PM-DataLevel10` | ein verschachtelter Bereich je Ebene | Sie die Verschachtelung im HTML selbst kontrollieren möchten | Beide Methoden erreichen eine Tiefe von bis zu zehn Ebenen, also das Hauptmenü und bis zu neun Untermenü-Ebenen. Wie viele davon tatsächlich erscheinen, entscheiden die Parameter des Ladetags. ### Die Status-Klassen verstehen In allen folgenden Beispielen taucht dasselbe Konstrukt im `class`-Attribut auf: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} class="level1{PM-IsOpened}_opened{/PM-IsOpened}{PM-IsClosed}_closed{/PM-IsClosed}{PM-IsSelected}_selected{/PM-IsSelected}" ``` Der Klassenname wird dabei aus zwei Teilen zusammengesetzt. Den festen Teil, hier `level1`, schreiben Sie selbst. Den Zusatz liefert genau einer der drei Bereiche, je nachdem, in welchem Zustand der Navigationspunkt gerade ist. Herauskommt also `level1_opened`, `level1_closed` oder `level1_selected`. Genau diese Klassen gestalten Sie anschließend in Ihrer Styles-Datei. ## Methode 1: Ausgabe mit PM-DataComplete Diese Methode ist die pflegeärmste. Ein Bereich und eine Schleife genügen, um alle vorhandenen und alle künftig hinzukommenden Menüebenen mit sämtlichen Navigationspunkten auszugeben. Wächst der Katalog um eine Ebene, müssen Sie das Template nicht anfassen, sofern die Parameterwerte des Ladetags die neue Ebene abdecken. ![Pm Autobeispiel1 2](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1-2.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=98a02579bec4ea85a656efa820858f3c) ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataComplete} {@PM-DataComplete} ~PM-Name~ {/@PM-DataComplete} {/PM-DataComplete} ``` Der Preis dafür ist, dass alle Ebenen zunächst gleich aussehen. Sollen sie sich unterscheiden, fragen Sie innerhalb der Schleife mit `PM-DataLevel(n)` die aktuelle Ebene ab und geben je Ebene eigenes Markup aus. > [!WARNING] > > Verwechseln Sie `PM-DataLevel(1)` nicht mit `PM-DataLevel1`. Die Schreibweise mit Klammern ist eine Abfrage innerhalb der `PM-DataComplete`-Schleife und prüft, auf welcher Ebene der aktuelle Navigationspunkt liegt. Die Schreibweise ohne Klammern ist dagegen ein eigener Bereich und gehört zu Methode 2. ### Vollständiges Beispiel Das folgende Beispiel gibt vier Ebenen mit jeweils eigener Gestaltung aus. Das Ladetag zeigt zunächst nur die oberste Ebene direkt an. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenu(sidebar_mainmenu,1,1,show,no,0)~ {PM-DataComplete} {/PM-DataComplete} ``` Die passenden Styles finden Sie weiter unten im Abschnitt "Styles zu den Beispielen". ![Pm Autobeispiel1variante 1](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1variante-1.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=3de34c765cc1567ec11e9b9b506c3d86) Referenz: [PM- (Produktmenü)](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md) ## Methode 2: Ausgabe mit PM-DataLevel1 bis PM-DataLevel10 Bei dieser Methode legen Sie für jede Ebene einen eigenen Bereich an und verschachteln diese ineinander. Der Vorteil ist die volle Kontrolle über das erzeugte HTML, weil die Verschachtelung Ihrer Bereiche der Verschachtelung des Menüs entspricht. Der Nachteil ist der Pflegeaufwand: Kommt eine Kategorieebene hinzu, müssen Sie den passenden Bereich samt Schleife ergänzen. Jede Ebene besteht dabei aus zwei ineinanderliegenden Marken. Der äußere Bereich `{PM-DataLevelN}` prüft, ob auf dieser Ebene überhaupt Navigationspunkte vorhanden sind. Die innere Schleife `{@PM-DataLevelN}` läuft dann über alle vorhandenen und sichtbaren Punkte dieser Ebene. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataLevel1} {@PM-DataLevel1} ~PM-Name~ {PM-DataLevel2} {@PM-DataLevel2} ~PM-Name~ {PM-DataLevel3} {@PM-DataLevel3} ~PM-Name~ {/@PM-DataLevel3} {/PM-DataLevel3} {/@PM-DataLevel2} {/PM-DataLevel2} {/@PM-DataLevel1} {/PM-DataLevel1} ``` ### Vollständiges Beispiel Das folgende Beispiel erzeugt dieselbe Menüstruktur wie das Beispiel zu Methode 1, diesmal über vier verschachtelte Ebenenbereiche. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenu(sidebar_mainmenu,1,1,show,no,0)~ ``` ## Styles zu den Beispielen Die folgenden Styles gelten für beide vollständigen Beispiele, weil beide dieselben Klassennamen erzeugen. Das ist kein Zufall, sondern der Grund, warum Sie die Ausgabemethode wechseln können, ohne Ihr Stylesheet anzufassen. ```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} /* Angaben für den umschließenden DIV-Container */ #sidebar_mainmenu { width: 210px; font-size: 13px; } /* Angaben für die Überschrift */ #sidebar_mainmenu h1 { font-size: 13px; color: #2b569a; padding: 8px 0px 8px 0px; margin: 0px 0px 0px 0px; border-bottom: 1px dotted #2b569a; } /* Angaben für alle Verlinkungen innerhalb des umschließenden DIV-Containers */ #sidebar_mainmenu a { display: block; color: #2b569a; text-decoration: none; padding: 8px 0px 8px 5px; border-bottom: 1px solid #2b569a; } /* Angaben für die Darstellung der ersten Ebene (Hauptmenüpunkte) */ #sidebar_mainmenu a.level1_closed:hover, #sidebar_mainmenu a.level1_opened, #sidebar_mainmenu a.level1_selected { background: #2c579b; color: #fff; } /* Angaben für die Darstellung der zweiten Ebene (Level2) */ #sidebar_mainmenu a.level2_opened, #sidebar_mainmenu a.level2_closed, #sidebar_mainmenu a.level2_closed:hover, #sidebar_mainmenu a.level2_selected { background: #dddddd; border-bottom: 1px solid #fff; padding: 8px 0px 8px 20px; } #sidebar_mainmenu a.level2_opened, #sidebar_mainmenu a.level2_closed:hover, #sidebar_mainmenu a.level2_selected { background: #f7cd77; } /* Angaben für die Darstellung der dritten Ebene (Level3) */ #sidebar_mainmenu a.level3_opened, #sidebar_mainmenu a.level3_closed, #sidebar_mainmenu a.level3_closed:hover, #sidebar_mainmenu a.level3_selected { background: #dddddd; border-bottom: 1px solid #cccccc; padding: 8px 0px 8px 30px; } #sidebar_mainmenu a.level3_opened, #sidebar_mainmenu a.level3_closed:hover, #sidebar_mainmenu a.level3_selected { color: #ff0000; } /* Angaben für die Darstellung der vierten Ebene (Level4) */ #sidebar_mainmenu a.level4_opened, #sidebar_mainmenu a.level4_closed, #sidebar_mainmenu a.level4_closed:hover, #sidebar_mainmenu a.level4_selected { background: #efedee; border-bottom: 1px solid #bbc5cf; padding: 8px 0px 8px 45px; } #sidebar_mainmenu a.level4_opened, #sidebar_mainmenu a.level4_closed:hover, #sidebar_mainmenu a.level4_selected { background: #ffe5b2; } ``` ## Zwei Ebenen direkt anzeigen Sollen die Hauptkategorien und ihre direkten Unterkategorien von Anfang an sichtbar sein, ändern Sie nur den dritten Parameter des Ladetags auf `2`. Weder am Quellcode noch an den Styles ist eine Änderung nötig, und das gilt für beide Ausgabemethoden gleichermaßen. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenu(sidebar_mainmenu,1,2,show,no,0)~ ``` ## Untermenü auf Basis eines Indexwerts Steht Ihr Hauptmenü waagerecht am Seitenkopf, laden Sie das senkrechte Untermenü mit `WS-LoadProductMenuIndex()`. Der Wert `$_current_$` als erster Parameter sorgt dafür, dass nur die direkten Unterkategorien der zuletzt gewählten Kategorie verwendet werden. Weil das Menü damit bereits bei den Unterkategorien beginnt, steht der dritte Parameter auf `1`. Die Ausgabe selbst unterscheidet sich nicht. Sie verwenden dieselben Bereiche und Schleifen wie oben, nur in einem eigenen Container. ![Submenu Current 1](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/submenu_current-1.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=61b079dd6360ebb6de55d15a813f4064) ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenuIndex($_current_$,sidebar_submenu,1,show,no,0)~ ``` > [!WARNING] > > Die Ebenenzählung beginnt in diesem Menü wieder bei 1. `PM-DataLevel1` bezeichnet hier also nicht die Hauptkategorien, sondern die erste im Untermenü angezeigte Kategorieebene. Vergeben Sie die Styles entsprechend unter einer eigenen Container-ID, damit sie sich nicht mit denen des Hauptmenüs überschneiden. ## Kategorie-Informationen im Produktmenü verwenden Innerhalb des Produktmenüs sind CAT-Tags nicht zulässig. Eine Konstruktion wie diese funktioniert deshalb nicht: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataLevel1} {@PM-DataLevel1} {/@PM-DataLevel1} {/PM-DataLevel1} ``` Das gilt für jede Kategorie-Information, die Sie im Produktmenü ausgeben möchten. Verwenden Sie stattdessen die entsprechenden PM-Tags. Diese funktionieren in allen Schleifen des Produktmenüs, also sowohl in `@PM-DataComplete` als auch in `@PM-DataLevel1` bis `@PM-DataLevel10`. ![20180606 Kat Info In Produktmenu](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/20180606_kat_info_in_produktmenu.png?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=8caae73a53e707b8d98583059cc3b1c8) ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataLevel1} {@PM-DataLevel1} ~PM-Name~ ~PM-Name~ {/@PM-DataLevel1} {/PM-DataLevel1} ``` Referenz: [PM-AdvNavImg](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md#die-tags-im-uberblick) * Referenz: [PM-Descr](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md#die-tags-im-uberblick) * Referenz: PM-FreeField1…20 * Referenz: [PM-OverviewImg](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md#die-tags-im-uberblick) ## Weitere Gestaltungsbeispiele Materialien: [Materialien für Produktmenüs](https://dokumentation.websale.de/v8s/materialien/materialien-produktmenues.md) ## Related topics - [Anzahl der Produkte pro Seite](https://dokumentation.websale.de/v8s/kategorien/anzahl-der-produkte-pro-seite.md) - [Automatisch generiertes Produktmenü](https://dokumentation.websale.de/v8s/navigation/automatisch-generiertes-produktmenue.md) - [Materialien Produktmenüs](https://dokumentation.websale.de/v8s/materialien/materialien-produktmenues.md) - [Unterkategorien einer Kategorie](https://dokumentation.websale.de/v8s/kategorien/unterkategorien-einer-kategorie.md) - [PM- (Produktmenü)](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.