In Jquery, How to capture the data within <span>product_price</span> in the event of a change in the product price?

Question

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

Answer 1

to getting update when price is updated in configurable product you can create mixin for swatch-renderer.js and then you can add your code inside updateprice function.

ex.

Add below files.

Vendor/Module/view/frontend/requirejs-cionfig.js

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'Vendor_Module/js/swatch-renderer-mixins': true
            }
        }
    }
};

Vendor/Module/js/swatch-renderer-mixins.js

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';

    return (targetModule) => {
        var updatePrice = targetModule.prototype._UpdatePrice,
            updatePriceWrapper;

        updatePriceWrapper = wrapper.wrap(updatePrice, function (original) {
            var jsonConfig = this.options.jsonConfig;

            // you can perform your custom task here.


            return original();
        });

        targetModule.prototype._UpdatePrice = updatePriceWrapper;
        return targetModule;
    };
});

I hope this will help you to done your work.

Thank you

Answer 2

I answer my own question in case someone else ever finds himself in the same shoe as I was. Please free to ask for any clarification if needed.

   $("#product-options-wrapper select").change(function() {
      alert('Hello! Event triggered');

      // setTimeout() used to ensure a time interval between Magento populating the span
      // and jQuery reading the span.
      setTimeout(function() {
        // Get the value of the span element
        var price = $(".price-box .normal-price .price-wrapper span.price").html();
        alert('Changed Price is: ' + price );

        // 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' });
        }
      }, 250);
    });
}