Warenkorbaktualisierung

 

Warenkorbaktualisierung mit Benutzer-Feedback

Mit der REST-API ist es möglich, Elemente im Shop zu aktualisieren, ohne die Seite dafür neu laden zu müssen. In diesem Beispiel wird die REST-API verwendet, um die Anzahl der Artikel im Warenkorb zu aktualisieren und die Warenkorbvorschau drei Sekunden einzublenden, nachdem der Kunde einen Artikel in den Warenkorb gelegt hat.

Verwendete REST-URIs:

Der in diesem Beispiel gezeigte Code kann nach jedem Button eingefügt werden, der im Bereich der ItemView-Templates verwendet wird und das CLASS-Attribut mit dem Wert add_Basket_Item besitzt.

Voraussetzungen

Für dieses Fallbeispiel wird Folgendes vorausgesetzt:

  • Grundkenntnisse des Frameworks jQuery
  • Verwendung des Designs callisto_light

Artikel serverseitig ablegen

Ein Artikel wird durch Aufrufen der REST-URI /rest/checkout/basketitemslist/ mit der POST-Methode serverseitig in den Warenkorb gelegt.

Unten finden Sie ein Beispiel für einen Aufruf, über den ein Artikel per REST an den Server gesendet wird.

<script type="text/javascript"> {# Senden der Artikel an den Server per REST-Methode. #} $.ajax( "/rest/checkout/basketitemslist/", { type: 'POST', dataType: 'json', data: article, success: function () { {# Ist das Ablegen der Artikel auf dem Server positiv, wird diese Funktion ausgeführt. #} }, error: function () { {# Fehlerbehandlung #} } } ); </script>

Frontend aktualisieren

Nachdem ein Artikel serverseitig in den Warenkorb gelegt wurde, müssen die Elemente im Frontend aktualisiert werden, damit dem Kunden die neue Artikelanzahl angezeigt wird. Dazu wird zunächst die neue Anzahl der Artikel im Warenkorb über die REST-Schnittstelle abgefragt.

Artikel im Warenkorb berechnen

Mit der REST-URI /rest/checkout/basketitemslist/ wird durch die GET-Methode die aktuelle Anzahl der Artikel im Warenkorb abgefragt.

Verschiedene Artikel können verschiedene Mengen haben. Es ist daher nötig, alle Artikel zu iterieren und die Gesamtmenge zu addieren. Die Artikel aus dem Warenkorb befinden sich im data-Array des Response-Objekts, das der Success-Funktion übergeben wird. Die Eigenschaft BasketItemQuantity beschreibt die Anzahl eines Artikels. Nachdem die Anzahl der Artikel im Warenkorb berechnet wurde, wird das jQuery-Element $('#basket_quantity'), das die Anzahl der Artikel im Warenkorb anzeigt, aktualisiert.

Unten finden Sie ein Beispiel für einen REST-Aufruf, um die Anzahl der Artikel im Warenkorb abzufragen und zu addieren.

<script type="text/javascript"> {# Abrufen des aktuellen Stands des Warenkorbs. Dieses Code-Beispiel veranschaulicht die Berechnung der Anzahl der Artikel die sich im Warenkorb befinden und welche Manipulationen im Frontend angewandt werden müssen, um die Warenkorbvorschau zu aktualisieren. #} $.ajax( "/rest/checkout/basketitemslist/", { type: 'GET', dataType: 'json', {# Verlief das Abrufen des aktuellen Stands des Warenkorbs positiv, wird die Success-Funktion aufgerufen. #} success: function(response) { {# Berechnen der Anzahl der Arikel im Warenkorb. #} var count = 0; $.each(response.data, function(i, el) { count += el.BasketItemQuantity; }); {# Ersetzen der Anzahl der Artikel im Warenkorb im Header-Menü. #} $('#basket_quantity').text(count); {# Entsperren des Warenkorbmenüs, wenn der Warenkorb vorher leer war. #} $("[data-plenty-basket-empty]").removeClass("disabled"); }, error: function() { {# Fehlerbehandlung #} } } ); </script>

Warenkorbliste aktualisieren

In diesem Schritt wird die veraltete Liste des Warenkorbs durch die neue Liste ersetzt. Der REST-URI /rest/itemview/container_itemviewbasketpreviewlist/ liefert ein HTML-Fragment zurück, das nur noch an der gewünschten Stelle eingefügt werden muss.

Wie im Beispiel zuvor, befindet sich das HTML-Fragment im Response-Objekt, das der Success-Funktion übergeben wird - ebenfalls im data-Array. Das HTML-Element, das im Design callisto_light die Warenkorbvorschau enthält, können Sie mit dem jQuery-Selektor $('[data-plenty-remotetabs-id="aside"]') wählen. Die veraltete Warenkorbliste wird entfernt, indem die jQuery-Funktion empty() auf das zuvor gewählte Element angewendet wird. Dadurch ist sichergestellt, dass nicht zwei Warenkorblisten in der Warenkorbvorschau auftauchen. Um die Warenkorbvorschau anschließend für wenige Sekunden einzublenden, wird der jQuery-Selektor $(".isBasketPreview > .dropdown-menu") verwendet. Für die Zeitverzögerung, um die Warenkorbvorschau wieder auszublenden, empfiehlt es sich, die native JavaScript-Funktion setTimeout() zu verwenden.

Unten finden Sie ein Code-Beispiel, um die Warenkorbvorschau zu aktualisieren und den Warenkorb drei Sekunden einzublenden.

<script type="text/javascript"> {# Aktualisieren der Warenkorbliste in der Warenkorbvorschau. Der REST-URI gibt ein HTML-Fragment mit einer Liste der im Warenkorb befindlichen Artikeln zurück. Wenn der Aufruf erfolgreich war, wird die alte Warenkorbliste mit der neuen vom Server generierten Liste ersetzt. Im Anschluss wird die Warenkorbvorschau für 3 Sekunden eingeblendet. #} $.ajax( "/rest/itemview/container_itemviewbasketpreviewlist/", { type: "GET", dataType: "json", {# Verlief das Abrufen der aktuellen Liste des Warenkorbbestands positiv, wird die Success-Funktion aufgerufen. #} success: function(response) { {# Vor dem Einfügen des Containers mit der Warenkorbliste, wird der Container mit der "alten" Liste durch die Funktion "empty()" entfernt. Danach wird die neue Liste eingefügt. #} $('[data-plenty-remotetabs-id="aside"]').empty().append($(response.data[0])); {# Einblenden des Warenkorbs. #} $(".isBasketPreview > .dropdown-menu").fadeIn(); setTimeout(function() { {# Ausblenden des Warenkorbs nach 3 Sekunden. #} $(".isBasketPreview > .dropdown-menu").removeAttr("style"); }, 3000); }, error: function() { {# Fehlerbehandlung #} } } ); </script>

Zusammengefasstes Code-Beispiel

Das folgende Code-Beispiel enthält alle Operationen, die auf dieser Seite behandelt wurden, um die Anzahl der Artikel im Warenkorb und den Warenkorb im Header-Bereich zu aktualisieren und die Warenkorbvorschau für drei Sekunden einzublenden.

{# In diesem Beispiel wird einem Button-Element ein Click-Event angehangen, das - einen ausgewählten Artikel serverseitig in den Warenkorb legt, - den neuen Warenkorbbestand abruft, - aus dem Warenkorbbestand die Anzahl der Artikel im Warenkorb berechnet, - eine aktuelle Liste der im Warenkorb befindlichen Arikeln als HTML-Fragment vom Server anfordert, - die Warenkorblist der Warenkorbvorschau mit dieser Liste ersetzt und - die Warenkorbvorschau für 3 Sekunden einblendet. #} <button type="button" class="btn btn-primary add_To_Basket"> <span class="glyphicon glyphicon-shopping-cart"></span> in den Warenkorb </button> <script type="text/javascript"> (function($) { {# Minimalbeispiel für ein Artikel-Objekt. #} var article = JSON.stringify( [{ BasketItemItemID: $ID, {# ID des Artikels, den Sie in den Warenkorb legen wollen. #} BasketItemPriceID: $PriceID, {# Die ID des Preissets des Artikels. #} BasketItemQuantity: 1 {# Die Stückzahl der Artikel die Sie in den Warenkorb legen wollen. #} }]); {# Hinzufügen eines Click-Events an Button mit der CSS-Klasse "add_To_Basket". #} $(".add_To_Basket").click(function() { {# Senden der Artikel an den Server per REST-Methode. #} $.ajax( "/rest/checkout/basketitemslist/", { type: 'POST', dataType: 'json', data: article, success: function () { {# Sofern das Ablegen der Artikel auf dem Server positiv verlaufen ist, wird diese Funktion ausgeführt. #} {# Abrufen des neuen/aktuellen Stand des Warenkorbs. #} $.ajax( "/rest/checkout/basketitemslist/", { type: 'GET', dataType: 'json', success: function(response) { {# Sofern das Abrufen des aktuellen Stand des Warenkorbs positiv verlief, wird diese Funktion aufgerufen. #} var count = 0; $.each(response.data, function(i, el) { count += el.BasketItemQuantity; }); {# Ersetzen der Anzahl der Artikel im Warenkorb im Header-Menü. #} $('#basket_quantity').text(count); {# Entsperren des Warenkorbmenüs, wenn der Warenkorb vorher leer war. #} $("[data-plenty-basket-empty]").removeClass("disabled"); }, error: function() { {# Fehlerbehandlung #} } } ); {# Aktualisieren der Warenkorbliste in der Warenkorbvorschau. Der REST-URI gibt ein HTML-Fragment mit einer Liste der im Warenkorb befindlichen Artikeln zurück. #} $.ajax( "/rest/itemview/container_itemviewbasketpreviewlist/", { type: "GET", dataType: "json", success: function(response) { {# Sofern das Abrufen der aktuellen Liste des Warenkorbbestands positiv verlief, wird diese Funktion aufgerufen. #} {# Vor dem Einfügen des Containers mit der Warenkorbliste, wird erst der Container mit der "alten" Liste durch die Funktion empty() entfernt. #} $('[data-plenty-remotetabs-id="aside"]').empty().append($(response.data[0])); {# Einblenden des Warenkorbs. #} $(".isBasketPreview > .dropdown-menu").fadeIn(); setTimeout(function() { {# Ausblenden des Warenkorbs nach 3 Sekunden. #} $(".isBasketPreview > .dropdown-menu").removeAttr("style"); }, 3000); }, error: function() { {# Fehlerbehandlung #} } }); }, error: function () { {# Fehlerbehandlung #} } } ); }); })(jQuery); </script>
Nach oben