Das Modul $wsBasket ermöglicht den Zugriff auf die aktuellen Warenkorb-Daten eines Nutzers. Mit diesen Daten kann der Inhalt des Warenkorbs an verschiedenen Stellen im Shop dynamisch dargestellt werden. In diesem Bereich erfahren Sie, wie Sie auf diese Informationen zugreifen, sie für unterschiedliche Anwendungsfälle nutzen und deren Struktur verstehen können.

Inhaltsübersicht

1 Templates
2 Datenübersicht & Zugriff
3 Beispiele für den Datenzugriff
4 Referenz
5 Praxisbeispiele

Templates

Die Informationen darüber, welche Produkte sich aktuell im Warenkorb befinden, können auf jeder Seite des Shops angezeigt werden. Dabei gibt es unterschiedliche Möglichkeiten zur Darstellung:

Kurz-Warenkorb: In einer Sidebar, als Flyout oder OffCanvas-Element, um dem Nutzer jederzeit einen schnellen Überblick zu bieten.
Warenkorb-Seite: Eine detaillierte Übersicht über die enthaltenen Produkte mit Anpassungsmöglichkeiten.
Checkout-Seite & Bestellbestätigung: Darstellung des Warenkorbs während des Kaufprozesses und in E-Mails zur Bestätigung einer Bestellung.

Die Warenkorb-Daten lassen sich flexibel abrufen und anpassen, um eine für den jeweiligen Shop passende Darstellung zu ermöglichen.

Datenübersicht & Zugriff

Damit die Warenkorb-Daten abgerufen werden können, muss sich mindestens ein Produkt im Warenkorb befinden. Dies kann auf zwei Arten geschehen:

Aktive Session: Ein Nutzer legt während seines Besuchs Produkte in den Warenkorb, die dann für die Dauer der Session gespeichert werden.
Persistente Warenkorb-Funktion: Je nach Shop-Konfiguration können Warenkörbe auch über Sessions hinaus gespeichert werden, beispielsweise über Cookie-Warenkörbe oder geräteübergreifende Warenkorb-Funktionen.

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

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

<!--
{{= $wsBasket | json }}
-->

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

{
  "items": [
    {
      "freeFields": {},
      "id": "103-86290",
      "oneTimeFee": 0.0,
      "price": 19.99,
      "product": {
        "active": "always",
        "base": null,
        "custom": {
          "brand": "Adidas",
          "commission": 0.0,
          "commissionTaxRate": "",
          "filterField": "",
          "image": {
            "normal": "https://content.beispielshop.de/products/normal/tshirt_image.png",
            "thumbnail": "https://content.beispielshop.de/products/thumbnail/tshirt_thumbnail.png"
          }
        },
        "descr": "Bequemes Baumwoll-T-Shirt mit Rundhalsausschnitt",
        "id": "103-86290",
        "itemNumber": "SHIRT-001",
        "name": "Herren T-Shirt Classic",
        "price": 19.99,
        "taxRateId": "19",
        "variantSelection": {}
      },
      "quantity": 2,
      "total": 39.98,
      "totalGross": 39.98,
      "totalNet": 33.6,
      "totalTax": 6.38,
      "voucherIds": []
    },
    {
      "freeFields": {},
      "id": "204-57342",
      "oneTimeFee": 0.0,
      "price": 79.95,
      "product": {
        "active": "always",
        "base": null,
        "custom": {
          "brand": "Puma",
          "commission": 0.0,
          "commissionTaxRate": "",
          "filterField": "",
          "image": {
            "normal": "https://content.beispielshop.de/products/normal/sneaker_image.png",
            "thumbnail": "https://content.beispielshop.de/products/thumbnail/sneaker_thumbnail.png"
          }
        },
        "descr": "Moderner Sneaker mit gepolsterter Sohle",
        "id": "204-57342",
        "itemNumber": "SHOE-456",
        "name": "Sneaker Urban Style",
        "price": 79.95,
        "taxRateId": "19",
        "variantSelection": {}
      },
      "quantity": 1,
      "total": 79.95,
      "totalGross": 79.95,
      "totalNet": 67.18,
      "totalTax": 12.77,
      "voucherIds": []
    }
  ],
  "total": 119.93,
  "totalCommission": 0.0,
  "totalGross": 119.93,
  "totalNet": 100.78,
  "totalQuantity": 3,
  "totalTax": 19.15
}

Beispiele für den Datenzugriff

Prüfen, ob Produkte im Warenkorb liegen

In diesem Beispiel wird geprüft, ob sich Produkte im Warenkorb befinden. Im positiven Fall wird die Anzahl der Produkte angezeigt.

{{if $wsBasket.items}}
  <p>Im Warenkorb befinden sich insgesamt {{= $wsBasket.items | len }} Produkte.</p>
{{ else }}
  <p>Sie haben noch keine Produkte im Warenkorb.</p>
{{/if}}

Produkte im Warenkorb anzeigen

Sind Produkte im Warenkorb vorhanden, dann können die einzelnen Produkte mithilfe der foreach Schleife geladen und angezeigt werden.

{{ if $wsBasket.items }}
  {{ foreach $cProduct in $wsBasket.items }}
    <a href="{{= $wsViews.url('Product', {productId: $cProduct.product.id}) }}">
      <img src="{{= $cProduct.product.custom.image.normal }}" alt="...">
    </a>

    <p>Produktname: {{= $cProduct.product.name }}</p>          
    <p>Menge: {{= int($cProduct.quantity) }}</p>
    <p>Einzelpreis: {{= $cProduct.price | currency }}</p>
    <p>Positionsumme: {{= $cProduct.total | currency }}</p>

    <p>Versandkosten: {{= $wsCheckout.sum.shippingCost | currency }}</p>
    <p>Gesamtsumme: {{= $wsBasket.total | currency }}</p>
  {{ /foreach }}
{{ else }}
    <p>Sie haben keine Produkte im Warenkorb!</p>
{{ /if }}

Anzahl der Produkte im Warenkorb

{{ if $wsBasket.items }}
  <p>Sie haben {{= $wsBasket.items | len }} Produkte im Warenkorb</p>
 {{ /if }}

Link zur Warenkorbseite

zugriff auf die Warenkorbseite, die mittels des View-Templates basket.htm umgesetzt wurde.

<a href="{{= $wsViews.viewUrl('basket.htm')}}">Warenkorb ansehen</a>

Referenz

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

Für das Modul $wsBasket stehen zudem Aktionen zur Verfügung, die es ermöglichen, mit den Modul-Daten zu interagieren. Diese Aktionen können über HTML-Formulare oder Ajax-Anfragen ausgeführt werden und erlauben z. B. das Ändern, Hinzufügen oder Löschen von Daten.

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

Praxisbeispiele

Praxisbeispiele zu Umsetzungen von Warenkörben und Warenkorbfunktionen finden Sie hier:
→ Praxisbeispiele Warenkorb

$wsBasket - Warenkorb