Merkliste - WEBSALE Dokumentation

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.

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

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

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

<Basic>
   ...
   MemoListPaging-Allow = yes
   ...
</Basic>

Referenz: Abschnitt Templates · Abschnitt NotifyMessages-Txt · Abschnitt Basic

Ein Produkt auf die Merkliste setzen

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

<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

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 · Wegweiser: AJAX-Funktionen

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.

{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 · WS-Ajax-ID

Schritt 1: Die Bibliotheken einbinden

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

<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

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

<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

<input type="image" src="buttons/b_memolist.gif" alt="In die Merkliste"
       onclick="return ws_AJAXaddToMemolist('productform', '~BT-MemoList~', '~WS-Charset~');">

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.

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

{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

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

{@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 · WS-PRNumberInMemolist

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.

{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

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

Die Merkliste verlinken

Von jedem Template aus.

<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 · WS-MemoListEntries

​Konfiguration

​Das Template zuweisen

​Die Meldungstexte hinterlegen

​Das Blättern aktivieren

​Ein Produkt auf die Merkliste setzen

​Ein Produkt per AJAX auf die Merkliste setzen

​So läuft es ab

​Schritt 1: Die Bibliotheken einbinden

​Schritt 2: Die Container anlegen

​Schritt 3: Dem Produktformular eine ID geben

​Schritt 4: Die Schaltfläche umstellen

​Schritt 5: Die Funktionen der Designkomponente füllen

​Das Merklisten-Template ergänzen

​Tracking-Schnittstelle

​Gemerkte Produkte kennzeichnen

​Die Merkliste anzeigen

​Aufbau des Templates

​Tags der Merkliste

​Styles der Variantentabelle

​Die Merkliste verlinken

​Verwandte Themen

Konfiguration

Das Template zuweisen

Die Meldungstexte hinterlegen

Das Blättern aktivieren

Ein Produkt auf die Merkliste setzen

Ein Produkt per AJAX auf die Merkliste setzen

So läuft es ab

Schritt 1: Die Bibliotheken einbinden

Schritt 2: Die Container anlegen

Schritt 3: Dem Produktformular eine ID geben

Schritt 4: Die Schaltfläche umstellen

Schritt 5: Die Funktionen der Designkomponente füllen

Das Merklisten-Template ergänzen

Tracking-Schnittstelle

Gemerkte Produkte kennzeichnen

Die Merkliste anzeigen

Aufbau des Templates

Tags der Merkliste

Styles der Variantentabelle

Die Merkliste verlinken

Verwandte Themen