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.
Ü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ü
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 <head> 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.
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 imclass-Attribut auf:
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-DataLevel(n) die aktuelle Ebene ab und geben je Ebene eigenes Markup aus.
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.
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.
Vollständiges Beispiel
Das folgende Beispiel erzeugt dieselbe Menüstruktur wie das Beispiel zu Methode 1, diesmal über vier verschachtelte Ebenenbereiche.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.Zwei Ebenen direkt anzeigen
Sollen die Hauptkategorien und ihre direkten Unterkategorien von Anfang an sichtbar sein, ändern Sie nur den dritten Parameter des Ladetags auf2. Weder am Quellcode noch an den Styles ist eine Änderung nötig, und das gilt für beide Ausgabemethoden gleichermaßen.
Untermenü auf Basis eines Indexwerts
Steht Ihr Hauptmenü waagerecht am Seitenkopf, laden Sie das senkrechte Untermenü mitWS-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.
Kategorie-Informationen im Produktmenü verwenden
Innerhalb des Produktmenüs sind CAT-Tags nicht zulässig. Eine Konstruktion wie diese funktioniert deshalb nicht:@PM-DataComplete als auch in @PM-DataLevel1 bis @PM-DataLevel10.
- Referenz: PM-Descr
- Referenz: PM-FreeField1…20
- Referenz: PM-OverviewImg