> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# $wsWatchList - Merklisten

> Modul $wsWatchList für Merklisten: prüfen, Produkte hinzufügen oder entfernen und Wunschlisten des Nutzers im Frontend oder Warenkorb anzeigen.

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.

***

## Modulübersicht

**Beispiel / Ausschnitt über** `$wsWatchList`

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{= $wsWatchList | json }}
```

**JSON-Ausgabe:**

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "watchLists": [
    {
      "watchListId": "...",
      "watchListName": "..."
    }
  ],
  "countWatchListsWithProduct": "ƒ()",
  "isProductOnWatchList": "ƒ()",
  "loadWatchList": "ƒ()",
  "loadWatchListItemId": "ƒ()"
}
```

**Anmerkung:** `ƒ()` kennzeichnet eine Funktion.

**Variablen und Methoden in der Übersicht**

| **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 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.

***

## Variablen

### \$wsWatchList.watchLists

Gibt eine Liste aller Merklisten des Nutzers aus.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ 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**  |
| ------------- | ------- | ----------- | ----------------- |
| `watchlistId` | string  | ja          | ID der Merkliste. |

**Beispiel,** das die Standard-Merkliste lädt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ var $myWatchList = $wsWatchList.loadWatchList("watchlist_1_default") }}
```

<Info>
  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.
</Info>

### 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:**

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "id": "...",
  "watchListName": "...",
  "items": [
    {
      "id": "...",
      "freeFields": { },
      "product": { ... }
    }
  ]
}
```

**Variablen in der Übersicht**

| **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**  |
| ------------- | ------- | ----------- | ----------------- |
| `watchlistId` | string  | ja          | ID der Merkliste. |
| `productId`   | string  | ja          | ID des Produkts.  |

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ 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** |
| ----------- | ------- | ----------- | ---------------- |
| `productId` | string  | ja          | ID des Produkts. |

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
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**  |
| ------------- | ------- | ----------- | ----------------- |
| `watchlistId` | string  | ja          | ID der Merkliste. |
| `productId`   | string  | ja          | ID des Produkts.  |

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ var $myItemId = $wsWatchList.loadWatchListItemId("watchlist_1_default", $product.id) }}
```

***

## Aktionen

Aktionen zu diesem Modul, die Änderungen auslösen, sind separat im Kapitel “Aktionen” dokumentiert: [Watchlist](/frontend/referenz/aktionen/watchlist)

***

## 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{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](/frontend/praxisbeispiele/memolist-offcanvas)

***

## Weiterführende Links

* [Memolist (offcanvas)](/frontend/praxisbeispiele/memolist-offcanvas)
* [\$wsBasket](/frontend/referenz/module/wsbasket)