0

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

enter image description here

0

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

| improve this answer | |
  • HI, Does this have to be under app/code or design or either of them? – CodeForGood May 18 at 11:32
  • This can be under module or you can also use this in theme as well – Nirav Patel May 18 at 19:07
  • But getting updated price from a SPAN element is done in the browser. I find it difficult to understand how this module helps accomplish it? – CodeForGood May 19 at 11:23
0

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);
    });
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.