Produkt per AJAX in den Warenkorb legen

Sie können einen Käufer bei aktiviertem JavaScript die gewählten Produkte per AJAX in den Warenkorb legen lassen. Dabei wird die aktuelle Seite nicht verlassen, sondern die Erfolgs- oder Fehlermeldungen in DIV-Containern dynamisch angezeigt.

Funktionsweise

Mit einem Klick auf die Schaltfläche "Produkt in den Warenkorb legen" wird ein JavaScript aufgerufen. Dieses startet die AJAX-Kommunikation und verhindert, dass die Warenkorbseite im Browser des Kunden geladen wird. Stattdessen wird eine Funktion der Designkomponente der WEBSALE JavaScript-Bibliothek aufgerufen. Dort kann beispielsweise ein Layer eingeblendet werden, der 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-Bibliothek 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. Konnten nicht alle gewählten Produkte in den Warenkorb gelegt werden, wird das AJAX-Fehler-Template aufgerufen (z. B. wenn ein Produkt nicht mehr verfügbar/auf Lager ist), ansonsten wird das AJAX-Erfolgstemplate zurückgegeben.

Ein AJAX-Template ist in beliebig viele Bereiche eingeteilt, deren Namen alle mit dem Präfix "WS-Ajax-" beginnen und jeweils durch eine frei wählbare eindeutige Kennzeichnung (ID) ergänzt werden:

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

Bei einem AJAX-Aufruf wird durch die WEBSALE JavaScript-Bibliothek automatisch der Inhalt jedes Bereichs in den div-Container mit der entsprechenden ID geladen. Hierdurch können mehrere Inhalte automatisch getauscht werden, z. B. die Erfolgsmeldungs-Anzeige und die Anzeige der Warenkorb-Aktualisierung.

Abhängig vom Erfolg wird eine Funktion der Designkomponente der WEBSALE JavaScript-Bibliothek 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. Außerdem können zusätzliche JavaScript-basierte Effekte erzeugt werden.

Shopkonfiguration shop.config ergänzen

Folgende Parameter im Abschnitt <Templates> der Shopkonfiguration shop.config sind erforderlich:

BasketAjaxSuccess =   ws_basket_ajax_success.htm
BasketAjaxError   =   ws_basket_ajax_error.htm

Referenz: Abschnitt <Templates>

Außerdem wird der Abschnitt <NotifyMessages-Txt> in der Shopkonfiguration shop.config mit folgendem Parameter benötigt:

<NotifyMessages-Txt>
   NoBasketInput  =  Bitte treffen Sie ihre Auswahl!
</NotifyMessages-Txt>

Referenz: Abschnitt <NotifyMessages-Txt>

Integration in ein beliebiges Template

Erstellen Sie für die Ausgabe von Erfolgs- bzw. Fehlermeldungen zwei neue Templates "BasketAjaxSuccess" und "BasketAjaxError" und passen Sie diese Ihrem Design an. Erweitern Sie nun mit den folgenden Schritten das Template, von dem aus Sie ein oder mehrere Produkte per AJAX in den Warenkorb legen möchten:

Schritt 1: Benötigte Bibliotheken im Headbereich des Templates einbinden

Zunächst muss ein Script-Link zur JavaScript-Bibliothek gesetzt werden.

<script type="text/javascript" language="JavaScript" src="/$WS/ws_sysdata/js/ws-system-1.8.1.js"></script>

Außerdem muss die folgende JavaScript-Datei, welche die benötigte Funktion zur Verfügung stellt, im HTML-Header des Templates eingebunden werden:

<script type="text/javascript" language="JavaScript" src="/$WS/ws_sysdata/js/ws-design-1.8.1.js"></script>

Schritt 2: div-Container für Informations- und Fehlermeldungen anlegen

Die div-Container sollten "über" die Seite gelegt werden, damit sie stets sichtbar sind:

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

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

<div id="WK-Error" style="display:none; background-color:red; position: fixed; top: 100px; margin:auto; background-color: red; width: 400px; height: 200px;">
    (<: Produkt konnte nicht in Warenkorb gelegt werden.)
</div>

<div id="WK-Info"  style="display:none; position: fixed; top: 100px; margin:auto; background-color: green; width: 400px; height: 200px;">
    (Info: Produkt wurde in den Warenkorb gelegt.)
</div></pre>

Schritt 3: Eindeutige IDs festlegen

Vergeben Sie für jede verwendete Produkt-Form eine eindeutige ID:

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

Schritt 4: JavaScript onclick-Event hinzufügen

Fügen Sie ein onClick-Event zu jeder Schaltfläche "Produkt in den Warenkorb legen" hinzu, welches die AJAX-Kommunikation veranlasst und gleichzeitig verhindert, dass die Seite neu geladen wird. Der erste Parameter dieser Funktion, welcher auch die ID der Form enthält, muss in der Schaltfläche liegen:

<input type=image value="OK" src="buttons/b_in_warenkorb.gif" onclick="return ws_AJAXaddToBasket('productform', '~BT-ProductAddToBasket_Ajax~', '~WS-Charset~')">

Schritt 5: JavaScript-Effekte in den zugehörigen Funktionen einfügen

Alle gewünschten JavaScript-Effekte müssen Sie in der Designkomponente der WEBSALE JavaScript-Bibliothek einfügen, die folgendermaßen voreingestellt ist:

//////////////////////////////////////////////////////////////////////////////////////////
//    Modul: "Produkte per AJAX in den Warenkorb legen"                                 //
//////////////////////////////////////////////////////////////////////////////////////////

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

//Diese Funktion wird aufgerufen, wenn Produkt(e) in den Warenkorb gelegt werden konnten.
//Mit dieser Funktion ist die Erfolgsmeldung realisierbar.
function ws_AJAXaddToBasketResponseSuccess()
{
        //Blendet den Ladecontainer aus
        $('#AJAXInfo').fadeOut("slow");
        //Der Container mit der Information, wie viele Artikel in den WK gelegt wurden wird kurz eingeblendet und nach 3 Sekunden wieder ausgeblendet.
        $('#WK-Info').fadeIn("slow");
        window.setTimeout("$('#WK-Info').fadeOut('slow')", 3000);
        //Der Markierungscontainer im Kurzwarenkorb blinkt 3 mal auf.
        window.setTimeout("$('#WK-Alert').fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500)", 100);
}

//Diese Funktion wird aufgerufen, wenn mindestens ein Artikel nicht in den Warenkorb gelegt werden konnte.
//Mit dieser Funktion laesst sich die von WEBSALE V8s erzeugte Fehlermeldung ausgeben.
function ws_AJAXaddToBasketResponseError()
{
        //Blendet den Ladecontainer aus und die Hinweismeldung ein
        $('#AJAXInfo').fadeOut("slow");
        $('#WK-Error').fadeIn("slow");
}

//Diese Funktion wird aufgerufen, wenn die AJAX-Kommunikation fehlgeschlagen ist.
//Mit dieser Funktion kann auf einen allgemeinen Kommunikationsfehler (z.B. Unterbrechung der Internetverbindung) hingewiesen werden.
function ws_AJAXaddToBasketError()
{
        //Blendet den Ladecontainer aus und den AJAX-Fehlercontainer ein.
        $('#AJAXInfo').fadeOut();
        $('#AJAXError').fadeIn();
}

Tags

Referenz: BT-ProductAddToBasket

Referenz: ST-Ajax