WooCommerce: mit Ajax “Zum Warenkorb hinzufügen”

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:

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.

Wasserdichte Angebote schreiben in nur 10 Minuten?

Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.

Mehr erfahren

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)', (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.

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!

Michael

PS: Bei den Website Heroes gibt es einen Workshop über WooCommerce. Gleich informieren.