How to extend admin js in magento 2 by mixins

Question

I want to overide

Magento_Sales/adminhtml/web/order/create/scripts.js

I wrote require-config.js for this

var config = {
 config: {
 mixins: {
 'Magento_Sales/adminhtml/web/order/create/scripts.js': {
 'Magento_Sales/web/order/create/scripts-mixins.js': true
 }
 }
 }
};

My implementation is in file

Magento_Sales/web/order/create/scripts-mixins.js
define([
 "jquery",
 'Magento_Ui/js/modal/confirm',
 'Magento_Ui/js/modal/alert',
 "mage/translate",
 "prototype",
 "Magento_Catalog/catalog/product/composite/configure",
 'Magento_Ui/js/lib/view/utils/async'
], function(jQuery, confirm, alert){
 return AdminOrder.prototype = {
 setCustomerId : function(id){
 return false;
 this.customerId = id;
 this.loadArea('header', true);
 $(this.getAreaId('header')).callback = 'setCustomerAfter';
 $('back_order_top_button').hide();
 $('reset_order_top_button').show();
 }
 }
});

But its not working. its always executing parent class function.

Answer 1

You may not use js mixin for the particular js file you try to override (i.e /vendor/magento/module-sales/view/adminhtml/web/order/create/scripts.js). Also, your require-config.js declaration is wrong but this not matter since mixin will not work for the js file /vendor/magento/module-sales/view/adminhtml/web/order/create/scripts.js

You may try below steps to override this AdminOrder class of the scripts.js file

I assume you are using a custom Module "Company_MyModule"

Step 1)

Create a xml file sales_order_create_index.xml under /app/code/Company/MyModule/view/adminhtml/layout

File : /app/code/Company/MyModule/view/adminhtml/layout/sales_order_create_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> 
 <referenceContainer name="js">
 <block class="Magento\Backend\Block\Template" template="Company_MyModule::order/create/js.phtml" name="create2"/>
 </referenceContainer>
</page> 

step 2)

Create a phtml file js.phtml under /app/code/Company/MyModule/view/adminhtml/templates/order/create

File : /app/code/Company/MyModule/view/adminhtml/templates/order/create/js.phtml

<script>
require([
 "prototype",
 "Company_MyModule/js/order/create/scripts"
], function(){
});
</script>

step 3)

Create js file scripts.js under /app/code/Company/MyModule/view/adminhtml/web/js/order/create to override AdminOrder class.

File: /app/code/Company/MyModule/view/adminhtml/web/js/order/create/scripts.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/* global AdminOrder */
define([
 'jquery',
 'Magento_Sales/order/create/scripts'
], function (jQuery) {
 'use strict';
 AdminOrder.prototype.setCustomerId = function(id){
 //console.log("override setCustomerId called");
 return false;
 this.customerId = id;
 this.loadArea('header', true);
 $(this.getAreaId('header')).callback = 'setCustomerAfter';
 $('back_order_top_button').hide();
 $('reset_order_top_button').show();
 }
});

step 4)

Clear your Magento Cache and alson remove adminhtml static files also.

php bin/magento cache:clean
sudo rm -rf pub/static/adminhtml/*

Answer 2

I am curious to know why would Magento won't allow using mixins on such file... any quick explanation about it?

Answer 3

Actually, there is another way to extend a class method that worked for me. Example:

scripts-mixins.js

define([], function () {
 'use strict';
 if (typeof AdminOrder !== "undefined") {
 (function(setCustomerId) {
 AdminOrder.prototype.setCustomerId = function() {
 // console.log('replaced');
 var result = setCustomerId.apply(this, arguments);
 // custom logic here
 return result;
 };
 })(AdminOrder.prototype.setCustomerId);
 }
 // another implementation... (works the same)
 // var setCustomerId = AdminOrder.prototype.setCustomerId;
 // AdminOrder.prototype.setCustomerId = function() {
 // // console.log('replaced');
 // var result = setCustomerId.apply(this, arguments);
 //
 // // custom logic here
 //
 // return result;
 // };
});

Inspired: https://stackoverflow.com/a/10057969/12298367

• aryos: for me, AdminOrder is always undefined, thus I need to access it with window. prefix