I am working on a UiComponent that is designed to be placed on a product page and needs to change its content based on the final price of the product. If the price of the product changes (e.g. in response to the user selecting different options on a configurable product) I need it to adapt it's content to the new price. I want all this to happen on the client side without additional AJAX calls.

The solution I've come up with involves using jQuery to bind to the reloadPrice event on the magePriceBox jQuery widget and then get the price from its cache.displayPrices.finalPrice.amount member. While this works it seems like a hack to me as I am accessing private data of magePriceBox and don't even know if the reloadPrice event is meant to be bound to anything other than price box itself (i.e. internal event). All this is further complicated by the fact that there may be more price boxes in the product page (e.g. one for each related product, upsell etc), which makes the jQuery selector depend on the theme (and any layout modifications it may apply).

The solution is like this:

    initObservable: function () {

        $('.product-info-price .price-box').on('reloadPrice', this.onFinalPriceChanged.bind(this));
        return this;

    onFinalPriceChanged: function() {
        var price = $('.product-info-price .price-box')

        // ...rest of processing goes here...

I'm pretty sure the above solution will fail on a future Megento version.

I've also investigated UiComponent property linking (imports, listens etc) but couldn't figure out how that would work out.

So, what is the proper way to get the product final price on the client side either as an observable or as a property and an event fired when that property changes?

Your Answer

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

Browse other questions tagged or ask your own question.