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.

• Ethan Yehuda: Have you tried following these steps?: magento.stackexchange.com/questions/151827/…

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