3

The Problem

I want to use custom JavaScript in Products/Inventory/Catalog page to modify the "Add Product" button behavior and hide some fields in product edit form (where the SKU, weight, name, qty, etc, of a product, is shown) as well.

What I've Done

For that reason, I've created an admin theme as described in this question: How to create admin theme for Magento2

The admin theme was successfully created and all static content was generated without problems. After that, I tried to load my custom js in all admin pages by doing the following:

In design/adminhtml/myvendor/mytheme/Magento_Theme/adminhtml/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="js/customAdmin"/>        
    </head>
</page>

In folder design/adminhtml/myvendor/mytheme/web/js/ is customAdmin.js

And in design/adminhtml/myvendor/mytheme/web/requirejs-config.js

var config = {
    "shim": {
        "customAdmin": {
            deps: ["jquery"]
        }
    },
    "paths": {
        "customAdmin": "js/customAdmin"
    }
};

Nonetheless, the js file is not loaded on any admin page.

Does anyone know what could be the problem?

Thanks.

3
  • would you be able to share what your customAdmin.js file looks like or the structure of it? I am having the same problems Jan 26, 2017 at 19:26
  • 1
    @mikebertiean This is my customAdmin.js: require( [ 'jquery' ], function($){ function disableSKU(){ // Disable SKU } setTimeout(disableSKU, 10000); } ); What are the problems you're having?
    – A. Martz
    Jan 27, 2017 at 14:25
  • thank you, i was wondering about the structure of what the js file needs to look like more then anything. cheers for that! Feb 2, 2017 at 17:08

1 Answer 1

5

See what is below

requirejs-config.js

var config = {
    map: {
        '*': {
            customAdmin: 'Namespace_Modulename/js/customAdmin'
        }
    },
    deps: ["jquery"]
};

or use in phtml:

<script>
require(['jquery', 'Namespace_Modulename/js/customAdmin'],
    function ($) {
        return ...;
    }
);
</script>



or use requirejs-config.js and phtml:

var config = {
    map: {
        '*': {
            customAdmin: 'Namespace_Modulename/js/customAdmin'
        }
    }
};


<script>
require(['jquery', 'customAdmin'],
    function ($) {
        return ...;
    }
);
</script>
1
  • sorry for the late response. This solved my problem, thank you.
    – A. Martz
    Jan 12, 2017 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.