In diesem Abschnitt finden Sie alle Möglichkeiten, um auf die Daten von Navigationselementen zuzugreifen. Es werden die verfügbaren Variablen und Tags beschrieben, mit denen Sie die Navigationselemente dynamisch im Frontend anzeigen können.

Inhaltsübersicht

1 Breadcrumb-Navigation
2 Breadcrumb-Template
3 Blätterfunktion (Pagination)
4 Schrittweise Navigation (im Bestellablauf)
5 Interne Links/Links im Text
6 Footer-Navigation
7 Navigation auf einer Seite (Anker, Sprungmarken)
8 Wechseln der Sprache
9 Referenz

Breadcrumb-Navigation

Um die verfügbaren Daten der Breadcrumb-Navigation einzusehen, können Sie sich diese in einem JSON-ähnlichen Format ausgeben lassen. Dies ist hilfreich, um die Struktur und Inhalte der Breadcrumb-Navigation zu verstehen oder auch Fehler zu debuggen.

Dies erfolgt folgendermaßen (auskommentiert, damit die Ausgabe nicht direkt im Frontend angezeigt wird):

<!--
 {{= $wsNavigation.path | json}}
-->

Die Ausgabe in der Developer-Konsole des Browsers könnte dann wie folgt aussehen:

[
  {
    "object": {
      "active": "always",
      "custom": {
         ...
      },
      "descr": "Meine Hauptkategorie",
      "hidden": false,
      "id": "100-24385",
      "name": "Getränke",
      "productsCount": 9
    },
    "type": "category"
  },
  {
    "object": {
      "active": "always",
      "custom": {
         ...
      },
      "descr": "Meine Unterkategorie",
      ...
    },
    "type": "category"
  },
  {
    "object": {
      "active": "always",
      "base": null,
      "custom": {
        "brand": "Der Hersteller",
         ...
      },
      "descr": "meine Produktbeschreibung",
      "id": "100-25229",
      ...
    },
    "type": "product"
  }
]

Breadcrumb-Template

Standardmäßig wird der Breadcrumb in eigener Datei breadcrumb.htm geladen, damit der gleiche Breadcrumb überall im Shop angezeigt wird.

Beispiel für die Anzeige des Breadcrumbs

In diesem Beispiel wird mittels des $wsNavigation Moduls die aktuelle Position des Shop-Kunden in der Menüstruktur der gerade besuchten Seite angezeigt.

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

Beispiel für Verlinkungen erzeugen

In diesem Beispiel wird gezeigt wie das letzte Element eines Breadcrumbs mit oder ohne Verlinkung erzeugt wird.

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

Breadcrumb-Praxisbeispiele

Für ein detailliertes Anwendungsbeispiel eines Breadcrumbs klicken Sie hier.

Blätterfunktion (Pagination)

Die Blätterfunktion ermöglicht es Nutzern, durch Produktlisten zu navigieren, indem sie Inhalte auf mehrere Seiten verteilt, was besonders bei Kategorien und Suchergebnissen sinnvoll ist.