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

Inhaltsübersicht

1 Template
2 Datenübersicht
3 Beispiele für die Anzeige von Kategorie-Informationen
4 Kategorien auf beliebigen Seiten verwenden
5 Navigation mit Kategorien
6 Funktionen und Module für Kategorien
7 Praxisbeispiele
8 Referenz

Template

Im Standard erfolgt die Anzeige von Kategorien über das Template category.htm. Dieses Template ist im Verzeichnisbaum unter dem Pfad templates/views/category.htm gespeichert. Die Zuweisung dieses Templates erfolgt im Admin Interface unter Shop-Einstellungen > Kategorie-Navigation, Kategorie-Feld und Kategorie-Feldgruppen.

Bei den Kategorien genauso, nur kann man hier bereits ein vom Standard abweichendes Template in den Kategoriedaten hinterlegen.
Stand 15/04/25 - Abweichende Templates werden noch nicht geladen.

Kategoriedaten können jedoch flexibel genutzt werden, wie zum Beispiel in Blogbeiträgen oder im Warenkorb. Eine Voraussetzung ist, dass das Template bereits im Verzeichnis views angelegt wurde.

Datenübersicht

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

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

<!--
{{
  var $myCategory = $wsView.current.info.category;
  print $myCategory;
}}
-->

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

<!--
{
  "productsCount": 150,
  "descr": "Elektronik",
  "name": "Fernseher, Laptops, PC und mehr",
  "active": "always",
  "custom": {
    "robotsNoIndex": false,
    "robotsNoFollow": false,
    "metaTitleSetManually": false,
    "metaDescriptionSetManually": false,
    "seoName": "",
    "image": {},
    "metaTitle": "",
    "metaDescription": "",
    "alternativeTemplate": ""
  },
  "hidden": false,
  "id": "100-24385"
}
-->

Beispiele für die Anzeige von Kategorie-Informationen

Nachdem die Daten einer Kategorie geladen und einer Variable zugewiesen wurden, können Sie diese flexibel ausgeben. Die Zuweisung kann wie folgt erfolgen:

{{ var $myCategory = $wsView.current.info.category; }}

Name und Beschreibung der Kategorie

In diesem Beispiel werden die Kategorienamen und die Kategoriebeschreibung angezeigt.

Kategoriename: {{= $myCategory.name}}
Kategoriebeschreibbung: {{= $myCategory.description }}

Bilder der Kategorie

In diesem Beispiel wird geprüft, ob ein Übersichtsbild vorhanden ist. Im positiven Fall wird das Bild angezeigt.

{{ if $category.custom.image.normal }}
  <img src="{{= $category.custom.image.normal}}" alt="{{= $category.name }}">
{{ /if }}

Unterkategorien einer Kategorie

In diesem Beispiel werden innerhalb einer foreach Schleife die Unterkategorien einer beliebigen Kategorie mit der Funktion $wsCategories.loadChildren() geladen. Als Argument wird die jeweilige Kategorienummer übergeben.

{{ foreach $myCategory in $wsCategories.loadChildren("100-12345") }}
  Unterkategorie-Nummer: {{= $myCategory.id }}
  Unterkategorie-Name: {{= $myCategory.name }}
  Unterkategorie-Beschreibung: {{= $myCategory.desc }}
{{ /foreach }}

Produkte einer Kategorie

In diesem Beispiel werden innerhalb einer foreach Schleife die Produkte einer Kategorie geladen und auf die Produktdaten zugegriffen.

{{ foreach $myProduct in $view.info.products }}
  Produktname: {{= $myProduct.name }}
{{ /foreach }}

Die hier angezeigten Beispiele könnte dann eigenständig durch das WEBSALE Design-Team immer erweitert und ergänzt werden, wenn man weitere Informationen geladen hat und es für sinnvoll hält, diese zu dokumentieren, weil es vielleicht “tricky” war und man sich so das spätere Suchen ersparen will, wenn man es nochmal bauen will.

Kategorien auf beliebigen Seiten verwenden

Die Daten einer Kategorie können mittels der $wsCategories.load() Funktion auch auf anderen Seiten des Shops geladen werden, wie zum Beispiel Blogbeiträge, im Warenkorb oder auf der Startseite.

Dazu muss der Index der gewünschten Kategorie angegeben werden:

{{ var $myCategory = $wsCategories.load("101-12345") }}

Dann können Sie ebenfalls auf alle Daten der geladenen Kategorie zugreifen, z. B. Kategoriename und Kategoriebeschreibung:

Kategoriename: {{= $myCategory.name}}
Kategoriebeschreibung: {{= $myCategory.description }}

Navigation mit Kategorien

Kategorien bilden die Grundlage für die Navigation im Shop. Sie werden genutzt, um ein Navigationsmenü zu erstellen, das die Produkte strukturiert und eine intuitive Benutzerführung ermöglicht.

Weitere Informationen zur Erstellung eines Navigationsmenüs finden Sie im Abschnitt → Navigation

Funktionen und Module für Kategorien

Kategorien bieten zahlreiche Funktionen, die im Shop genutzt werden können. Diese umfassen:

Filtern und Sortieren von Produkten
Festlegen der Anzahl an Produkten pro Seite
Produktvergleich

Weiterführende Informationen zu diesen Funktionen finden Sie in https://websale.atlassian.net/wiki/spaces/WSDOKU/pages/2866675751 .

Diese Liste hier müsste dann eigentlich immer dynamisch erweitert werden, wenn es neue Funktionen oder Umsetzungsbeispiele für Kategorien gibt - muss immer manuell nach bearbeitet werden (Pflegeaufwand und Aktualität)

Praxisbeispiele

Praxisbeispiele zu Umsetzungen von Kategorien und Kategorien-Funktionen finden Sie hier:

→ Praxisbeispiele Kategorien

Referenz

In der Modul-Referenz für $wsCategories finden Sie eine Übersicht aller verfügbaren Eigenschaften und Parameter.

Die Konfigurationsmöglichkeiten des Moduls sind bei den Konfigurationsparameter beschrieben und können je nach Bedarf angepasst werden.

$wsCategories - Kategorien