jQuery Aktionen nachdem in WooCommerce via Ajax Produkt hinzugefügt oder entfernt wurde

basket, wildflowers, summer
foto von jillwllington auf pixabay

Wer schon mal den Inhalt eines HTML-Elements (jenseits von Formularfeldern) „im Auge“ behalten sollte, stieß vielleicht schon auf  MutationObserver.

Im Zusammenhang mit Ajax-Aktionen allerdings sind MutationObersever-Funktionen nicht so hilfreich, da die Bindung verloren gehen kann. Jedenfalls passierte gar nichts, als ich ein Element zum Warenkorb hinzufügte oder entfernte. Die Veränderung am Inhalts des Counters wurde nicht erkannt.

jQuery(document).ajaxComplete(function(){...});

funktionierte nur nach dem Hinzufügen eines Produkts über den „zum Warenkorb hinzufügen“-Button. Beim Entfernen eines Produkts über das „Mini-Warenkorb“-Dropdown hingegen wurde die Änderung im Counter wieder nicht erkannt. Im Internet zu suchen brachte mich nicht weiter. Im Plugin WooCommerce stieß ich dann allerdings auf add-to-cart.js und fand dort folgendes Snippet

	/**
	 * AddToCartHandler class.
	 */
	var AddToCartHandler = function() {
		this.requests   = [];
		this.addRequest = this.addRequest.bind( this );
		this.run        = this.run.bind( this );

		$( document.body )
			.on( 'click', '.add_to_cart_button', { addToCartHandler: this }, this.onAddToCart )
			.on( 'click', '.remove_from_cart_button', { addToCartHandler: this }, this.onRemoveFromCart )
			.on( 'added_to_cart', this.updateButton )
			.on( 'ajax_request_not_sent.adding_to_cart', this.updateButton )
			.on( 'added_to_cart removed_from_cart', { addToCartHandler: this }, this.updateFragments );
	};

Um also meine Aktionen durchzuführen, musste ich lediglich added_to_cart und removed_from_cart überprüfen. Allerdings musste ich eine kleine Zeitverzögerung einbauen, da die Änderung des Wertes nicht umgehend erfolgte, und ich daher anfangs auch wieder ein falsches Ergebnis zurückbekam.

jQuery(document.body).on('added_to_cart removed_from_cart', function () {      
        setTimeout(function() {
            // do something;
        }, 250 ); // verzögerung 250 MS, ggf. ausprobieren
    });

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

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

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable