4

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.

St3phan
2,9451 gold badge26 silver badges49 bronze badges
asked Jan 5, 2017 at 18:07
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 Commented 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? Commented 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! Commented Feb 2, 2017 at 17:08

1 Answer 1

6

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>
answered Jan 5, 2017 at 22:31
1
  • sorry for the late response. This solved my problem, thank you. Commented Jan 12, 2017 at 15:27

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.