Produkt per AJAX in den Warenkorb legen

Standardmäßig landet der Käufer nach dem Klick auf „In den Warenkorb” auf der Warenkorbseite. Mit AJAX bleibt er stattdessen dort, wo er gerade ist, und bekommt die Rückmeldung in eingeblendeten Containern. Der Unterschied fällt vor allem auf Kategorieseiten ins Gewicht. Wer mehrere Artikel aus einer Liste sammelt, will nicht nach jedem Klick zurücknavigieren, um den nächsten zu finden. Die Funktion setzt aktiviertes JavaScript voraus. Ist es abgeschaltet, greift der gewöhnliche Weg und der Käufer landet auf der Warenkorbseite. Sie brauchen dafür nichts zusätzlich einzurichten, müssen den Warenkorb aber als funktionierende Rückfallebene mitdenken. Vorausgesetzt wird außerdem die WEBSALE JavaScript-Bibliothek ab Version 1.8.1.

Wie die Funktion arbeitet

Der Klick auf die Schaltfläche ruft ein JavaScript auf. Dieses startet die AJAX-Kommunikation und unterbindet, dass der Browser die Warenkorbseite lädt. Stattdessen ruft es eine Funktion Ihrer Designkomponente auf, in der Sie beispielsweise eine Ladeanzeige einblenden. Danach entscheidet das Ergebnis über das weitere Vorgehen:

Ergebnis	Der Shop liefert	Aufgerufen wird
alle Produkte übernommen	das Erfolgs-Template	`ws_AJAXaddToBasketResponseSuccess()`
mindestens ein Produkt abgelehnt	das Fehler-Template	`ws_AJAXaddToBasketResponseError()`
keine Verbindung zustande gekommen	gar nichts	`ws_AJAXaddToBasketError()`

Ein Produkt wird beispielsweise dann abgelehnt, wenn es nicht mehr verfügbar oder der Lagerbestand aufgebraucht ist.

Der Aufbau der beiden Templates

Beide Templates sind in beliebig viele Bereiche eingeteilt. Deren Namen beginnen mit WS-Ajax- und enden mit einer frei gewählten, eindeutigen Kennzeichnung:

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

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

Die Bibliothek lädt den Inhalt jedes Bereichs automatisch in den div-Container mit der gleichnamigen ID auf Ihrer Seite. So tauschen Sie mit einem einzigen Aufruf mehrere Stellen gleichzeitig aus, beispielsweise die Erfolgsmeldung und den Kurzwarenkorb im Seitenkopf. Innerhalb der AJAX-Templates klammern Sie mit {[ST-AJAX](/v8s/referenz/tags/st/seitenzustand-und-navigation#die-tags-im-uberblick)} Bereiche, die ausschließlich bei einem AJAX-Aufruf erscheinen sollen. Im Code heißt das Tag durchgängig ST-AJAX in Großschreibung.

Schritt 1: Templates anlegen und zuweisen

Legen Sie zwei neue Templates an, eines für den Erfolgs- und eines für den Fehlerfall, und passen Sie beide Ihrem Design an.

<Templates>
   BasketAjaxSuccess = ws_basket_ajax_success.htm
   BasketAjaxError   = ws_basket_ajax_error.htm
</Templates>

Referenz: Abschnitt Templates

Schritt 2: Fehlermeldung hinterlegen

Diese Meldung erscheint, wenn der Käufer die Schaltfläche betätigt, ohne eine Auswahl oder eine Menge angegeben zu haben.

<NotifyMessages-Txt>
   NoBasketInput = Bitte geben Sie die gewünschte Menge ein oder treffen Sie eine Auswahl.
</NotifyMessages-Txt>

Referenz: Abschnitt NotifyMessages-Txt

Schritt 3: Bibliotheken einbinden

Beide Dateien gehören in den Kopfbereich des Templates, von dem aus der Käufer Produkte in den Warenkorb legt.

<head>
   <script src="/$WS/ws_sysdata/js/ws-system-1.8.1.js"></script>
   <script src="/$WS/ws_sysdata/js/ws-design-1.8.1.js"></script>
</head>

Die erste Datei ist die Systembibliothek, die zweite die Designkomponente mit den Funktionen aus Schritt 7.

Schritt 4: Container für die Meldungen anlegen

Vier Container decken die möglichen Zustände ab. Legen Sie sie über die Seite, damit sie unabhängig von der Scrollposition sichtbar sind.

<div id="AJAXInfo" class="ws-overlay" hidden>
   Einen Moment bitte.
</div>

<div id="AJAXError" class="ws-overlay" hidden>
   Die Verbindung zum Shop ist unterbrochen. Bitte versuchen Sie es erneut.
   <a href="#" onclick="$('#AJAXError').hide(); return false;">Schließen</a>
</div>

<div id="WK-Error" class="ws-overlay" hidden>
   Das Produkt konnte nicht in den Warenkorb gelegt werden.
</div>

<div id="WK-Info" class="ws-overlay" hidden>
   Das Produkt liegt im Warenkorb.
</div>

Die Gestaltung gehört in Ihr Stylesheet, nicht in die Attribute. Die Klasse ws-overlay übernimmt Positionierung und Aussehen. Unterscheiden Sie die beiden Fehlerfälle auch in der Formulierung. „Das Produkt ist nicht mehr verfügbar” und „Die Verbindung ist unterbrochen” verlangen vom Käufer Unterschiedliches: einmal eine andere Wahl, einmal einen zweiten Versuch.

Schritt 5: Formular mit einer ID versehen

Jedes Produktformular auf der Seite braucht eine eindeutige ID, denn das JavaScript spricht es darüber an.

<form action="~FORM-Product~" method="post" name="product" id="productform">

Auf einer Kategorieseite steht das Formular je Produkt einmal. Vergeben Sie dort fortlaufende IDs, sonst legt jede Schaltfläche dasselbe Produkt in den Warenkorb.

Schritt 6: Schaltfläche mit onclick versehen

Der erste Parameter ist die ID aus Schritt 5. Das return davor verhindert, dass das Formular zusätzlich abgeschickt und die Seite neu geladen wird.

<button type="submit"
   onclick="return ws_AJAXaddToBasket('productform', '~BT-ProductAddToBasket_Ajax~', '~WS-Charset~')">
   In den Warenkorb
</button>

Schritt 7: Rückruffunktionen füllen

Die vier Funktionen gehören in Ihre Designkomponente. Sie entscheiden darin, was der Käufer zu sehen bekommt.

// vor dem Absetzen der AJAX-Anfrage
function ws_AJAXaddToBasketStart() {
   $('#AJAXError').hide();
   $('#WK-Error').fadeOut("slow");
   $('#AJAXInfo').fadeIn("slow");
}

// alle Produkte konnten übernommen werden
function ws_AJAXaddToBasketResponseSuccess() {
   $('#AJAXInfo').fadeOut("slow");
   $('#WK-Info').fadeIn("slow");
   window.setTimeout(function () { $('#WK-Info').fadeOut('slow'); }, 3000);

   // Markierung im Kurzwarenkorb dreimal aufblinken lassen
   window.setTimeout(function () {
      $('#WK-Alert').fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
   }, 100);
}

// mindestens ein Produkt konnte nicht übernommen werden
function ws_AJAXaddToBasketResponseError() {
   $('#AJAXInfo').fadeOut("slow");
   $('#WK-Error').fadeIn("slow");
}

// die AJAX-Kommunikation selbst ist fehlgeschlagen
function ws_AJAXaddToBasketError() {
   $('#AJAXInfo').fadeOut();
   $('#AJAXError').fadeIn();
}

Setzen Sie die Trackingschnittstelle ein, beachten Sie deren Hinweise zu AJAX-basierten Funktionen. Ein Seitenaufruf, der nicht stattfindet, wird sonst auch nicht gezählt.

Ohne AJAX auf der Seite bleiben

Es gibt einen zweiten, schlichteren Weg zum selben Ziel. Statt die Warenkorbseite anzuzeigen, kehrt der Shop nach dem Ablegen zur Produktdetailansicht oder zur Kategorieansicht zurück. Die Seite wird dabei neu geladen, es läuft aber kein JavaScript mit.

Schaltfläche	Zielseite nach dem Klick
`~BT-ProductAddToBasket_Ajax_targetProd~`	die Produktdetailansicht
`~BT-ProductAddToBasket_Ajax_targetCat~`	die Kategorieansicht

<form action="~FORM-Product~" method="post">
   <input type="submit" name="~BT-ProductAddToBasket_Ajax_targetCat~" value="In den Warenkorb">
</form>

Ob das Ablegen geklappt hat, prüfen Sie auf der Zielseite mit {[ST-Basket_Success](/v8s/referenz/tags/st/seitenzustand-und-navigation)}:

{ST-Basket_Success}
   Das Produkt liegt in Ihrem Warenkorb.
{/ST-Basket_Success}

Die beiden Tagnamen tragen Ajax im Namen, obwohl diese Variante ohne AJAX auskommt. Lassen Sie sich davon nicht in die Irre führen.

Wegweiser

Produkt per AJAX in den Warenkorb legen

Wie die Funktion arbeitet

Der Aufbau der beiden Templates

Schritt 1: Templates anlegen und zuweisen

Schritt 2: Fehlermeldung hinterlegen

Schritt 3: Bibliotheken einbinden

Schritt 4: Container für die Meldungen anlegen

Schritt 5: Formular mit einer ID versehen

Schritt 6: Schaltfläche mit onclick versehen

Schritt 7: Rückruffunktionen füllen

Ohne AJAX auf der Seite bleiben

Verwandte Themen

​Wie die Funktion arbeitet

​Der Aufbau der beiden Templates

​Schritt 1: Templates anlegen und zuweisen

​Schritt 2: Fehlermeldung hinterlegen

​Schritt 3: Bibliotheken einbinden

​Schritt 4: Container für die Meldungen anlegen

​Schritt 5: Formular mit einer ID versehen

​Schritt 6: Schaltfläche mit onclick versehen

​Schritt 7: Rückruffunktionen füllen

​Ohne AJAX auf der Seite bleiben

​Verwandte Themen

Wie die Funktion arbeitet

Der Aufbau der beiden Templates

Schritt 1: Templates anlegen und zuweisen

Schritt 2: Fehlermeldung hinterlegen

Schritt 3: Bibliotheken einbinden

Schritt 4: Container für die Meldungen anlegen

Schritt 5: Formular mit einer ID versehen

Schritt 6: Schaltfläche mit onclick versehen

Schritt 7: Rückruffunktionen füllen

Ohne AJAX auf der Seite bleiben

Verwandte Themen