<< Click here to display Table of Contents >> Navigation: Wegweiser > Interaktive Funktionen:

Merkliste

Sie können in Ihrem WEBSALE-Shop eine komfortable Merkliste anbieten. Produkte werden unterschiedlich lange in der Merkliste gespeichert, abhängig davon, ob sich ein Käufer im Shop angemeldet hat oder nicht:

▪ohne Anmeldung: Speicherung für die Dauer eines Shop-Besuchs (einer Session)

▪mit Anmeldung: für spätere Shop-Besuche dauerhaft gespeichert

Der Käufer kann die gemerkten Produkte auf einfache Weise in den Warenkorb legen.

Insbesondere für Stammkunden ist die Merkliste von großem Nutzen.

Inhalt

Produkt auf Merkliste setzen

Produkt per AJAX auf die Merkliste setzen

"Gemerkte" Produkte kennzeichnen

Merkliste anzeigen

Produkt auf Merkliste setzen

Positionieren Sie auf der Einzelproduktansicht eine entsprechende Schaltfläche, z. B. unterhalb der Schaltfläche "In den Warenkorb".

Referenz: BT-MemoList

Durch Anklicken des Buttons wird das Produkt auf die Merkliste gesetzt. Die Anzeige wechselt anschließend zur Merkliste.

Produkt per AJAX auf die Merkliste setzen

Sie können einen Käufer bei aktiviertem JavaScript ein gewähltes Produkt per AJAX auf die Merkliste setzen lassen. Die aktuelle Seite wird dabei nicht verlassen, sondern die Erfolgs- oder Fehlermeldungen werden in DIV-Containern dynamisch angezeigt.

Hinweis:

Diese Funktion verwendet AJAX- und Layertechnik. Deshalb ist dieses Feature nur verfügbar, wenn der Käufer in seinem Browser JavaScript aktiviert hat. Ist JavaScript nicht aktiviert, wird als Folgeseite die Merkliste angezeigt. Zur Realisierung der Techniken wird die WEBSALE JavaScript-Bibliothek (mindestens Version 1.8.1) vorausgesetzt. Näheres zu dieser Systembibliothek finden Sie unter: Materialien: WEBSALE JavaScript-Bibliothek

Funktionsweise

Mit einem Klick auf die Schaltfläche "Produkt auf die Merkliste setzen" wird ein JavaScript aufgerufen. Dieses startet die AJAX-Kommunikation und verhindert, dass die Seite der Merkliste im Browser des Kunden geladen wird. Stattdessen wird eine Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann z. B. ein Layer eingeblendet werden, welcher z. B. eine "Bitte warten"-Grafik beinhaltet.

Tritt bei der AJAX-Kommunikation ein Fehler auf (z. B. weil die Internetverbindung des Kunden nicht mehr besteht), wird eine andere Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann z. B. der Layer mit der Ladegrafik wieder ausgeblendet und ein Informationslayer eingeblendet werden.

Die AJAX-Anfrage wird bei erfolgreicher Kommunikation von WEBSALE V8s angenommen und bearbeitet. Es wird das Template der Merkliste zurückgegeben, auf dem Template kann durch Tags unterschieden werden, ob die Anfrage mit AJAX oder als normaler Aufruf ausgeführt wurde.

Alle Templates, welche mit AJAX-Technik verwendet werden, haben einen besonderen Aufbau:

<WS-Ajax-ID1>
....
</WS-Ajax-ID1>
<WS-Ajax-ID2>
....
</WS-Ajax-ID2>

Referenz: WS-Ajax-ID

Das Template ist in beliebig viele dieser Sektionen eingeteilt, die alle mit dem Präfix "WS-Ajax-" beginnen. Die anschließende ID können Sie frei wählen. Bei einem AJAX-Aufruf wird durch die WEBSALE JavaScript-Systembibliothek automatisch der Inhalt jeder Sektion in den div-Container mit der entsprechenden ID geladen. Hierdurch können mehrere Inhalte automatisch getauscht werden, z. B. die Anzahl an Produkten auf der Merkliste aktualisiert werden.

Abhängig vom Erfolg wird eine Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann z. B. der Layer mit der Ladegrafik aus- und die Erfolgs- bzw. Fehlermeldung von WEBSALE V8s in einem anderen Layer eingeblendet werden. Ebenso können weitere JavaScript-basierte Effekte erzeugt werden.

Wenn Templates sowohl mit AJAX- als auch normalen Aufrufen verwendet werden, sollten die entsprechenden AJAX-Bestandteile mit {ST-Ajax} geklammert werden, damit diese bei normalen Aufrufen nicht angezeigt werden:

{ST-Ajax}
  <WS-Ajax-ID1>
{/ST-Ajax}
    ....
{ST-Ajax}
  </WS-Ajax-ID1>
{/ST-Ajax}

{ST-Ajax}
  <WS-Ajax-ID2>
{/ST-Ajax}
    ....
{ST-Ajax}
  </WS-Ajax-ID2>
{/ST-Ajax}

Referenz: ST-Ajax

Referenz: WS-Ajax-ID

Anpassung des Templates zur Anzeige der Merkliste

Sie benötigen auf dem Template der Merkliste zwei Bereiche, in denen die Erfolgs- bzw. Fehlermeldungen bei einem AJAX-Aufruf angezeigt werden:

...


{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="...">~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>Es befinden sich ~WS-MemoListEntries~ auf Ihrer Merkliste:</p>
    {CAT-Data}
      <ul>
        {@PR-Data}
          <li>~PR-Name~</li>
        {/@PR-Data}
      </ul>
    {/CAT-Data}
  </WS-Ajax-Memo-Info>
{/ST-Ajax}

...

Referenz: ST-Ajax

Referenz: MSG-MemoList_Notify

Referenz: WS-MemoListEntries

Integration in ein beliebiges Template

Sie müssen das Template, von dem aus Sie ein Produkt per AJAX auf die Merkliste legen möchten, in 5 Schritten erweitern:

1. Einbinden der benötigten JavaScripts im Head-Bereich des Templates

Damit binden Sie die WEBSALE JavaScript-Systembibliothek ein.
Die Designkomponente ist in den Beispielen (s. u.) enthalten.

2. Legen Sie div-Container für Informations- und Fehleranzeigen an

Wir empfehlen, die Container "über" die Seite zu legen, da sie dann stets sichtbar sind, z. B.:

<div id="AJAXMemoInfo" style="display:none; position: fixed; top: 100px; margin:auto; background-color: red; width: 400px; height: 200px;">
   AJAX start, Ladegrafik anzeigen.
</div>

<div id="AJAXMemoError" style="display:none; position: fixed; top: 100px; margin:auto; background-color: red; width: 400px; height: 200px;">
    Fehler bei AJAX-Kommunikation.
    <br>
    <a onclick="javascript:$('#AJAXMemoError').hide(); return false;" href="">schließen</a>
</div>

<div id="Memo-Error" style="display:none; background-color:red; position: fixed; top: 100px; margin:auto; background-color: red; width: 400px; height: 200px;">
    Fehler Produkt auf die Merkliste setzen
</div>

<div id="Memo-Info"  style="display:none; position: fixed; top: 100px; margin:auto; background-color: green; width: 400px; height: 200px;">
    Info: Produkt wurde auf die Merkliste gesetzt.
</div>

Diese Container werden je nach Bedarf per JavaScript eingeblendet, der Inhalt ggf. ausgetauscht. Die jeweils angezeigten Inhalte informieren den Käufer über den Zustand seiner Aktion.

3. Vergeben Sie jedem Produkt-Formular eine eindeutige ID

4. Fügen Sie an jede Schaltfläche "Produkt auf die Merkliste setzen" ein JavaScript-onClick-Event ein

Dieses veranlasst die AJAX-Kommunikation und verhindert, dass die Seite neu geladen wird.

Achten Sie darauf, dass der erste Parameter der Funktion die ID der Form enthält, in der die Schaltfläche liegt:

Referenz: BT-MemoList

5. Fügen Sie die gewünschten JavaScript-Effekte in den dazugehörigen Funktionen ein

Dies erfolgt in der Designkomponente der WEBSALE JavaScript-Systembibliothek, die folgendermaßen voreingestellt ist:

//////////////////////////////////////////////////////////////////////////////////////////
//    Modul: "Produkt per AJAX auf die Merkliste setzen"                                //
//////////////////////////////////////////////////////////////////////////////////////////

//Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
//Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
function ws_AJAXaddToMemolistStart()
{
        //Blendet die Fehler- und Infocontainer aus sowie den Ladecontainer ein
        $('#AJAXMemoError').hide();
        $('#Memo-Error').fadeOut("slow");
        $('#AJAXMemoInfo').fadeIn("slow");
}

//Diese Funktion wird aufgerufen, wenn Produkt(e) auf die Merkliste gesetzt werden konnten
//Mit dieser Funktion ist die Erfolgsmeldung realisierbar
function ws_AJAXaddToMemolistResponseSuccess()
{
        //Blendet den Ladecontainer aus
        $('#AJAXMemoInfo').fadeOut("slow");
        //Der Container mit der Information, dass ein Produkt auf die Merkliste gesetzt wurde inklusive des Kurzinhalts der Merkliste.
        //Dieser Container wird nach 3 Sekunden wieder ausgeblendet
        $('#Memo-Info').fadeIn("slow");
        window.setTimeout("$('#Memo-Info').fadeOut('slow')", 3000);
}

//Diese Funktion wird aufgerufen, wenn ein Produkt nicht auf die Merkliste gesetzt werden konnte
//Mit dieser Funktion lässt sich die von WEBSALE V8s erzeugte Fehlermeldung ausgeben
function ws_AJAXaddToMemolistResponseError()
{
        //Blendet den Ladecontainer aus und die Hinweismeldung ein
        $('#AJAXMemoInfo').fadeOut("slow");
        $('#Memo-Error').fadeIn("slow");
}

//Diese Funktion wird aufgerufen, wenn die AJAX-Kommunikation fehlschlug
//Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler anzeigen (z. B. wenn die Internetverbindung unterbrochen wurde)
function ws_AJAXaddToMemolistError()
{
        //Blendet den Ladecontainer aus und den AJAX-Fehlercontainer ein
        $('#AJAXMemoInfo').fadeOut();
        $('#AJAXMemoError').fadeIn();
}

Referenz: WEBSALE JavaScript-Systembibliothek

Tracking-Schnittstelle

Wenn Sie die Trackingschnittstelle in Verbindung mit dieser Funktion verwenden möchten, beachten Sie bitte die Hinweise in Bezug auf AJAX-basierte Funktionen:

Wegweiser: Beschreibung der Tracking-Schnittstelle

"Gemerkte" Produkte kennzeichnen

Produkte, die sich bereits auf der Merkliste befinden, können auf den folgenden Seiten gekennzeichnet werden:

▪Produktübersichtsseite (ws_category.htm)

▪Suchergebnisseite (ws_search.htm)

▪Produktdetailansicht (ws_product.htm)

▪Cross-Links-Anzeige

▪sonstige Produktlisten

Bei einem Produkt mit unterschiedlichen Varianten bleibt der Produktindex identisch. Wenn Sie ein Produkt mit der Variante A auf die Merkliste setzen und das gleiche Produkt mit der Variante B aufrufen, zeigt das Tag WS-PRIndexInMemolist an, dass das Produkt (ungeachtet etwaiger Varianten) bereits in der Merkliste vorhanden ist. Das Tag WS-PRNumberInMemolist differenziert und zeigt an, dass sich das Produkt mit der ausgewählten Variante noch nicht auf der Merkliste befindet.

Verwenden Sie für die Kennzeichnung "gemerkter" Produkte auf dem gewünschten Template folgende Tags:

▪wenn das Produkt anhand des Produktindex' identifiziert werden soll: das Tag WS-PRIndexInMemolist

▪wenn das Produkt anhand der Produktnummer identifiziert werden soll: das Tag WS-PRNumberInMemolist

Beispiel:

...
{@PR-Data}
    ...
    {WS-PRIndexInMemolist}
        Das Produkt (ungeachtet etwaiger Varianten) befindet sich auf der Merkliste.
    {/WS-PRIndexInMemolist}
     ...
    {WS-PRNumberInMemolist}
        Das Produkt mit dieser Variante befindet sich auf der Merkliste.
    {/WS-PRNumberInMemolist}
    ...
{/@PR-Data}
....

Referenz: WS-PRIndexInMemolist

Referenz: WS-PRNumberInMemolist

Merkliste anzeigen

Bei den gezeigten Produktdaten (Preis, Beschreibung, Produktnummer etc.) in der Merkliste handelt es sich stets um die aktuellen Daten des Produkts.

Produkte, die nicht mehr existieren, werden automatisch aus der Merkliste entfernt.

Produkte, die auf "inaktiv" gesetzt wurden, werden in der Merkliste nicht angezeigt. Diese verbleiben jedoch in der Merkliste und werden bei einer späteren Reaktivierung des Produkts wieder angezeigt.

Bei Varianten in der Merkliste, die nicht mehr existieren, ist die Funktion "In den Warenkorb legen" deaktiviert. Ein Link führt den Käufer zum aktuellen Produkt, wo er die neuen Varianten auswählen kann.

Parameter in der Shopkonfiguration shop.config

In der Shopkonfiguration shop.config im Abschnitt NotifyMessages-Txt müssen Sie die Mitteilungen an den Käufer eintragen (Parameter EmtpyMemoList und MemoListLogin).

Referenz: Abschnitt NotifyMessages-Txt

Template der Merkliste gestalten

Für die Merkliste wird ein eigenes Template benutzt. Den Namen des Templates müssen Sie in die Shopkonfiguration shop.config, Abschnitt <Templates>, Parameter MemoList eintragen.

Referenz: Abschnitt Templates

Die Produkte in der Merkliste können wie gewöhnliche Produkte einer Kategorie angezeigt werden. Natürlich werden auch alle gewählten Varianten zum Produkt angezeigt.

Auch das Blättern ist in der Merkliste möglich.

{Cat-Data}
{@PR-Data}
   ...
   Produktdaten der Merkliste
   <a href="~PR-DepVarLink~">zum Produkt</a>
   ...
{/@PR-Data}
{/Cat-Data}

Wegweiser: Gewähltes Produkt anzeigen

Weitere zulässige Tags:

▪MSG-MemoList_Notify: Multifunktionale Meldungen für die Merkliste (Die Texte hierzu werden in der Shopkonfiguration shop.config, Abschnitt NotifyMessages-Txt eingetragen.)
Referenz: MSG-MemoList_Notify
Referenz: Abschnitt NotifyMessages-Txt

▪PR-DeleteMemoListEntry: Link zum Löschen eines Eintrags in der Merkliste
Referenz: PR-DeleteMemoListEntry

▪PR-MemoListDate: Datum, wann das Produkt auf die Merkliste gesetzt wurde
Referenz: PR-MemoListDate

▪PR-MemoListTime: Uhrzeit, wann das Produkt auf die Merkliste gesetzt wurde
Referenz: PR-MemoListTime

▪ST-MemoListOrder_OK: Bereich wird angezeigt, wenn ein Produkt aus der Merkliste heraus bestellbar ist. WEBSALE V8s prüft hierbei, ob die gemerkten Varianten zum Produkt noch gültig sind
Referenz: ST-MemoListOrder_OK

▪PR-MemoListVariations: Komplette Anzeige der ausgewählten Varianten bzw. abhängigen Varianten. Eingaben für eventuelle Texteingabefelder eines Produkts
Referenz: PR-MemoListVariations

▪WS-MemoListEntries: Anzahl der Produkte auf der Merkliste
Referenz: WS-MemoListEntries

Styles der gewählten Varianten

Die gewählten Varianten listet WEBSALE V8s in einer Tabelle untereinander auf. Diese Tabelle können Sie mittels Styles gestalten.

Referenz: Styles für Varianten der Merkliste

Aufruf/Verlinkung zur Merkliste

Eine Verlinkung zur Merkliste ist von jedem Template aus möglich. Der Link lautet:

<a href="~WS-MemoListLink~">Zur Merkliste</a>