Magento2: How can I override core js module price-box.js

Question

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

• Codrain Technolabs Pvt Ltd: Yogesh, Give some more information about this.

Answer 1

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.

• Praful Rajput: Hi Yagnesh, Can we achieve it via Mixin ? Instead of override it, can we extend it too ?
• Codrain Technolabs Pvt Ltd: @PrafulRajput, I don't use mixin yet, i will surely update you on this once i do it.
• TrytoFly: somehow this does not work for me (ver. 2.1.2). Also mage/priceBox does give me some script error.
• Pol Ravalitera: Did someone succeeded to rewrite it through Mixin ?
• Kowsigan Atsayam: any update on this?