Skip to main content
With the $wsNavigation module, you can read out and display the customer’s current navigation path (breadcrumb) in the shop. The breadcrumb shows the customer where they are in the category structure and enables easy navigation to parent categories.

​
Module overview

Example / excerpt of $wsNavigation 
{{= $wsNavigation | json }}
JSON output 
{
  "path": [
    {
      "type": "category",
      "object": {
        "id": "...",
        "name": "...",
        "descr": "...",
        "active": "...",
        "hidden": false,
        "productsCount": 0,
        "custom": { },
        "timestampCreatedAt": "...",
        "timestampUpdatedAt": "...",
        "productAssignmentType": "...",
        "productRules": "..."
      }
    }
  ]
}
Variables overview
VariableTypeDescription
patharrayPath in the category tree, indicating where you have navigated in the shop.
[$i].typestringType of the corresponding position in the path.
[$i].objectmapCategory or product map.
Note: The properties of object depend on the type:
  • For type category, all properties from $wsCategories are available.
  • For type product, all properties from $wsProducts are available.
  • Only the last element in the path can be of type product.

​
Templates

By default, the breadcrumb is loaded in a separate file breadcrumb.htm so that the same breadcrumb can be displayed everywhere in the shop. This file is typically included in the layout template.

​
Variables

​
$wsNavigation.path

List of navigation elements (breadcrumb) from the home page to the current position. 
Path: {{= $wsNavigation.path | json }}

​
wsNavigation.path\[wsNavigation.path\[i].type

Returns the type of the position in the path: "category" or "product". 
Type: {{= $wsNavigation.path[0].type }}

​
wsNavigation.path\[wsNavigation.path\[i].object

Returns the category or product map. For categories, this corresponds to the category map; for products, the product map. You can thus access properties such as name, id, or custom. 
Name: {{= $wsNavigation.path[0].object.name }}

​
Methods

No methods are available for $wsNavigation.

​
Actions

No actions are available for $wsNavigation.

​
Examples for using the navigation data

To view the available data of the breadcrumb navigation, you can have it output in a JSON-like format. This is helpful to understand the structure and contents of the breadcrumb navigation or to debug errors.

​
Example for displaying the breadcrumb

In this example, the $wsNavigation module is used to display the current position of the shop customer in the menu structure of the page they are visiting. 
{{ foreach $part in $wsNavigation.path }}
    {{ var $url = "" }}
    {{ if $part.type == "product" }}
        {{ $url = $wsViews.url("Product", {productId: $part.object.id}) }}
    {{ else }}
        {{ $url = $wsViews.url("Category", {id: $part.object.id}) }}
    {{ /if }}
   <span itemprop="title">{{= $part.object.name }}</span>
{{ /foreach }
This example shows how the last element of a breadcrumb is generated with or without a link. 
{{ foreach $part in $wsNavigation.path }}
    {{ var $url = "" }}
    ...
    {{ var $last = $part is $wsNavigation.path|last }}
   {{ if not $last }}<a href="{{= $url }}" itemprop="url">{{/if}}
      <span itemprop="title">{{= $part.object.name }}</span>
   {{ if not $last }}</a>{{/if}}
{{ /foreach }}