Magento – How to override Magento 2 js using Mixins

javascriptknockoutjsmagento2mixinsoverrides

I want to override the js file in module-checkout/view/frontend/web/js/model/cart/totals-processor/default.js using mixins. Here is my requirejs code:

var config = 
{
    config: 
    {
        mixins: 
        {
            'Magento_Checkout/js/model/cart/totals-processor/default':
            {
                'Anowave_Ec/js/totals-processor/default/plugin': true
            }
        }
    }
};

And here is my override file 

define(function () {
    'use strict';

    var mixin = {
        estimateTotals: function (address) {
            var serviceUrl, payload;
            totalsService.isLoading(true);
            serviceUrl = resourceUrlManager.getUrlForTotalsEstimationForNewAddress(quote),
                payload = {
                    addressInformation: {
                        address: _.pick(address, this.requiredFields)
                    }
                };

            if (quote.shippingMethod() && quote.shippingMethod()['method_code']) {
                payload.addressInformation['shipping_method_code'] = quote.shippingMethod()['method_code'];
                payload.addressInformation['shipping_carrier_code'] = quote.shippingMethod()['carrier_code'];
            }

            storage.post(
                serviceUrl, JSON.stringify(payload), false
            ).done(
                function (result) {
                    quote.setTotals(result);
                    /** I added new codes on this part **/
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                }
            ).always(
                function () {
                    totalsService.isLoading(false);
                }
            );
        }
    };

    return function (target) { // target == Result that Magento_Ui/.../columns returns.
        return target.extend(mixin); // new result that all other modules receive
    };
});

I simply followed the documentation on Magento2 site but I'm getting errors like

target is not a function

Best Answer

These some ways to overwrite core Magento 2 JS using mixin

  • With js file returned $.mage.[widgetName]

    Your target file must be using $.widget:

ex: source file: Magento_Checkout/js/shopping-cart

return function(originalShoppingCart){
        $.widget('mage.shoppingCart',originalShoppingCart, {
             //Overwrite function here.
        });
        return $.mage.shoppingCart;
}
  • With js file returned an Object: return { /* Code */ };

Must Return target variable

    return function (target) {
        var registerStep = target.registerStep;
        target.registerStep = function (code, alias, title, isVisible, navigate, sortOrder) {
            //Before Function.. 
            registerStep.apply(this,[code, alias, title, isVisible, navigate, sortOrder]); //Remove this line to skip call default function. 
            //After Function 
        };
        return target;
    };

Update: More detail: Rewrite JS in Magento 2

Related Topic