1

I want to add custom js in product edit page (Admin)

Is it ok to add it in some xml or is there any other way to do it?

If it is xml, which XML do I need to work on?

2
  • Yes you need to add in XML file. Feb 21, 2019 at 6:15
  • can you help me with the code? which xml do I need to edit? Feb 21, 2019 at 6:21

3 Answers 3

10

I did some efforts on this and I think this solution is much better and easy to implement

Add XML file in a custom module

app\code\Vendor\Module\view\adminhtml\layout\catalog_product_edit.xml

File code will be:

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

Add new js file in module view directory

app\code\Vendor\Module\view\adminhtml\web\js\custom_product_edit.js

File code will be:

require([
    'jquery'
], function ($) {
    'use strict';
    jQuery(document).ready(function(){
        //Custom js here
    });
});

And if you want to run js after all ajax call complete then use jQuery(document).ajaxStop() Code will be like this:

require([
    'jquery'
], function ($) {
    'use strict';
    jQuery(document).ready(function(){
        jQuery(document).ajaxStop(function () {
            //Custom js here
        });
    });
});
1
2

You can add your custom js file in the layout file : vendor\magento\module-catalog\view\adminhtml\layout\catalog_product_edit.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>
        <link src="Magento_Catalog::js/customJsFile.js"/>
    </head>
</page>

After that create your customJsFile.js file in the web/js folder.

3
  • Your solution will work, but editing vendor file is not a good way of development. Thanks anyway for taking time in answering my question. +1 Feb 21, 2019 at 7:09
  • @ShoaibMunir, yes definitely we should not edit core files, You can create your own module and create the above xml file there. Feb 21, 2019 at 7:15
  • Got your point. Thanks. I gave you +1 on your answer Feb 21, 2019 at 7:16
2

You can add requireconfig-js to load your customjs in any page of magento.

Full description in below link

Magento DevDocs

0

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.