Ein Klick der ein Produkt hinzufügt und das Warenkorbsymbol aktualisiert.
Das ist das Ziel und ehrlich gesagt ist es ziemlich einfach zu erreichen.
Dennoch bekommen wir oft anfragen, wie das nun zu lösen sei.
Easy!
WooCommerce bringt alles mit, um dynamisch mit Ajax ein Produkt dem Warenkorb hinzuzufügen und das Warenkorbsymbol zu aktualisieren.
Alles ohne die Seite zu verlassen oder neu zu laden, eben mit AJAX!
Die Ausgangslage ist diese:
Nach dem Klick auf das Plus-Symbol soll ein Stück des Produktes in den Warenkorb wandern und so ausschauen, wenn ich den Button fünf mal anklicke:
Wie schaut der Code hinter dieser Lösung aus?
Ich trau mich das ja fast gar nicht zu veranschaulichen, aber es braucht nicht mehr als folgenden Code:
Was passiert hier?
- Es wird ein stinknormaler Link gesetzt, ohne eigenes Ajax-Handling, ohne einen eigenen AJAX-Call, den ich selbst schreiben müsste.
- Im href übergebe ich die Produkt-ID (=post_ID) mit ?add-to-cart=
- Beim Klicken auf den Link wird das Absenden unterbunden und es werden die Data-Parameter ausgelesen und per AJAX weitergeschickt.
- Dafür braucht es zwingend das „data-product_id“ Attribut mit der Produkt-ID (=post_ID)
- Zwingend sind auch die CSS-Klassen „add_to_cart_button“ und „ajax_add_to_cart“
Das war die ganze Magie!
Damit hat man einen funktionierenden Link, der ein Produkt zum Warenkorb hinzufügt.
Genau so macht es auch das de facto Standard-WooCommerce-Theme „Storefront“, was in folgendem (fast sinnlosen :D ) Video veranschaulicht wird:
Es gibt nur einen Fallstrick!
Damit diese Links funktionieren braucht es die Datei „add-to-cart.js“
Wenn WooCommerce oder dein Theme diese Datei nicht geladen hat, funktioniert der AJAX-Call natürlich nicht.
Denn in der Datei „add-to-cart.js“ steckt der ganze Code für das dynamische Handling.
Genauer gesagt wird nicht die „add-to-cart.js“ geladen, sondern die minimierte Version aus
plugins/woocommerce/assets/js/frontend/add-to-cart.min.js
Die Code-Stellen in WooCommerce hinter dieser Funktionalität.
Wer sich näher in die Thematik reinhängen will, findet folgende Infos hilfreich.
WooCommerce lauscht in der Datei „add-to-cart.js“ auf jeden Klick der CSS-Klasse „add_to_cart_button“
Die ersten Schritte sind nun die Überprüfungen. Wie oben erwähnt, braucht es die Klasse „ajax_add_to_cart“ und das Data-Attribut „data-product_id“.
Wenn das alles passt, kommt es zum AJAX-CALL:
Der wichtige Part ist in dem Screenshot folgender:
Denn dadurch passieren die ganzen Aktualisierungen, die man auch oben im Video sieht!
Shortcode!
Es gibt auch einen Shortcode, der einen Add-To-Cart-Button erzeugt.
Mit dem Shortcode [add_to_cart_url] bekomme ich einen Link, mit dem man das aktuelle Produkt in der Single-Produkt-Seite zum Warenkorb hinzufügen kann. Mehr Doku dazu gibt es unter https://woocommerce.com/document/woocommerce-shortcodes/#add-to-cart-url .
Weiterführende Links
- Es lohnt sich immer, in der Klasse WC-AJAX herumzustöbern: https://woocommerce.github.io/code-reference/classes/WC-AJAX.html
- Weitere Artikel zum Thema WooCommerce und Ajax: