Overriding Magento 2 core js function

Question

I need to override the 'loadArea' and 'loadAreaResponseHandler' magento core js functions in the file module-sales/view/adminhtml/web/order/create/scripts.js.

I tried to use mixin property. Following is my mixin js file.

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

return function (target) {
    console.log("Called this Hook.");
    var loadArea = target.loadArea;
    target.loadArea = function (area, indicator, params) {
        var deferred = new jQuery.Deferred();
        var url = this.loadBaseUrl;
        if (area) {
            area = this.prepareArea(area);
            url += 'block/' + area;
        }
        if (indicator === true)
            indicator = 'html-body';
        params = this.prepareParams(params);
        params.json = true;
        if (!this.loadingAreas)
            this.loadingAreas = [];
        if (indicator) {
            this.loadingAreas = area;
            new Ajax.Request(url, {
                parameters: params,
                loaderArea: indicator,
                onSuccess: function (transport) {
                    var response = transport.responseText.evalJSON();
                    this.loadAreaResponseHandler(response);
                    deferred.resolve();
                    var orderHead = /Word_to_be_replaced/g;
                    var matchRes = response.header.match(orderHead);
                    if (matchRes) {
                        var newHead = response.header.replace(/Word_to_be_replaced/g, "new_word");
                        jQuery('#order-header').html(newHead);
                    }
                }.bind(this)
            });
        } else {
            new Ajax.Request(url, {
                parameters: params,
                loaderArea: indicator,
                onSuccess: function (transport) {
                    deferred.resolve();
                }
            });
        }
        if (typeof productConfigure != 'undefined' && area instanceof Array && area.indexOf('items') != -1) {
            productConfigure.clean('quote_items');
        }
        return deferred.promise();
    };

    var loadAreaResponseHandler = target.loadAreaResponseHandler;
    target.loadAreaResponseHandler = function (response) {
        if (response.error) {
            alert({
                content: response.message
            });
        }
        if (response.ajaxExpired && response.ajaxRedirect) {
            setLocation(response.ajaxRedirect);
        }
        if (!this.loadingAreas) {
            this.loadingAreas = [];
        }
        if (typeof this.loadingAreas == 'string') {
            this.loadingAreas = [this.loadingAreas];
        }
        if (this.loadingAreas.indexOf('message') == -1) {
            this.loadingAreas.push('message');
        }
        if (response.header) {
            var orderHead = /Order/;
            var matchRes = response.header.match(orderHead);
            if (matchRes) {
                var newHead = response.header.replace(/Word_to_replace/g, "New_Word");
                jQuery('.page-actions-inner').attr('data-title', newHead);
                jQuery('#id').html(newHead);
            } else {
                jQuery('.page-actions-inner').attr('data-title', response.header);
            }
        }

        for (var i = 0; i < this.loadingAreas.length; i++) {
            var id = this.loadingAreas[i];
            if ($(this.getAreaId(id))) {
                if ('message' != id || response[id]) {
                    $(this.getAreaId(id)).update(response[id]);
                    console.log(response[id]);
                }
                if ($(this.getAreaId(id)).callback) {
                    this[$(this.getAreaId(id)).callback]();
                }
            }
        }
    }
  };
});

I'm getting the following error

scripts-mixin.js:13 Uncaught TypeError: Cannot read property 'loadArea' of undefined

Kindly help me to point out my mistake.

Answer 1

Seems that your script is not correct you may try this code.

define([
    'Magento_Sales/order/create/scripts',
], function (target) {
    'use strict';

    var mixin = {

       your customization here...


    };

    return target.extend(mixin);

});