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

# Merkliste

> Produkte vormerken, per Schaltfläche oder per AJAX, gemerkte Produkte kennzeichnen und die Merkliste als eigene Seite gestalten.

Nicht jeder Kauf entsteht beim ersten Besuch. Wer drei Kandidaten im Blick hat und sich noch nicht entscheiden will, braucht einen Platz, an dem er sie ablegen kann, ohne sie zu bestellen. Das ist die Merkliste.

Wie lange die Produkte dort liegen bleiben, hängt davon ab, ob der Käufer angemeldet ist.

| Zustand | Aufbewahrung |
| - | - |
| nicht angemeldet | für die Dauer eines Besuchs, also der Session |
| angemeldet | dauerhaft, auch für spätere Besuche |

Der Nutzen der Merkliste wächst mit dem zweiten Besuch. Für Stammkunden ist sie deshalb besonders wertvoll, und sie ist zugleich ein Argument dafür, sich anzumelden. Weisen Sie den nicht angemeldeten Käufer an der Merkliste darauf hin, dass seine Auswahl nur bis zum Ende des Besuchs erhalten bleibt.

Aus der Merkliste heraus legt der Käufer die Produkte mit einem Klick in den Warenkorb.

## Konfiguration

### Das Template zuweisen

Die Merkliste ist eine eigene Shopseite mit eigenem Template.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   ...
   MemoList = ws_memolist.htm
   ...
</Templates>
```

### Die Meldungstexte hinterlegen

Im Abschnitt `<NotifyMessages-Txt>` der `shop.config` hinterlegen Sie die Texte, die der Käufer an der Merkliste zu sehen bekommt.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<NotifyMessages-Txt>
   ...
   EmtpyMemoList = Ihre Merkliste ist noch leer.
   MemoListLogin = Melden Sie sich an, damit Ihre Merkliste über diesen Besuch hinaus erhalten bleibt.
   MemoListFull  = Ihre Merkliste ist voll. Bitte entfernen Sie zuerst ein Produkt.
   ...
</NotifyMessages-Txt>
```

> [!WARNING]
>
> `EmtpyMemoList` ist kein Tippfehler in dieser Dokumentation. Der Parameter heißt tatsächlich so, mit vertauschten Buchstaben. Schreiben Sie ihn korrekt als "Empty", findet der Shop ihn nicht und die Meldung bleibt leer.

`MemoListFull` greift, wenn die Merkliste ihre Höchstzahl erreicht hat. Ohne diesen Text klickt der Käufer auf "merken" und es geschieht sichtbar nichts.

### Das Blättern aktivieren

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Basic>
   ...
   MemoListPaging-Allow = yes
   ...
</Basic>
```

Referenz: [Abschnitt Templates](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#templates) · [Abschnitt NotifyMessages-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/texte-und-meldungen.md#notifymessages-txt) · [Abschnitt Basic](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#basic)

## Ein Produkt auf die Merkliste setzen

Auf der Produktdetailansicht setzen Sie eine Schaltfläche, sinnvollerweise neben oder unter "In den Warenkorb".

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="submit" name="~BT-MemoList~" value="In die Merkliste">
```

Nach dem Klick landet der Käufer auf der Merkliste.

Genau das ist der Haken an dieser einfachen Variante: Der Käufer verlässt die Produktseite, obwohl er dort weiterlesen wollte. Die AJAX-Variante im nächsten Abschnitt behebt das.

Referenz: [BT-MemoList](https://dokumentation.websale.de/v8s/referenz/tags/bt/produkt-und-warenkorb.md#bt-memolist)

## Ein Produkt per AJAX auf die Merkliste setzen

Bei der AJAX-Variante bleibt die Seite stehen. Erfolgs- und Fehlermeldungen erscheinen in eingeblendeten Containern.

| Voraussetzung | |
| - | - |
| JavaScript im Browser des Käufers | aktiviert |
| WEBSALE JavaScript-Systembibliothek | mindestens Version 1.8.1 |

Ohne JavaScript greift automatisch das Verhalten aus dem vorigen Abschnitt: Der Käufer landet auf der Merkliste. Die Funktion fällt also sauber zurück, und Sie brauchen keine zweite Schaltfläche.

Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) · Wegweiser: [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)

### So läuft es ab

Der Klick ruft eine JavaScript-Funktion auf, die den Seitenwechsel unterbindet und stattdessen eine AJAX-Anfrage stellt. Der Shop antwortet mit dem Merklisten-Template. Aus diesem übernimmt die Systembibliothek die benannten Bereiche in die gleichnamigen Container der aktuellen Seite.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-AJAX}
   <WS-Ajax-ID1>
{/ST-AJAX}

   ...

{ST-AJAX}
   </WS-Ajax-ID1>
{/ST-AJAX}
```

Die Klammerung mit `ST-AJAX` sorgt dafür, dass die Bereichsmarkierungen beim normalen Aufruf der Merkliste nicht im Quelltext landen. Geklammert werden nur die Markierungen, nicht der Inhalt dazwischen.

Referenz: [ST-AJAX](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md#die-tags-im-uberblick) · WS-Ajax-ID

### Schritt 1: Die Bibliotheken einbinden

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   ...
   <script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.1.js"></script>
   <script type="text/javascript" src="../js/ws-design-1.8.1.js"></script>
   ...
</head>
```

### Schritt 2: Die Container anlegen

Vier Container bilden die vier Zustände ab.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="AJAXMemoInfo" class="memo-layer" style="display:none;">
   Bitte warten
</div>

<div id="AJAXMemoError" class="memo-layer" style="display:none;">
   Es ist ein Verbindungsfehler aufgetreten.
   <a href="#" onclick="$('#AJAXMemoError').hide(); return false;">schließen</a>
</div>

<div id="Memo-Error" class="memo-layer" style="display:none;"></div>

<div id="Memo-Info" class="memo-layer" style="display:none;"></div>
```

| Container | Zeigt |
| - | - |
| `AJAXMemoInfo` | die Ladeanzeige, solange die Anfrage läuft |
| `AJAXMemoError` | einen Verbindungsfehler, die Anfrage kam nicht durch |
| `Memo-Error` | die Fehlermeldung des Shops, beispielsweise volle Merkliste |
| `Memo-Info` | die Erfolgsmeldung samt Kurzinhalt der Merkliste |

> [!WARNING]
>
> Die IDs der beiden unteren Container sind nicht frei wählbar. Sie müssen zu den Bereichsnamen im Merklisten-Template passen: `Memo-Error` gehört zu `<WS-Ajax-Memo-Error>` und `Memo-Info` zu `<WS-Ajax-Memo-Info>`. Über genau diese Namensgleichheit findet der Inhalt seinen Weg in den Container.

Die beiden unteren Container bleiben im Template leer. Ihr Inhalt kommt aus der Antwort des Shops. Nur die beiden oberen brauchen eigenen Inhalt, denn sie zeigen Zustände, zu denen es keine Antwort gibt.

Legen Sie die Container über die Seite, beispielsweise mit `position:fixed`, damit sie unabhängig von der Scrollposition sichtbar sind. Die Gestaltung gehört in eine CSS-Klasse, hier `memo-layer`.

### Schritt 3: Dem Produktformular eine ID geben

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" method="post" name="product" id="productform">
```

Steht auf einer Seite mehr als ein Produktformular, beispielsweise in einer Produktliste, braucht jedes eine **eigene** ID. Sonst schickt die Funktion immer die Daten desselben Formulars ab.

### Schritt 4: Die Schaltfläche umstellen

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="image" src="buttons/b_memolist.gif" alt="In die Merkliste"
       onclick="return ws_AJAXaddToMemolist('productform', '~BT-MemoList~', '~WS-Charset~');">
```

> [!WARNING]
>
> Der erste Parameter ist die Formular-ID aus Schritt 3. Weicht sie ab, findet die Funktion das Formular nicht, und es wird nichts gemerkt.

### Schritt 5: Die Funktionen der Designkomponente füllen

Vier Funktionen bilden die vier Zustände ab.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// vor dem Absetzen der Anfrage: Ladeanzeige
function ws_AJAXaddToMemolistStart()
{
   $('#AJAXMemoError').hide();
   $('#Memo-Error').fadeOut("slow");
   $('#AJAXMemoInfo').fadeIn("slow");
}

// Produkt wurde gemerkt
function ws_AJAXaddToMemolistResponseSuccess()
{
   $('#AJAXMemoInfo').fadeOut("slow");
   $('#Memo-Info').fadeIn("slow");
   window.setTimeout(function() { $('#Memo-Info').fadeOut('slow'); }, 3000);
}

// Produkt konnte nicht gemerkt werden, der Shop hat einen Grund geliefert
function ws_AJAXaddToMemolistResponseError()
{
   $('#AJAXMemoInfo').fadeOut("slow");
   $('#Memo-Error').fadeIn("slow");
}

// die AJAX-Kommunikation selbst ist fehlgeschlagen
function ws_AJAXaddToMemolistError()
{
   $('#AJAXMemoInfo').fadeOut("slow");
   $('#AJAXMemoError').fadeIn("slow");
}
```

Die Erfolgsmeldung blendet sich nach drei Sekunden selbst aus. Das ist sinnvoll, denn sie ist eine Bestätigung und keine Aufgabe. Die Fehlermeldungen bleiben stehen, bis der Käufer sie schließt oder weiterklickt.

Die Beispiele verwenden jQuery. Verwenden Sie etwas anderes, ersetzen Sie die Zeilen. Die Funktionsnamen bleiben, denn die ruft die Systembibliothek auf.

### Das Merklisten-Template ergänzen

Im Template der Merkliste legen Sie die beiden Bereiche an, deren Inhalt in die Container wandert.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-AJAX}
   <WS-Ajax-Memo-Error>
      {MSG-MemoList_Notify}
         ~MSG-MemoList_Notify~
      {/MSG-MemoList_Notify}
   </WS-Ajax-Memo-Error>
{/ST-AJAX}

{!ST-AJAX}
   {MSG-MemoList_Notify}
      <div class="hinweis">~MSG-MemoList_Notify~</div>
   {/MSG-MemoList_Notify}
{/!ST-AJAX}

{ST-AJAX}
   <WS-Ajax-Memo-Info>
      <p>Das Produkt wurde auf die Merkliste gesetzt.</p>
      <p>Auf Ihrer Merkliste liegen jetzt ~WS-MemoListEntries~ Produkte:</p>
      {CAT-Data}
         <ul>
            {@PR-Data}
               <li>~PR-Name~</li>
            {/@PR-Data}
         </ul>
      {/CAT-Data}
   </WS-Ajax-Memo-Info>
{/ST-AJAX}
```

Dieselbe Meldung erscheint zweimal, einmal für den AJAX-Fall und einmal für den normalen Aufruf. Beim normalen Aufruf steht sie auf der Merklistenseite, beim AJAX-Aufruf im Container über der Produktseite. Deshalb braucht sie dort eine eigene Gestaltung und hier keine.

### Tracking-Schnittstelle

Verwenden Sie die Tracking-Schnittstelle, beachten Sie deren Hinweise zu AJAX-basierten Funktionen. Ein per AJAX gemerktes Produkt löst keinen Seitenaufruf aus.

Wegweiser: [Beschreibung der Tracking-Schnittstelle](https://dokumentation.websale.de/v8s/materialien/materialien-tracking-schnittstelle.md)

## Gemerkte Produkte kennzeichnen

Auf der Produktübersichtsseite, der Suchergebnisseite, der Produktdetailansicht, in Cross-Links und in allen weiteren Produktlisten können Sie kennzeichnen, was bereits auf der Merkliste liegt.

Dafür gibt es zwei Tags, und der Unterschied zwischen ihnen ist wichtig.

| Tag | Erkennt das Produkt über |
| - | - |
| `WS-PRIndexInMemolist` | den Produktindex, also ohne Rücksicht auf Varianten |
| `WS-PRNumberInMemolist` | die Produktnummer, also einschließlich der gewählten Variante |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{@PR-Data}
   ...
   {WS-PRIndexInMemolist}
      Dieses Produkt liegt bereits auf Ihrer Merkliste.
   {/WS-PRIndexInMemolist}

   {WS-PRNumberInMemolist}
      Dieses Produkt liegt in dieser Ausführung bereits auf Ihrer Merkliste.
   {/WS-PRNumberInMemolist}
   ...
{/@PR-Data}
```

Ein Beispiel für den Unterschied: Der Käufer merkt sich ein Hemd in Blau und ruft dann dasselbe Hemd in Rot auf. `WS-PRIndexInMemolist` meldet, dass das Hemd schon auf der Liste liegt. `WS-PRNumberInMemolist` meldet, dass die rote Ausführung noch fehlt. Welches der beiden Tags das richtige ist, hängt davon ab, was Sie dem Käufer sagen wollen.

In einer Produktliste ohne Variantenauswahl ist der Index das passende Kriterium. Auf der Detailseite mit ausgewählter Variante ist es die Nummer.

Referenz: [WS-PRIndexInMemolist](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#die-tags-im-uberblick) · [WS-PRNumberInMemolist](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#die-merkliste)

## Die Merkliste anzeigen

Die Merkliste zeigt immer den aktuellen Stand der Produktdaten, also aktuelle Preise, Beschreibungen und Nummern. Sie ist keine Momentaufnahme.

| Fall | Verhalten |
| - | - |
| Produkt existiert nicht mehr | wird automatisch aus der Merkliste entfernt |
| Produkt ist inaktiv | wird nicht angezeigt, bleibt aber gespeichert und erscheint bei Reaktivierung wieder |
| gemerkte Variante existiert nicht mehr | "In den Warenkorb" ist gesperrt, ein Link führt zum Produkt, wo die Variante neu gewählt werden kann |

Der Unterschied zwischen den ersten beiden Zeilen ist beabsichtigt. Ein gelöschtes Produkt kommt nicht wieder, ein inaktives vielleicht schon, beispielsweise nach einer Lieferung. Deshalb bleibt es liegen.

### Aufbau des Templates

Die Produkte in der Merkliste werden wie die Produkte einer Kategorie ausgegeben, einschließlich der gewählten Varianten und des Blätterns.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{CAT-Data}
   {@PR-Data}
      ...
      ~PR-Name~
      ~PR-MemoListVariations~
      <a href="~PR-DepVarLink~">zum Produkt</a>
      <a href="~PR-DeleteMemoListEntry~">entfernen</a>
      ...
   {/@PR-Data}
{/CAT-Data}
```

Wegweiser: [Gewähltes Produkt anzeigen](https://dokumentation.websale.de/v8s/produkte/gewaehltes-produkt-anzeigen.md)

### Tags der Merkliste

| Tag | Liefert |
| - | - |
| `WS-MemoListEntries` | die Zahl der Produkte auf der Merkliste |
| `MSG-MemoList_Notify` | die Meldungen aus `<NotifyMessages-Txt>` |
| `PR-DeleteMemoListEntry` | den Link zum Entfernen eines Eintrags |
| `PR-MemoListDate` | das Datum, an dem das Produkt gemerkt wurde |
| `PR-MemoListTime` | die Uhrzeit dazu |
| `PR-MemoListVariations` | die gewählten Varianten und Texteingaben, als Tabelle |
| `ST-MemoListOrder_OK` | Klammerung, das Produkt ist aus der Merkliste heraus bestellbar |
| `WS-MemoListLink` | den Link zur Merkliste |

`ST-MemoListOrder_OK` prüft dabei, ob die gemerkten Varianten noch gültig sind. Klammern Sie die Bestellmöglichkeit damit, sonst bietet die Merkliste einen Knopf an, der nicht funktionieren kann.

`PR-MemoListDate` und `PR-MemoListTime` sind mehr als Zierde. Ein Produkt, das seit einem halben Jahr auf der Liste liegt, sagt etwas anderes als eines von gestern, und der Käufer erkennt daran, was er schon abgehakt hatte.

### Styles der Variantentabelle

`PR-MemoListVariations` gibt die gewählten Varianten als Tabelle aus. Diese Tabelle gestalten Sie über eigene Klassen.

Referenz: Styles für Varianten der Merkliste · [PR-MemoListVariations](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)

## Die Merkliste verlinken

Von jedem Template aus.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-MemoListLink~">Merkliste (~WS-MemoListEntries~)</a>
```

Die Zahl im Link lohnt sich. Eine Merkliste, der man nicht ansieht, ob etwas darin liegt, wird seltener geöffnet.

Referenz: [WS-MemoListLink](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#die-tags-im-uberblick) · [WS-MemoListEntries](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#die-tags-im-uberblick)

## Verwandte Themen

* Wegweiser: [Gewähltes Produkt anzeigen](https://dokumentation.websale.de/v8s/produkte/gewaehltes-produkt-anzeigen.md)
* Wegweiser: [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)
* Wegweiser: Beschreibung der Tracking-Schnittstelle


## Related topics

- [Storefront API Merkliste](https://dokumentation.websale.de/schnittstellen/storefront-api/storefront-api-merkliste.md)
- [$wsWatchList - Merklisten](https://dokumentation.websale.de/frontend/referenz/module/wswatchlist.md)
- [Styles für Warenkorb und Bestellung](https://dokumentation.websale.de/v8s/referenz/styles/warenkorb-und-bestellung.md)
- [actions - Produkte](https://dokumentation.websale.de/konfiguration/actions-fehlertexte-e-mails/actions-produkte.md)
- [Merkzettel, Vergleich, Upload und externe Dienste](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.