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