Die Merkliste Funktion ermöglicht den Nutzer ein Produkt entweder direkt von der Produktdetailseite, oder von z.B. einer Kategorieseite auf den Merkzettel zu speichern. Produkte auf der Merkliste können.

In diesem Abschnitt finden Sie alle Möglichkeiten, um auf die Daten der Merkliste 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 Inhaltsübersicht
2 Templates
3 Datenübersicht
4 Beispiele für die Anzeige von Merkliste-Informationen
5 Praxisbeispiele
- 5.1 Referenz

Templates

Merkliste-Produkte werden über $wsWatchlist im Template basket.htm geladen. Dort können sie in den Warenkorb gelegt oder aus der Merkliste entfernt werden. Zusätzlich ist es möglich, die Merkliste im Header oder im Offcanvas-Flyout anzuzeigen.

Datenübersicht

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

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

<!--
{{= $wsWatchList.items | json}}
-->

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

[
  {
    "id": "94ad0a1aa7be273c6439",
    "product": {
      "id": "100-25229",
      "itemNumber": "KAF-GUA-001",
      "name": "Guatemala",
      "descr": "Geröstete Bohnen. Mittlere Säure, leichte Nussnoten.",
      "price": 23.95,
      "taxRateId": "7",
      "active": "always",
      "custom": {
        "brand": "The International Coffee Company",
        "origin": "Guatemala",
        "productType": "standard",
        "weight": 1.0,
        "image": {
          "normal": "https://content.beispiel-shop.de/products/normal/product_image.png",
          "thumbnail": "https://content.beispiel-shop.de/products/thumbnail/product_thumbnail.png"
        }
      }
    }
  },
  {
    "id": "8297ebaa81d3a7565395",
    "product": {
      "id": "103-86290",
      ...
    }
  }
]

Beispiele für die Anzeige von Merkliste-Informationen

Prüfen, ob die Merkliste Produkte enthält.

In diesem Beispiel wird geprüft, ob Produkte auf der Merkliste enthalten sind, und gibt die Anzahl der Produkte aus.

{{ if $wsWatchList.items }}
  <p>Es gibt {{= $wsWatchList.items | len }} Produkte auf der Merkliste</p>
{{ /if }}

Eigenschaften der Produkte auf der Merkliste

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

Produktdaten anzeigen

In diesem Beispiel werden die üblichen Produktinfos ausgegeben, wie zum Beispiel der Produktname, Preis und Bild.

{{ if $wsWatchList.items }}
  {{ foreach $product in $wsWatchList.items }}
      <img src="{{= $watchListItem.product.custom.image.thumbnail }}" alt="{{= $watchListItem.product.name }}">
      <p>Produktname: {{= $watchListItem.product.name }}</p>
      <p>Preis: {{= $watchListItem.product.price }}</p>
  {{ /foreach }}
{{ /if }}

Produktvarianten Anzeigen

In diesem Beispiel wird geprüft, ob sich eine Produktvariante auf der Merkliste befindet. Im positiven Fall werden die Eigenschaften der Produktvariante ausgelesen.

{{if $wsWatchList.items}}
   {{ foreach $watchListItem in $wsWatchList.items }}
      ...
      {{ if $watchListItem.product.variantSelection }}
         {{ foreach $varAttr in $watchListItem.product.variantSelection | keys }}
            <p>{{= $varAttr}}: {{= $watchListItem.product.variantSelection[$varAttr] }} </p>
         {{ /foreach }}
      {{ /if }}
   {{ /foreach }}
   ...
{{/if}}

Freifelder auf der Merkliste zeigen

In diesem Beispiel wird geprüft, ob das Produkt Freifelder besitzt, wie zum Beispiel Herkunftsland oder Gewicht, und zeigt diese an.

{{if $wsWatchList.items}}
   {{ foreach $watchListItem in $wsWatchList.items }}
      ...
      {{ if $watchListItem.freeFields }}
         {{ foreach $freeFieldName in $watchListItem.freeFields | keys }}
            <p>{{= $freeFieldName}}: {{= $watchListItem.freeFields[$freeFieldName] }}</p>
         {{ /foreach }}
      {{ /if }}
   {{ /foreach }}
   ...
{{/if}}

Produkt in den Warenkorb legen

In diesem Beispiel wird gezeigt wie ein Produkt aus der Merkliste in den Warenkorb gelegt wird.

{{if $wsWatchList.items}}
   {{ foreach $watchListItem in $wsWatchList.items }}
      ...
      {{ var $basketItemAdd = $wsActions.create("BasketItemAdd", tag=$watchListItem.id) }}
      {{ if $basketItemAdd.error }}
         Es sind Fehler aufgetreten:
         {{ foreach $error in $basketItemAdd.errors }}
            {{ if $error.text }}
               <p> {{= $error.text }} </p>
            {{ else }}
               <p> {{= $error.code }} </p>
            {{ /if }}
         {{ /foreach }}
      {{ /if }}

      <form method="post" action="{{= $wsViews.viewUrl('basket.htm') }}">
         <input type="hidden" name="wscsrf" value="{{= $basketItemAdd.csrf }}">
         <input type="hidden" name="wsact" value="{{= $basketItemAdd.id }}">
         <input type="hidden" name="wstarget" value="{{= $wsViews.viewUrl('basket.htm') }}">
         <input type="hidden" name="productId" value="{{= $watchListItem.product.id }}">
         <input type="hidden" name="quantity" value="1">
         {{ foreach $freeFieldName in $watchListItem.freeFields | keys }}
            <input type="hidden" name="freeFields.{{= $freeFieldName}}" value="{{= $watchListItem.freeFields[$freeFieldName] }}">
         {{ /foreach }}
         <button type="submit">in den Warenkorb</button>
      </form>
   {{ /foreach }}
   {{ else }}
   ...
{{/if}}

Produkt aus der Merkliste löschen

In diesem Beispiel wird gezeigt wie ein Produkt aus der Merkliste gelöscht wird.

{{if $wsWatchList.items}}
   {{ foreach $watchListItem in $wsWatchList.items }}
      ...
      {{ var $watchListItemDelete = $wsActions.create("WatchListItemDelete", tag=$watchListItem.id) }}
      {{ if $watchListItemDelete.error }}
         Es sind Fehler aufgetreten:
         {{ foreach $error in $watchListItemDelete.errors }}
            {{ if $error.text }}
               <p> {{= $error.text }} </p>
               {{ else }}
               <p> {{= $error.code }} </p>
            {{ /if }}
         {{ /foreach }}
      {{ /if }}

      <form method="post" action="{{= $wsViews.viewUrl('basket.htm') }}">
         <input type="hidden" name="wscsrf" value="{{= $watchListItemDelete.csrf }}">
         <input type="hidden" name="wsact" value="{{= $watchListItemDelete.id }}">
         <input type="hidden" name="wstarget" value="{{= $wsViews.viewUrl('basket.htm') }}">
         <input type="hidden" name="productId" value="{{= $watchListItem.product.id }}">
         <input type="hidden" name="watchListItemId" value="{{= $watchListItem.id }}">
         <button type="submit">löschen</button>
      </form>
   {{ /foreach }}
   {{ else }}
   ...
{{/if}}

Praxisbeispiele

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

→ Praxisbeispiele Merkliste

Referenz

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

$wsWatchList - Merkliste