Mit dem $wsWatchList Modul können Sie auf die Merklisten (Wunschlisten) des Nutzers zugreifen und diese im Frontend anzeigen. Sie können prüfen, ob Produkte auf einer Merkliste sind, Produkte hinzufügen oder entfernen und die Merkliste im Warenkorb darstellen. In diesem Abschnitt erfahren Sie, wie Sie Merklisten laden und verwalten können.

Inhaltsverzeichnis

Modulü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.

Beispiel / Ausschnitt über $wsWatchList

{{= $wsWatchList | json }}

JSON-Ausgabe:

{
  "watchLists": [
    {
      "watchListId": "...",
      "watchListName": "..."
    }
  ],
  "countWatchListsWithProduct": "ƒ()",
  "isProductOnWatchList": "ƒ()",
  "loadWatchList": "ƒ()",
  "loadWatchListItemId": "ƒ()"
}

Anmerkung: ƒ() kennzeichnet eine Funktion.

Variablen und Methoden in der Übersicht

Name	Rückgabe-Typ	Beschreibung

Name	Rückgabe-Typ	Beschreibung
`watchLists`	array	Gibt eine Liste mit allen Merklisten des Nutzers aus.
`[$i].watchListId`	string	Gibt die ID der Merkliste aus.
`[$i].watchListName`	string	Gibt den Namen der Merkliste aus.
`loadWatchList()`	map	Lädt eine Merkliste anhand ihrer ID.
`isProductOnWatchList()`	bool	Prüft, ob ein Produkt auf einer bestimmten Merkliste vorhanden ist.
`countWatchListsWithProduct()`	int	Gibt die Anzahl der Merklisten aus, auf denen ein bestimmtes Produkt liegt.
`loadWatchListItemId()`	string	Gibt die ID des Merklisten-Eintrags für ein bestimmtes Produkt zurück.

Templates

Merkliste-Produkte können über $wsWatchList auf jedem beliebigen Template 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.

Variablen

$wsWatchList.watchLists

Gibt eine Liste aller Merklisten des Nutzers aus.

{{ foreach $myWatchlistVariable in $wsWatchList.watchLists }}
    {{= $myWatchlistVariable.watchListId }} - {{= $myWatchlistVariable.watchListName }}
{{ /foreach }}

Methoden

$wsWatchList.loadWatchList()

Lädt eine Merkliste anhand ihrer ID.

Signatur
$wsWatchList.loadWatchList(watchlistId)

Rückgabe
map - WatchList-Map mit allen Daten.

Parameter

Name	Typ	Pflicht	Beschreibung

Name	Typ	Pflicht	Beschreibung
`watchlistId`	string	ja	ID der Merkliste.

Beispiel, das die Standard-Merkliste lädt.

{{ var $myWatchList = $wsWatchList.loadWatchList("watchlist_1_default") }}

Mit Verwendung der Funktion $wsWatchList.loadWatchList() stehen verschiedene Variablen zur Verfügung, um weitere Daten zur Merkliste abzurufen und auszugeben. Nachfolgend eine Übersicht, welche Variablen verfügbar sind.

Merklisten-Daten (Rückgabe von $wsWatchList.loadWatchList() )

Zunächst ist es notwendig, die Map mit den Merklisten-Daten, wie im obigen Beispiel dargestellt, einer lokalen Variable zuzuweisen. Diese kann anschließend an verschiedenen Stellen im Template verwendet werden.

JSON-Ausgabe der Variablen:

{
  "id": "...",
  "watchListName": "...",
  "items": [
    {
      "id": "...",
      "freeFields": { },
      "product": { ... }
    }
  ]
}

Variablen in der Übersicht

Variable	Typ	Beschreibung

Variable	Typ	Beschreibung
`id`	string	ID der Merkliste.
`watchListName`	string	Name der Merkliste.
`items`	array	Liste der Produkte auf der Merkliste.
`[$i].id`	string	ID des Merklisten-Eintrags.
`[$i].freeFields`	map	Benutzerdefinierte Felder zum Merklisten-Eintrag (z.B. Notizen, gewünschte Menge).
`[$i].product`	map	Produktdaten (Map “Product”).

$wsWatchList.isProductOnWatchList()

Prüft, ob ein Produkt auf einer bestimmten Merkliste vorhanden ist.

Signatur
$wsWatchList.isProductOnWatchList(watchlistId, productId)

Rückgabe
bool - true, wenn das Produkt auf der Merkliste ist, sonst false.

Parameter

Name	Typ	Pflicht	Beschreibung

Name	Typ	Pflicht	Beschreibung
`watchlistId`	string	ja	ID der Merkliste.
`productId`	string	ja	ID des Produkts.

Beispiel, das prüft, ob ein Produkt auf der Merkliste ist.

{{ if $wsWatchList.isProductOnWatchList("watchlist_1_default", $product.id) }}
  <span>Auf der Merkliste</span>
{{ /if }}

$wsWatchList.countWatchListsWithProduct()

Gibt die Anzahl der Merklisten aus, auf denen ein bestimmtes Produkt liegt.

Signatur
$wsWatchList.countWatchListsWithProduct(productId)

Rückgabe
int - Anzahl der Merklisten, auf denen das Produkt liegt.

Parameter

Name	Typ	Pflicht	Beschreibung

Name	Typ	Pflicht	Beschreibung
`productId`	string	ja	ID des Produkts.

Beispiel, das die Anzahl der Merklisten mit einem Produkt ausgibt:

Auf {{= $wsWatchList.countWatchListsWithProduct($product.id) }} Merklisten

$wsWatchList.loadWatchListItemId()

Gibt die ID des Merklisten-Eintrags für ein bestimmtes Produkt zurück. Diese ID wird benötigt, um das Produkt von der Merkliste zu entfernen.

Signatur
$wsWatchList.loadWatchListItemId(watchlistId, productId)

Rückgabe
string - ID des Merklisten-Eintrags.

Parameter

Name	Typ	Pflicht	Beschreibung

Name	Typ	Pflicht	Beschreibung
`watchlistId`	string	ja	ID der Merkliste.
`productId`	string	ja	ID des Produkts.

Beispiel, das die Eintrag-ID eines Produkts lädt.

{{ var $myItemId = $wsWatchList.loadWatchListItemId("watchlist_1_default", $product.id) }}

Aktionen

Aktionen zu diesem Modul, die Änderungen auslösen, sind separat im Kapitel “Aktionen” dokumentiert: https://websale.atlassian.net/wiki/spaces/WSDOKU/pages/2999517547

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

Weitere Praxisbeispiele zur Verwendung der Merkliste und Merklisten-Funktionen befinden sich hier: → Praxisbeispiele Merkliste

$wsWatchList