Retrieving Store URLs in Magento 2 JavaScript Files
Retrieving Store URLs in Magento 2 JavaScript Files
Learn how to dynamically retrieve your Magento 2 store's base and custom URLs in JavaScript using the 'mage/url' module. This guide covers fetching URLs in frontend scripts, handling admin URLs in backend scripts, and ensuring your store's URLs remain dynamic and adaptable.
Table Of Content
Retrieving Store URLs in Magento 2 JavaScript Files
To dynamically obtain your Magento 2 store's base URL in JavaScript, utilize the 'mage/url' module. This approach ensures your scripts adapt to any URL changes without manual updates.
Fetching the Base URL in Frontend JavaScript
In your JavaScript file, include 'mage/url' as a dependency. This allows you to build URLs relative to your store's base.
define(['mage/url'], function (urlBuilder) {
'use strict';
var baseUrl = urlBuilder.build('');
console.log(baseUrl); // Outputs the base URL, e.g., 'https://yourstore.com/'
});
To construct a specific URL, append the desired path:
var loginUrl = urlBuilder.build('customer/account/login');
console.log(loginUrl); // Outputs 'https://yourstore.com/customer/account/login'
Accessing the Admin Base URL in Backend JavaScript
The 'mage/url' module is tailored for frontend use and doesn't directly provide the admin base URL. To access the admin URL in backend scripts, define it in a template and expose it via a global JavaScript variable.
Create a Layout XML File
Define a block that renders your template.
<!-- app/code/Vendor/Module/view/adminhtml/layout/default.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">
<body>
<referenceContainer name="js">
<block class="Magento\Backend\Block\Template"
template="Vendor_Module::admin_base_url.phtml"
name="admin_base_url_block"/>
</referenceContainer>
</body>
</page>
Create the Template File
This template sets a global JavaScript variable with the admin base URL.
<!-- app/code/Vendor/Module/view/adminhtml/templates/admin_base_url.phtml -->
<script>
require(['mage/url'], function (urlBuilder) {
window.adminBaseUrl = '<?= $block->getUrl('') ?>';
});
</script>
Utilize the Admin Base URL in Your JavaScript
In your custom JavaScript, reference the adminBaseUrl variable.
console.log(window.adminBaseUrl); // Outputs the admin base URL, e.g., 'https://yourstore.com/admin/'
By integrating the 'mage/url' module in your frontend JavaScript and defining the admin base URL in backend templates, you ensure your Magento 2 store's URLs are dynamically and accurately referenced across your scripts.
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 Do I Retrieve the Store Base URL in Magento 2 JavaScript Files?
To get the base URL dynamically, use the 'mage/url' module in your JavaScript file.
How Can I Fetch a Specific Page URL in Magento 2?
Use the build('path') method of 'mage/url' to generate specific URLs:
define(['mage/url'], function (urlBuilder) {
var loginUrl = urlBuilder.build('customer/account/login');
console.log(loginUrl);
});
Can I Use 'mage/url' to Get the Admin Base URL?
No, 'mage/url' is designed for frontend URLs only. To retrieve the admin base URL, define it in a backend template file.
How Do I Define the Admin Base URL in JavaScript?
Create a template file and assign the admin base URL to a global JavaScript variable:
<script>
require(['mage/url'], function (urlBuilder) {
window.adminBaseUrl = 'getUrl('') ?>';
});
</script>
Where Should I Place the JavaScript Template File?
Store the template file in view/adminhtml/templates and reference it in a layout XML file.
How Do I Load the JavaScript Template in Magento’s Admin Panel?
Reference your template file in a layout XML 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::admin_base_url.phtml" name="admin_base_url_block"/>
</referenceContainer>
</body>
</page>
How Do I Use the Admin Base URL in JavaScript?
Once defined, you can use it in any JavaScript file:
define(['jquery'], function ($) {
'use strict';
console.log(window.adminBaseUrl);
});
Do I Need to Clear Cache After Making These Changes?
Yes, clear the cache to apply the changes:
php bin/magento cache:clean
php bin/magento cache:flush
Why Is Defining the Admin URL in JavaScript Useful?
It allows for dynamic AJAX calls to backend controllers without hardcoding URLs, making your module more maintainable.
