Skip to main content

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.

​
Hauptmenü

Frei designbare Navigation durch das Produktsortiment, z. B.
  • horizontale Navigation
  • alternativ oder zusätzlich: Vertikale (seitliche) Navigation
  • Drop-Down-Menü (Aufklapp-Menü): Erst wenn die Hauptkategorie gewählt ist, öffnen sich die Unterkategorien
  • Mega-Drop-Down-Menü: großflächiges, vertikal oder horizontal (Flyout) aufklappendes Menü, meist mit mehreren Gruppen von Navigationsoptionen, ggf. unterstützt durch Icons
  • Sticky-Menü: Menü folgt dem scrollenden Shop-Kunden
  • Burger-Menü: Menü-Icon in Form von 3 horizontalen kurzen Linien in der Bildschirmecke von (meist mobilen) Endgeräten
  • Off Canvas: seitliche einfahrende Navigation für mobile Darstellungen

​
Kategorien Laden

Um die Kategorien im Menü darzustellen, werden die Kategorien aus dem Modul $wsCategories mithilfe einer foreach Schleife geladen. Die Unterkategorien können anschließend ebenfalls in verschachtelten Schleifen auf die gleiche Weise eingelesen werden.

​
Anwendungsbeispiele

​
Kategorie Level 1

In diesem Beispiel werden die Level 1 Kategorien geladen und als Links ausgegeben. 
{{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
  <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
{{ /foreach }}

​
Unterkategorien

In diesem Beispiel werden zusätzlich die Unterkategorien geladen und als Links ausgegeben. 
{{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
	<a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
	{{ if $wsCategories.loadChildren($cCatLevel1.id) }}
		{{ foreach $cCatLevel2 in $wsCategories.loadChildren($cCatLevel1.id) }}
			<a href="{{= $wsViews.url('Category', {id: $cCatLevel2.id}) }}">{{= $cCatLevel2.name }}</a>
		{{ /foreach }}
	{{ /if }}
{{ /foreach }}

​
Auf aktive Kategorie Prüfen

Es kann überprüft werden, ob die aktuell angezeigte Kategorie der Kategorie im Menü entspricht. Dazu werden zunächst die Kategoriedaten aus dem $wsViews Modul geladen und die ID der Kategorie einer Variablen zugewiesen. Durch eine IF Bedingung kann der Verlinkung eine CSS Klasse vergeben werden.

​
Anwendungsbeispiel

{{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
  {{ var $view = $wsViews.current }}
  {{ var $currentCategory = $view.info.category.id }}
  <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}" class="{{if $currentCategory == $cCatLevel1.id }}active{{ /if }}">{{= $cCatLevel1.name }}</a>
{{ /foreach }}

<ul>
   {{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
      {{ if $wsCategories.loadChildren($cCatLevel1.id) }}
         <li data-pm-index="{{= $cCatLevel1.id }}">
            <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
            <ul>
               {{ foreach $cCatLevel2 in $wsCategories.loadChildren($cCatLevel1.id) }}
                  <li>
                     <a href="{{= $wsViews.url('Category', {id: $cCatLevel2.id}) }}">{{= $cCatLevel2.name }}</a>
                  </li>
               {{ /foreach }}
            </ul>
         </li>
         {{ else }}
         <li>
            <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
         </li>
      {{ /if }}
   {{ /foreach }}
</ul>