Zum Hauptinhalt springen
Freely designable navigation through the product range, e.g.
  • horizontal navigation
  • alternatively or additionally: vertical (side) navigation
  • drop-down menu: only when the main category is selected do the subcategories open
  • mega drop-down menu: a large vertically or horizontally (flyout) expanding menu, usually with several groups of navigation options, possibly supported by icons
  • sticky menu: the menu follows the scrolling shop customer
  • burger menu: a menu icon in the form of 3 short horizontal lines in the corner of the screen of (mostly mobile) devices
  • off canvas: side-sliding navigation for mobile views

​
Loading categories

To display the categories in the menu, the categories from the $wsCategories module are loaded using a foreach loop. The subcategories can then also be read in the same way in nested loops.

​
Usage examples

​
Category level 1

In this example, the level 1 categories are loaded and output as links. 
{{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
  <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
{{ /foreach }}

​
Subcategories

In this example, the subcategories are additionally loaded and output as links. 
{{ 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 }}

​
Checking for the active category

You can check whether the currently displayed category matches the category in the menu. To do this, the category data is first loaded from the $wsViews module and the ID of the category is assigned to a variable. Through an IF condition, the link can be assigned a CSS class.

​
Usage example

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