Below is the code written to capture the updated price from within <span class="price">Price</span>
as the price changes on one choosing a variant of a product from the drop-down. I find the event handler below is not even being called when change event happens. Please show me what is not right in it or an alternative to achieve my goal? Thank you.
jQuery(".price-box .normal-price .price-wrapper span.price").on("DOMSubtreeModified", function() {
alert('Just an alert');
console.log('Hello, I am changed from old price');
// Get the value of the span element
var price = $(".price-box .normal-price .price-wrapper span.price").html();
// Clean and Convert the value to cents
var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);
// If value is different from existing Klarna product placement value, update it.
// and then call Klarna with refresh-event to refresh the placement.
var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
if (priceCents != oldPurchaseAmt) {
$(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);
// Trigger event to refresh
window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
}
});