15

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;
    };
});
12
  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.

  • Hi Yagnesh, Can we achieve it via Mixin ? Instead of override it, can we extend it too ? – Praful Rajput Apr 22 '16 at 9:28
  • @PrafulRajput, I don't use mixin yet, i will surely update you on this once i do it. – Codrain Technolabs Pvt Ltd Apr 22 '16 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 '17 at 8:58
  • 1
    Did someone succeeded to rewrite it through Mixin ? – Pol Ravalitera Sep 4 '17 at 8:21

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.