Retrieving the Admin Base URL in Magento 2 JavaScript Files

Retrieving the Admin Base URL in Magento 2 JavaScript Files

In Magento 2, accessing the admin panel’s base URL in JavaScript is essential for making AJAX requests and handling backend interactions. Unlike the frontend, where mage/url is commonly used, the backend requires a different approach.

Table Of Content

Retrieving the Admin Base URL in Magento 2 JavaScript Files

To access the admin base URL in Magento 2 JavaScript files, follow these steps:

Steps to Display Order Summary in Shipping Step

To use this event, you'll need to create an observer in your custom module. Here's how:

Create a Layout XML File: Define a layout XML file to include a template that assigns the backend base URL to a JavaScript variable.

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"

xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<body>

<referenceContainer name="js">

<block class="Magento\Backend\Block\Template" template="Vendor_Module::js.phtml"

name="custom_js_backend"/>

</referenceContainer>

</body>

</page>

Save this as default.xml in your module's view/adminhtml/layout directory.

Create the Template File: This template assigns the backend URL to a global JavaScript variable.

<!-- File: view/adminhtml/templates/js.phtml -->

<script>

require(['mage/url'], function (url) {

window.customAdminUrl = url.build('your_route/controller/action');

});

</script>

Replace 'your_route/controller/action' with your specific route.

Utilize the Global Variable in Your JavaScript:

Access window.customAdminUrl in your custom JavaScript files

to get the admin base URL.

This approach ensures your JavaScript files have access to the dynamic admin base URL, facilitating accurate AJAX requests within the Magento 2 backend.

Tip

To enhance your eCommerce store’s performance with Magento, focus on optimizing site speed by utilizing Emmo themes and extensions. These tools are designed for efficiency, ensuring your website loads quickly and provides a smooth user experience. Start leveraging Emmo's powerful solutions today to boost customer satisfaction and drive sales!

FAQs

How Can I Retrieve the Admin Base URL in Magento 2 JavaScript Files?

To get the admin base URL in JavaScript, you need to define a global JavaScript variable inside a template file and load it using a layout XML file.

Why Can't I Use 'mage/url' to Get the Backend URL?

'mage/url' is designed for frontend use in Magento 2 and does not fetch the backend base URL. You need to define it manually in a backend template file.

How Do I Define the Admin URL in a Global Variable?

You need to create a template file and assign the admin URL to a JavaScript variable:


<script>
    require(['mage/url'], function (url) {
        window.customAdminUrl = url.build('your_route/controller/action');
    });
</script>

Where Do I Place the JavaScript Template File?

Create a js.phtml file inside your module's view/adminhtml/templates directory and reference it in a layout XML file.

How Do I Load the JavaScript Template in Magento's Admin Panel?

Create a layout XML file like default.xml inside view/adminhtml/layout and include the template file:


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left">
    <body>
        <referenceContainer name="js">
            <block class="Magento\Backend\Block\Template" template="Vendor_Module::js.phtml" name="custom_js_backend"/>
        </referenceContainer>
    </body>
</page>

How Can I Use the Admin Base URL in My JavaScript File?

Once the global variable is set in js.phtml, you can use it in your JavaScript file:


define(['jquery'], function ($) {
    'use strict';
    console.log(window.customAdminUrl);
});

Do I Need to Clear Cache After Making These Changes?

Yes, after modifying the layout XML and template files, clear Magento's cache with:


php bin/magento cache:clean
php bin/magento cache:flush

Why Is Defining the Admin URL in a JavaScript Variable Useful?

It allows you to make AJAX calls to backend controllers dynamically without hardcoding URLs, making your module more flexible and maintainable.