Das Modul $wsProducts ermöglicht den Zugriff auf Produktdaten innerhalb des Shops. Damit können sowohl Einzelprodukte als auch Produktlisten ausgelesen und im Frontend dargestellt werden.

Mit $wsProducts lassen sich Produktdetails eines einzelnen Artikels abrufen, wenn man nicht auf der Produktdetailansicht oder Kategorieansichten ist - also alle Seiten, auf denen die Daten nicht bereits durch die ViewController vorgeladen werden.

Aus Vollständigkeitsgründen erwähnen wir in diesem Beispiel aber auch die Methoden des ViewControllers - wegen Produktdatenladen blablabla

Inhaltsübersicht

1 Templates
2 Datenübersicht & Zugriff
3 Beispiele
- 3.1 Name und Beschreibung des Produkts
- 3.2 Gewicht als Zusatz-Produktdatenfeld
- 3.3 Produktbilder
- 3.4 Varianten eines Produktes
- 3.5 Preis eines Produkts
- 3.6 Verfügbarkeit eines Produkts
4 Referenz
5 Praxisbeispiele

Templates

Standardmäßig werden Produkte über das Template product.htm angezeigt. Dieses befindet sich im Verzeichnis views. Der Name product.htm und der Speicherort dürfen nicht geändert werden, da das Template fest in der Software hinterlegt ist und nicht konfigurierbar oder anpassbar ist.

Produktdaten können jedoch flexibel auch auf anderen Seiten eingebunden werden, zum Beispiel:

Startseite → Darstellung von Top-Sellern, Angeboten oder einer Produktauswahl.
Warenkorbseite → Cross-Selling-Produkte als Kaufempfehlungen.
Kategorieseiten & Suchergebnisse → Individuelle Produktlisten mit Filtern.
Checkout & Bestellbestätigung → Anzeige von ergänzenden Produkten oder Rabattaktionen.

Mit $wsProducts lassen sich Produktinformationen dynamisch abrufen und individuell in verschiedenen Templates integrieren, um eine gezielte Präsentation von Artikeln zu ermöglichen.

Datenübersicht & Zugriff

Mit $wsProducts lassen sich Produktdaten auf verschiedene Weise abrufen. Je nach Anwendungsfall kann entweder auf ein einzelnes Produkt, das aktuell gewählte Produkt oder auf alle Produkte einer Kategorie zugegriffen werden. - UMSCHREIBEN

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

Zugriff auf ein bestimmtes Produkt über $wsProducts

Wenn ein bestimmtes Produkt anhand seiner ProduktID geladen werden soll, kann dies mit load() erfolgen.

In diesem Beispiel wird das Produkt mit der ProduktID 100-25229 geladen:

{{ var $myProduct = $wsProducts.load("100-25229") }}
<!--
 {{ print $myProduct }}
-->

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

{
  "variantSelection": {},
  "base": null,
  "taxRateId": "19",
  "descr": "Hochwertige Laufschuhe mit atmungsaktivem Mesh-Obermaterial und dämpfender Sohle.",
  "name": "Laufschuhe Pro Runner",
  "itemNumber": "RUN-001",
  "custom": {
    "weight": 0.8,
    "voucherProductTemplate": "",
    "voucherProductPrice": false,
    "voucherProductHtmlTemplate": "",
    "voucherProductActive": false,
    "validForDiscount": true,
    "productType": "standard",
    "brand": "SportActive",
    "robotsNoIndex": false,
    "metaDescriptionSetManually": false,
    "commission": 0.0,
    "filterField": "",
    "mainCategory": "Sportschuhe",
    "robotsNoFollow": false,
    "image": {
      "normal": "https://content.beispielshop.de/products/normal/laufschuhe_pro.png",
      "thumbnail": "https://content.beispielshop.de/products/thumbnail/laufschuhe_pro_thumbnail.png"
    },
    "commissionTaxRate": "",
    "metaDescription": "Hochwertige Laufschuhe mit ergonomischer Passform und atmungsaktivem Material.",
    "metaTitle": "Laufschuhe Pro Runner – Ideal für Training & Wettkampf",
    "oneTimeFeeTaxRate": "",
    "metaTitleSetManually": true,
    "multiProducts": "",
    "oneTimeFee": 0.0
  },
  "price": 89.99,
  "id": "100-25229",
  "active": "always"
}

Zugriff auf mehrere Produkte über $wsProducts

Variable mit Produktnummern erstellen und dann darüber iterieren

Zugriff auf das aktuell gewählte Produkt über $wsViews

Auf einer Produktdetailseite muss keine Produktnummer angegeben werden. Das aktuell angezeigte Produkt kann über $wsViews.current.info.product abgerufen werden.

{{ var $myProduct = $wsViews.current.info.product }}
<!--
 {{ print $myProduct }}
-->

Die Ausgabe in der Developer-Konsole entspricht dem Beispiel “Zugriff auf ein bestimmtes Produkt über die Produktnummer”.

Zugriff auf alle Produkte einer Kategorie über $wsCategories

Hier werden alle Produkte der Kategorie mit der ID 5678 geladen und als Liste ausgegeben.

{{ foreach $myProduct in $wsCategories.loadProducts("5678") }}
    {{ print $myProduct }}
{{ /foreach }}

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

Zugriff auf Produkte der aktuell gewählten Kategorie über $wsViews

Hier wird automatisch die Kategorie verwendet, die der Nutzer gerade betrachtet, sodass keine Kategorie-ID angegeben werden muss.

{{ foreach $myProduct in $wsViews.current.info.category.loadProducts() }}
    {{ print $myProduct }}
{{ /foreach }}

Die Ausgabe in der Developer-Konsole des Browsers entspricht dem Beispiel “Zugriff auf alle Produkte einer Kategorie über den Kategorieindex”.

Beispiele

In den folgenden Beispielen wird das Produkt einer Variable $myProduct zugewiesen. Das bedeutet, dass alle Produktinformationen über diese Variable abgerufen und weiterverarbeitet werden können.

Name und Beschreibung des Produkts

Name und Beschreibung sind Standard-Produktdatenfelder, die vom Shopsystem vorgegeben sind. Sie gehören zu den essenziellen Feldern, die zur Erfassung und Darstellung grundlegender Produktinformationen dienen und für die Bestellabwicklung unerlässlich sind.

Die technischen Feldnamen sind fest definiert und werden in der folgenden Form angesprochen:

$myProduct.<technischer Name>

Die Syntax für den Zugriff auf den Produktnamen und die Produktbeschreibung lautet:

<h1>{{= $myProduct.name }}</h1>
<p>{{= $myProduct.descr }}</p>

Gewicht als Zusatz-Produktdatenfeld

Im Gegensatz zu Standard-Produktdatenfeldern gehört das Gewicht zu den Zusatz-Produktdatenfeldern. Diese bieten erweiterte Möglichkeiten zur Erfassung und Darstellung von Produktmerkmalen, die über die grundlegenden Informationen hinausgehen.

Zusatz-Produktdatenfelder sind:

Nicht zwingend für die Bestellabwicklung erforderlich, aber hilfreich für die Produktdarstellung.
Individuell anpassbar und können je nach Bedarf hinzugefügt werden.
Über das Admin Interface erstellt oder über die Produktdaten-Schnittstelle geliefert werden.

Die technischen Namen dieser Felder werden in der Form angesprochen:

$myProduct.custom.<technischer Name>

Falls ein Feld weight im Admin-Bereich erstellt wurde, kann das Gewicht eines Produkts so ausgegeben werden:

<p>Gewicht: {{= $myProduct.custom.weight }} kg</p>

Produktbilder

Die Datenfelder für Produktbilder gehören nicht zu den Standardfeldern, sondern sind Zusatz-Produktdatenfelder. Um Produktbilder flexibel und in unterschiedlichen Größen auszugeben, müssen diese Felder als Datentyp MultiFormatImage angelegt werden. Dieser Feldtyp ermöglicht die Speicherung eines Bildes in mehreren Formaten und sorgt gleichzeitig für eine automatische Konvertierung, sodass die Bilder in den gewünschten Größen verfügbar sind. Die Anzahl der Zusatz-Produktdatenfelder mit diesem Typ ist nicht begrenzt, sodass beliebig viele Bilder für ein Produkt gespeichert werden können.

Die Konfiguration der Bildgrößen erfolgt im Admin Interface im Service Bildkonverter. Dort können die gewünschten Formate festgelegt werden, die für verschiedene Anwendungsbereiche benötigt werden. Typischerweise werden vier Bildgrößen verwendet:

mini (Thumbnail)
klein
normal und
groß

Im Admin Interface Service Bildkonverter wird auch das Speicherverzeichnis für die Bilder auf dem Server definiert. Der Pfad zum Bild wird dann durch die entsprechende Variable direkt mit ausgegeben.

Der Zugriff auf Produktbilder erfolgt nach dem folgenden Schema

$myProduct.custom.<technischer Feldname>.<Definiertes Format>

Wurde beispielsweise das Feld image01 für das Hauptbild des Produkts angelegt, können die Bilder in den verschiedenen Größen folgendermaßen ausgegeben werden:

<img src="{{= $myProduct.custom.image01.mini}}" alt="{{= $myProduct.name }}">
<img src="{{= $myProduct.custom.image01.small}}" alt="{{= $myProduct.name }}">
<img src="{{= $myProduct.custom.image01.normal}}" alt="{{= $myProduct.name }}">
<img src="{{= $myProduct.custom.image01.large}}" alt="{{= $myProduct.name }}">

Varianten eines Produktes

Produkte, die in unterschiedlichen Ausführungen wie Größe, Farbe oder Material erhältlich sind, werden als Variantenprodukte angelegt. Varianten sind keine eigenständigen Artikel, sondern untergeordnete Versionen eines Hauptprodukts, die sich in bestimmten Merkmalen unterscheiden. Damit Varianten korrekt im Shop verwaltet und dargestellt werden können, werden spezielle Produktdatenfelder verwendet, die als typspezifische Produktdatenfelder bezeichnet werden.

Diese Felder sind speziell darauf ausgerichtet, die Anforderungen von Variantenprodukten, Setprodukten und anderen komplexen Produktstrukturen zu unterstützen. Sie sind tief in der Shop-Software verankert, fest vorgegeben und können technisch nicht geändert werden. Das bedeutet, dass sowohl die Bezeichnung als auch die Spezifikationen dieser Felder – wie erlaubte Werte, Feldtypen oder Vererbungsmechanismen – nicht angepasst werden können.

Die eigentlichen Produktinformationen einer Variante, wie Name, Beschreibung, Preis oder Bilder, werden über die Standard- und Zusatz-Produktdatenfelder gepflegt, die für die Varianten definiert wurden. Diese Daten können entweder individuell pro Variante festgelegt oder – falls keine spezifischen Werte hinterlegt sind – automatisch vom Hauptprodukt geerbt werden.

Für den Zugriff auf Varianten eines Produkts wird die folgende Syntax verwendet:

{{ var $myProductVariant = $wsProducts.variantInfo($myProduct.id) }}

{{ foreach $myVariant in $myProductVariant.variantAttributes }}

   <p>Variantename: {{= $myVariant.name }}</p>
   
{{ /foreach }}

Preis eines Produkts

Jedes Produkt hat einen Verkaufspreis, der im Shop angezeigt wird. Neben dem regulären Preis können auch weitere Preise und Rabatte berücksichtigt werden, die entweder als fester Betrag oder als prozentualer Nachlass dargestellt werden.

Für die Preisberechnung stehen beispielsweise folgende Datenfelder zur Verfügung:

price → Der aktuelle Verkaufspreis des Produkts.
setDiscount → Der Rabatt in Prozent, also "Sie sparen X %".
setDiscountPrice → Der reduzierte Preis nach Abzug des Rabatts, also "Sie sparen X Euro".
setOrgPrice → Der ursprüngliche Preis vor dem Rabatt, also der Streichpreis.

Damit die Preise mit der richtigen Währung ausgegeben werden, wird die Währungsformatierung automatisch aus den Shopeinstellungen im Admin Interface übernommen. Das bedeutet, dass die Währung entweder als ISO-Code (EUR) oder als Symbol (€) angezeigt wird, je nach Konfiguration des Shops.

Ob die Preise im Shop netto (zzgl. MwSt.) oder brutto (inkl. MwSt.) behandelt werden, ist ebenfalls eine Einstellung, die im Admin Interface konfiguriert werden kann.

Die Syntax für den Zugriff auf die Preise und Rabatte lautet:

<p>Preis: {{= $myProduct.price | currency }}</p>
<p>Rabatt in Prozent: {{= $myProduct.setDiscount }} %</p>
<p>Rabatt in Zahlen: {{= $myProduct.setDiscountPrice | currency }}</p>
<p>Originalpreis: {{= $myProduct.setOrgPrice | currency }}</p>

Verfügbarkeit eines Produkts

Neben allen anderen Produktinformationen ist die Verfügbarkeit eines Produkts eine der wichtigsten Informationen für den Käufer. Jedes Produkt kann mit einem Lagerbestand versehen werden, der darüber entscheidet, ob und in welcher Menge ein Artikel bestellt werden kann. Zusätzlich besteht die Möglichkeit, den aktuellen Lagerbestand und den zugehörigen Lieferstatus im Shop anzuzeigen.

Der Zugriff auf den Lagerbestand erfolgt nicht direkt über $wsProducts, sondern über das separate Modul $wsInventory .

{{ var $myProductInventoryInfo = $wsInventory.load($myProduct.id) }}

{{ if $myProductInventoryInfo.active }}
      Aktuelle Stückzahl: {{= $myProductInventoryInfo.amount }}
{{ /if }}

Detaillierte Informationen für den Datenzugriff des Lagerbestands-Moduls finden Sie hier.

Referenz

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

Praxisbeispiele

Praxisbeispiele zu Umsetzungen von Produktlisten und Produktdetailansichten finden Sie hier:
→ Praxisbeispiele Produkte

$wsProducts - Produkte