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.

Angebote schreiben in 10 Minuten - mit der ultimativen Angebotsvorlage für Web-Designer, Webprogrammierer und Online-Marketer

Wasserdichte Angebote schreiben in nur 10 Minuten?

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

Lerne 7 Tricks, wie andere Webdesigner arbeiten und wirklich Geld verdienen

7 Tricks, wie andere Web-Professionals arbeiten und wirklich Geld verdienen

Das eBook für Web-Designer, Grafiker und Online-Marketer.

Hast du es satt, im Internet stundenlang nach Lösungen zu suchen?

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.

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!

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

Über den Autor

Michael
Hi, ich bin Michael Baierl und bin WordPress-Profi aus Wien. Ich arbeite mit Web-Designern, die vor der Herausforderung stehen, an die richtigen Kunden zu kommen. In meiner WordPress-Community – den Website Heroes – finden Web-Designer alles, um großartige Websites für ihre Kunden zu erstellen und finanziell erfolgreich zu sein: regelmäßige Weiterbildung, Austausch, Feedback, schnelle Problemlösung und Co-Working.

2 Antworten

  1. Keine Sorge

    Das Code-Snippet, dass du zu speichern versuchst, hat einen fatalen Fehler in Zeile 1 produziert:

    syntax error, unexpected ‚)‘, expecting variable (T_VARIABLE)
    Die vorherige Version des Snippets ist unverändert und der Rest dieser Website sollte wie vorher normal funktionieren.

    Bitte verwende den Zurück-Button in deinem Browser um zur vorherigen Seite zurückzukehren und versuche, den Code-Fehler zu beheben. Wenn es dir lieber ist, kannst du diese Seite schließen und die Änderungen, die du gerade gemacht hast, verwerfen. Es werden keine Änderungen an dieser Website vorgenommen.

Schreibe einen Kommentar

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

Projektanfrage

Wobei kann ich dich unterstützen?
Angebote schreiben in 10 Minuten - mit der ultimativen Angebotsvorlage für Web-Designer, Webprogrammierer und Online-Marketer

Wasserdichte Angebote schreiben in nur 10 Minuten?

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