Michael Baierl – WordPress-Profi aus Wien.

WooCommerce: mit Ajax “Zum Warenkorb hinzufügen”

Ohne die Seite neu zu laden

WooCommerce: mit "Ajax" zum Warenkorb hinzufügen

Was ich an WooCommerce nicht verstehe ist, warum die Seite beim Hinzufügen eines Produktes zum Warenkorb von der Produkt-Seite selbst komplett neu geladen wird. Bei der Übersicht der Produkte klappt das schließlich auch einwandfrei, ohne die ganze Seite neu zu laden.

Einige Themes ändern diese Funktionalität und fügen das Produkt auf der Produkt-Seite via Ajax zum Warenkorb hinzu, ohne die gesamte Seite neu zu laden.

Aber was machst du, wenn dein Theme diese Funktion nicht bietet? Genau vor dieser Herausforderung stand ich vor kurzem in einem Kundenprojekt …

Inhalt

Vorteile von Ajax für die “In den Warenkorb legen”-Funktion

Den großen Vorteil habe ich oben schon angeschnitten. Durch das asynchrone Hinzufügen des Produktes zum Warenkorb muss die ganze Website nicht neu geladen werden.

Das

  • verbraucht weniger Bandbreite am Server,
  • reduziert damit die Last am Server,
  • erhöht damit für alle Website-Besucher die Geschwindigkeit und
  • steigert damit deine Verkäufe!

Also durchaus etwas, das lohnenswert ist!

Aber wie aktivierst du jetzt diese Funktion? Dafür gibt es zwei Möglichkeiten:

Die schnelle Lösung: ein WordPress-Plugin

Die einfachste, aber vielleicht nicht immer zu deinem Theme kompatible, Lösung ist der Einsatz dieses WordPress-Plugins:

WordPress Plugin "Ajax add to cart for WooCommerce"
WordPress Plugin „Ajax add to cart for WooCommerce“

Oder eines der ca. 100 anderen Plugins, die bei der Suche auftauchen ;-)

Der große Nachteil: wieder ein Plugin mehr installiert, das eventuell Funktionen oder Werbung mit sich bringt, die du nicht möchtest.

7 Bausteine für dein Online-Business

Du träumst von deinem eigenen Online-Business, weißt aber nicht genau, wie du starten sollst? 

Hole dir gleich meinen Report über die
7 Bausteine für dein Online-Business –
für Newsletter-Abonnenten kostenlos.
Also jetzt anmelden!

Die Abmeldung vom Newsletter ist jederzeit möglich. Details in der Datenschutzerklärung.

Die professionelle Lösung: ein kurzes Snippet

Einige der Lösungen, die ich gefunden habe (wie auch einige der gefundenen Plugins) sind sehr aufwendig programmiert. Dabei ist gar nicht so viel Code nötig, da WooCommerce von Haus aus schon alles mitbringt, was für ein “Ajax Add to Cart” notwendig ist.

Dieses kurze JavaScript-Snippet rüstet die Funktion nach und verwendet dabei serverseitig die vorhandenen WooCommerce-Funktionen:

jQuery(document).on('click', '.single_add_to_cart_button:not(.disabled)', function (e) {
    e.preventDefault();

    const $this = jQuery(this);
    const $form = $this.closest('form.cart');
    let data = $form.serializeArray();
    
    data.push({
        name: 'product_id',
        value: $form.find('input[name=variation_id]').val() || $form.find('button').val(),
    });

    jQuery(document).trigger('adding_to_cart', [$this, data]);

    jQuery.ajax({
        type: 'POST',
        url: woocommerce_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
        data: data,
        beforeSend: () => {
            $this.removeClass('added').addClass('loading');
        },
        complete: () => {
            $this.addClass('added').removeClass('loading');
        },
        success: (response) => {
            if (response.error && response.product_url) {
                window.location = response.product_url;
                return;
            }

            jQuery(document).trigger('added_to_cart', [response.fragments, response.cart_hash, $this]);
        },
    });

    return false;
});

Das Snippet

  • holt sich die notwendigen Daten aus dem Produkt-Formular
  • löst die standardmäßigen Events von WooCommerce aus
  • übermittelt die Daten direkt an den WooCommerce-Ajax-Endpunkt
  • triggert anschließend nochmals das WooCommerce-Standard-Event

Füge das Snippet entweder in die JavaScript-Datei deines Child-Themes ein oder verwende das Code Snippets-Plugin, um es einzufügen.

Code-Schnipsel einfach zu WordPress hinzufügen
Code-Schnipsel einfach zu WordPress hinzufügen

Funktioniert dieses Snippet noch?

Das Snippet ist bei meiner Website im Einsatz und funktioniert einwandfrei. Da sich WooCommerce und WordPress aber ständig weiterentwickeln kann es sein, dass es bei dir nicht mehr funktioniert.

Hinterlasse mir in diesem Fall bitte einen kurzen Kommentar mit deinen Änderungen, damit ich das Snippet anpassen kann!

Danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Projektanfrage

Wobei kann ich dich unterstützen?