1

Using Magento 2.4. I want to add some custom JS in the admin area.

app\code\ClientQuote\AdminTheme\view\adminhtml\requirejs-config.js

var config = {
    map: {
        '*': {
            adminTheme: 'ClientQuote_AdminTheme/js/client-admin'
        }
    },

    paths: {
        'custom-script': 'ClientQuote_AdminTheme/js/client-admin'
    }
};

I can see the above in the source of /static/adminhtml/Magento/backend/en_US/requirejs-config.js

app\code\ClientQuote\AdminTheme\view\adminhtml\web\js\client-admin.js

define([
    'prototype'
], function () {
    'use strict';

    alert("andrew");
    console.log('andrew');

});

Nothing is output.

Looking at the other scripts in requirejs-config.js they all seem to added in different ways.

1 Answer 1

0

Steps to Add Custom JS File in Magento 2 Admin Panel:

  1. Create app/code/ClientQuote/AdminTheme/view/adminhtml/requirejs-config.js file with the following code:

var config = { paths: { 'custom-script': 'ClientQuote_AdminTheme/js/custom-script' }, shim: { 'js-file-alias': { deps: ['jquery'] } } };

  1. Upload the JavaScript custom-script.js file at app/code/ClientQuote/AdminTheme/view/adminhtml/web/js/

  2. Put the following code in your .phtml file to load the JavaScript file

Note : add .phtml file via layout.xml

<script> requirejs(['jquery', 'custom-script'], function($){ // Your Code }); </script>

  1. Run the following commands:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

2
  • 1
    I put my JS code in custom-script.js and a .phtml file? This is the confusion I have. Some tutorials say JS file and others .phtml
    – xgarb
    Sep 14, 2023 at 8:39
  • You can create .phtml file according to you. It is not fixed...
    – MP Raj
    Sep 14, 2023 at 8:59

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.