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

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
    });