Magento2: Extend Magento widget JS

[gabs77]

Magento 2.1.2

Steps to reproduce

I create in app/code/Namespace/Modulename/view/frontend/requirejs-config.js
var config = { map: { '*': { priceBox:'namespace_modulename/js/custompricebox', } } };

In app/code/Namespace/Modulename/view/frontend/web/js/custompricebox.js

`
define(
[
'jquery',
'Magento_Catalog/js/price-utils',
'underscore',
'mage/template',
'mage/priceBox',
'jquery/ui'
],
function ($, utils, _, mageTemplate) {

    'use strict';
    console.log('test');
    $.widget('namespace_modulename.custompricebox', $.mage.priceBox, {
        reloadPrice: function reDrawPrices() {

console.log('test');
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 $.namespace_modulename.custompricebox;
}

);
`

Expected result

1. On load product page, the browser load custompricebox.js
2. the console developer have the following text : test

Actual result

1. On load product page, the browser don't load custompricebox.js
2. the console developer don't have the following text : test
   

[martijnhovinga]

Please consult: http://alanstorm.com/magento_2_and_requirejs/

[gabs77]

I have already read this article and several others article.
Some developers try with me and we can't make it with success.
Maybe we missing something

[omiroshnichenko]

Hi @gabs77, I hope you have already make this step, and here the link to mixins functionality that you need to solve your issue. Also, here is an example:
In your app/code/Namespace/Modulename/view/frontend/requirejs-config.js

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

In app/code/Namespace/Modulename/view/frontend/web/js/custompricebox.js:

define([
    'jquery',
    'Magento_Catalog/js/price-utils',
    'underscore',
    'mage/template',
    'jquery/ui'
], function ($, utils, _, mageTemplate) {
    'use strict';

    return function (priceBox) {
        console.log('test');
        return $.widget('mage.priceBox', priceBox, {
            reloadPrice: function reDrawPrices() {
                console.log('test');
                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);

                    alert()
                    // 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);
            }
        });
    };
});

[aholovan]

Hi guys,
I've used in standalone module the next code:

1) requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Catalog/js/price-box': 'Namespace_Modulename/js/price-box'
        }
    },
    deps: [
        "priceBox"
    ]
};

2) price-box.js

define([
    'jquery',
    'priceBox'
], function ($, priceBox) {
    'use strict';
    priceBox.prototype.onUpdatePrice = function onUpdatePrice(event, prices) {
......
        return this.updatePrice(prices);
    };

    return priceBox;
});

[gabs77]

I will try it soon thanks

[pravalitera]

@omiroshnichenko Sometimes it loads the original price-box.js, sometimes mine.

Do you know why ?

edit: i am on 2.1.8 . I'm getting crazy about all this rewrite thing of JS in magento 2...

[Ctucker9233]

@pravalitera I would guess it is still in your cache somewhere.

[magento-engcom-team]

@gabs77, thank you for your report.
We were not able to reproduce this issue by following the steps you provided. If you'd like to update it, please reopen the issue.
We tested the issue on 2.3.0-dev, 2.2.0, 2.1.9

[bogdan50five]

I am heaving the same issue on 2.2.3

[Kashiffrq]

Hi @gabs77, I hope you have already make this step, and here the link to mixins functionality that you need to solve your issue. Also, here is an example:
In your app/code/Namespace/Modulename/view/frontend/requirejs-config.js

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

In app/code/Namespace/Modulename/view/frontend/web/js/custompricebox.js:

define([
    'jquery',
    'Magento_Catalog/js/price-utils',
    'underscore',
    'mage/template',
    'jquery/ui'
], function ($, utils, _, mageTemplate) {
    'use strict';

    return function (priceBox) {
        console.log('test');
        return $.widget('mage.priceBox', priceBox, {
            reloadPrice: function reDrawPrices() {
                console.log('test');
                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);

                    alert()
                    // 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);
            }
        });
    };
});

Recommanded

[miteshdhaduk]

@Kashiffrq I use Magento 2.3 and Magento 2.3.1. File call but the function can not trigger using a mixin. Every time gets data from core price-box.js.