16

I need to extend Magento_Catalog/js/price-box.js. I have used the 'mixins' feature, but it's not working for price-box.js.

requirejs-config.js:

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/price-box': {
                'My_Module/js/price-box/pluggin': true
            }
        }
    }
};

My_Module/view/frontend/web/js/price-box/pluggin.js

define(function () {
    'use strict';

    return function (target) { 
        // modify target
        var reloadPrice = target.reloadPrice;
        target.reloadPrice = function() {
           cosole.log("hello");
        };
        return target;
    };
});
1

1 Answer 1

13
  1. Specify PriceBox js file in your custom module's requirejs-config.js with the same name by which its already declared in core modules. in our case it is priceBox like below. Your modules requirejs-config.js would be something like

    var config = {
        map: {
             '*': {
                    priceBox:'namespace_modulename/js/custompricebox',
             }
        }
    };
    
  2. Now, create the file custompricebox.js to the path specified above. i am assuming you want to extend reloadPrice method in price-box. so your custompricebox.js would be like below.

    define(
        [
            'jquery',
            'Magento_Catalog/js/price-utils',
            'underscore',
            'mage/template',
            'mage/priceBox',
            'jquery/ui'
        ],
        function ($, utils, _, mageTemplate) {
    
            'use strict';
    
            $.widget('yournamespace.custompriceBox', $.mage.priceBox, {
                /**
                 * Render price unit block.
                 */
                reloadPrice: function reDrawPrices() {
    
                    var priceFormat = (this.options.priceConfig && this.options.priceConfig.priceFormat) || {},
                        priceTemplate = mageTemplate(this.options.priceTemplate);
    
                    _.each(this.cache.displayPrices, function (price, priceCode) {
                        price.final = _.reduce(price.adjustments, function(memo, amount) {
                            return memo + amount;
                        }, price.amount);
    
                        // you can put your custom code here. 
    
                        price.formatted = utils.formatPrice(price.final, priceFormat);
    
                        $('[data-price-type="' + priceCode + '"]', this.element).html(priceTemplate({data: price}));
                    }, this);
                },
    
    
            });
    
            return $.yournamespace.custompriceBox;
        }
    );
    
  3. Please note this code is not tested. there might be some syntex errors. let me know if you need more help on this.

5
  • Hi Yagnesh, Can we achieve it via Mixin ? Instead of override it, can we extend it too ? Apr 22, 2016 at 9:28
  • @PrafulRajput, I don't use mixin yet, i will surely update you on this once i do it. Apr 22, 2016 at 9:33
  • 2
    somehow this does not work for me (ver. 2.1.2). Also mage/priceBox does give me some script error.
    – TrytoFly
    Jan 4, 2017 at 8:58
  • 1
    Did someone succeeded to rewrite it through Mixin ? Sep 4, 2017 at 8:21
  • any update on this? Feb 25, 2020 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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