Is it possible to refresh a specific price option widget in Magento 2 without a full page reload?

Question

I am working with custom options in Magento 2 and have implemented logic to update the product price dynamically. Additionally, I have added custom logic to update the custom option prices within the widget configuration. My goal is to refresh or reload only the price option widget when these prices change, without reloading the entire page. Is there a way to achieve this in JavaScript, specifically by targeting a single widget?

Answer 1

Solution: Use RequireJS to target the price widget and reinitialize it:

require(['jquery', 'mage/priceBox'], function ($) {
function refreshPriceWidget() {
    var priceBox = $('.price-box'); // Adjust selector based on your widget
    if (priceBox.data('mage-priceBox')) {
        priceBox.priceBox('reloadPrices'); // Reload the prices dynamically
    }
}

// Trigger the refresh when prices update
$(document).on('customPriceUpdate', function () {
    refreshPriceWidget();
});
    $(document).trigger('customPriceUpdate');
});