Custom AJAX on cart page not working first time after quantity change

Hi All,

I’m stuck with an AJAX problem – XHR not jQuery – in my customised Storefront theme. I’m new to AJAX so I feel I’m missing something obvious.

My theme has three shipping packages:

1. Versandkostenpauschale (standard shipping for in-stock items)
2. Nachlieferung (later delivery for out-of-stock items)
3. Abholung vor Ort (kostenfrei) (local pickup)

The problem occurs on the cart page.

Here is a description of the normal and wanted behaviour:
When I put an item into the cart, for example on the ’Start’ page, and then move to the cart page I have the choice to switch between two shipping methods. When I do, a message in the item description informs me about the anticipated delivery time.
For example, when I switch to ‘Abholung vor Ort (kostenfrei)’ (local pickup). The message in the item description reads ‘Abholung vor Ort: in ca. 1 Werktag’. When I switch back to ‘Versandkostenpauschale’ (standard shipping) the message reads ‘Lieferzeit: 3 – 4 Werktage’.

Description of problem behaviour:
The problem happens when I change the quantity of an item, let’s say to 2, on the cart page. All seems to work, the cart updates, the mini-cart updates, everything seems as it should. However, something behind the scenes isn’t updating or getting lost. When I now change the shipping method the corresponding message in the item description doesn’t get udated. But when I switch back and forth between the shipping methods the message is being updated on the second attempt.

All works after a proper page reload, for example when first visiting the cart page, but stops working as intended after a quantity change. When I then do a page refresh it works again, until I do another quantity change.

Here is my AJAX code to change the messages in the item description, which is placed at the end of the WooCommerce cart-totals.php page:

<script>
document.querySelectorAll('input[name="shipping_method[0]"]').forEach((elem) => {
elem.addEventListener("change", function (event) {
		if (elem.value === 'local_pickup:6') {
			let xhr = new XMLHttpRequest();
			let url = '../wp-content/themes/storefront-child/assets/txt/abholung_vor_ort_1_werktag.txt';
			let method = 'GET';
			xhr.open(method, url, true);
			xhr.responseType = 'text';
			xhr.onload = () => {
				if (xhr.status === 200) {
					let collection = document.getElementsByClassName("order_notification");
					for (let i = 0; i < collection.length; i++) {
						collection[i].innerHTML = xhr.responseText;
					}	
				}
			};
			xhr.send(null);
		} else if (elem.value === 'flat_rate:1') {
			let xhr = new XMLHttpRequest();
			let url = '../wp-content/themes/storefront-child/assets/txt/lieferzeit_3_4_werktage.txt';
			let method = 'GET';
			xhr.open(method, url, true);
			xhr.responseType = 'text';
			xhr.onload = () => {
				if (xhr.status === 200) {
					let collection = document.getElementsByClassName("order_notification");
					for (let i = 0; i < collection.length; i++) {
						collection[i].innerHTML = xhr.responseText;
					}
				}
			};
			xhr.send(null);
		};
	});
});
</script>

<script>
document.querySelectorAll('input[name="shipping_method[1]"]').forEach((elem) => {
	elem.addEventListener("change", function (event) {
		if (elem.value === 'local_pickup:6') {
			let xhr = new XMLHttpRequest();
			let url = '../wp-content/themes/storefront-child/assets/txt/abholung_vor_ort_7_werktage.txt';
			let method = 'GET';
			xhr.open(method, url, true);
			xhr.responseType = 'text';
			xhr.onload = () => {
				if (xhr.status === 200) {
					let collection = document.getElementsByClassName("backorder_notification");
					for (let i = 0; i < collection.length; i++) {
						collection[i].innerHTML = xhr.responseText;
					}
				}
			};
			xhr.send(null);
		} else if (elem.value === 'flat_rate:7') {
			let xhr = new XMLHttpRequest();
			let url = '../wp-content/themes/storefront-child/assets/txt/nachlieferung.txt';
			let method = 'GET';
			xhr.open(method, url, true);
			xhr.responseType = 'text';
			xhr.onload = () => {
				if (xhr.status === 200) {
					let collection = document.getElementsByClassName("backorder_notification");
					for (let i = 0; i < collection.length; i++) {
						collection[i].innerHTML = xhr.responseText;
					}
				}
			};
			xhr.send(null);
		};
	});
});
</script>

I would appreciate any hint that sends me in the right direction. Thanks in advance.

Kind regards
Arno

The page I need help with: [log in to see the link]