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.
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?
Dann werde Teil der Website Heroes 🚀.
In meiner WP Business Community findest du sofort alle Antworten zu WordPress, technischen Fragen und Plugins: Schnell und übersichtlich aufgebaut. Bring so dein Wissen auf das nächste Level und damit auch dein Business.
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!
PS: Bei den Website Heroes gibt es einen Workshop über WooCommerce. Gleich informieren.
2 Antworten
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.
Lieber Moritz,
da scheint der