How to override particular function of javascript in Magento2

Question

I need to override the particular function (for example : accountFieldsBind) of vendor/magento/module-sales/view/adminhtml/web/order/create/scripts.js

Follow this https://magento.stackexchange.com/questions/272577/how-to-extend-admin-js-in-magento-2-by-mixins — Vipin Garg, Mar 03 '20 at 06:21

score 8 · Answer 1 · answered Jun 21 '18 at 08:21

Add the following to your Require JS config:

var config = {
 config: {
     mixins: {
         'Module_Name/js/path/to/js/file': {
             'Your_Theme/js/path/to/new/js/file': true
         }
     }
 }
};

And inside Your_Theme/js/path/to/new/js/file.js you need to return the function(s) you need to extend. How you do this depends on how the file was written, for example if it's using object literal JS or it's just a singular function.

In my example below I'm extending/overriding a function from a UI component, this._super(); is important to note as this will runthe original function. So if you need to extend the function and do additional logic you can use this, if you want to fully overwrite the function you can leave it out.

define([
    'jquery'
], function ($) {
    'use strict';

    return function (Component) {
        return Component.extend({

            functionYouAreOverriding: function () {
               this._super(); // This will run the original function, you may or may not need this.

                //... Your new code
            }
        });
    }
});

I'm not sure on the exact syntax you need to use as the file you mention uses AdminOrder.prototype, my guess would be:

return AdminOrder.prototype = {
    functionToOverride: function() {
        ...
    }
}

For more info see the official dev docs - https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js_mixins.html

Thanks Ben, Yes I tried this but its not working – Amit Naraniwal Jun 21 '18 at 08:28 — Amit Naraniwal, Jun 21 '18 at 08:28
@AmitNaraniwal did you manage to get it working? – jibin george Jul 23 '19 at 08:59 — jibin george, Jul 23 '19 at 08:59

score 0 · Answer 2 · edited Jun 22 '18 at 05:53

0

Create a new module and add a reqired-config.js in

MyVendor/MyModule/view/frontend/requirejs-config.js

requirejs-config.js

var config = {
    "map": {
        "*": {
            "Magento_Sales/order/create/scripts": "MyVendor_MyModule/js/order/create/scripts",
        }
    }
}

And create

MyVendor/MyModule/view/frontend/web/js/order/create/scripts.js

In you module and this can override the file

edited Jun 22 '18 at 05:53

Chirag Patel

6,126
2
23
65

answered Jun 21 '18 at 07:29

govindaraj

115
1
10

2

This overrides the entire file. OP's question was asking how to override a specific function. – Darren Felton Oct 31 '19 at 14:54

score 0 · Answer 3 · answered Jun 21 '18 at 08:19

Try following way

var config = {
    config: {
        mixins: {
            'Magento_Sales/order/create/scripts': {
                'MyVendor_myModule/js/order/create/scriptUpdate': true
            }
        }
    }
};

OR

var config = {
    "map": {
        "*": {
            "Magento_Sales/order/create/scripts": "MyVendor_myModule/js/order/create/scripts",
        }
    }
}

In that case your overwrite js location

MyVendor/myModule/view/adminhtml/web/js/order/create/scripts.js

Have you an idea about how to override _calcProductPrice function in custom scripts.js file (using mixins)? — Dhaduk Mitesh, Nov 01 '18 at 07:21

score 0 · Answer 4 · edited Mar 24 '20 at 15:33

Follow below URL How to extend admin js in magento 2 by mixins

It will solve the problem.

/* global AdminOrder */
define([
    'jquery',
    'Magento_Sales/order/create/scripts'
], function (jQuery) {
    'use strict';

    AdminOrder.prototype.loadShippingRates = function () {
        var addressContainer = this.shippingAsBilling ?
            'billingAddressContainer' :
            'shippingAddressContainer',
            data = this.serializeData(this[addressContainer]).toObject();

        data['shipto_type'] = document.querySelector("#shipto_type").value;
        data['liftgate'] = document.querySelector("#liftgate").value;

        data['collect_shipping_rates'] = 1;
        this.isShippingMethodReseted = false;
        this.loadArea(['shipping_method', 'totals'], true, data);

        return false;
    }
});

How to override particular function of javascript in Magento2

4 Answers4