{"id":17639,"date":"2025-02-08T13:00:15","date_gmt":"2025-02-08T11:00:15","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=17639"},"modified":"2026-05-13T15:40:40","modified_gmt":"2026-05-13T13:40:40","slug":"4-way-to-add-javascript-to-magento-2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/4-way-to-add-javascript-to-magento-2.html","title":{"rendered":"Four Ways to Add JS in Magento 2 in 2026"},"content":{"rendered":"\n

In this article, we are going to discuss how you can connect JavaScript in Magento 2. Check it out and get a clear understanding of this process. In our step-by-step guide we will consider four ways of connecting as well as look through their advantages and disadvantages.<\/p>\n

<\/p>\n

Via <script type=”text\/javascript><\/script>
\n<\/a>In Magento style
\n<\/a>Imperative approach
\n<\/a>Via require-config.js file<\/a><\/p>\n

Via <script type=”text\/javascript><\/script><\/h2>\n

Using <script type=\"text\/javascript><\/script><\/code> is considered to be the easiest, but quite unreliable way. We are assured that its one and only advantage is simplicity. Following this method can be justified if you want to connect third-party libraries. In other cases, this approach has several significant drawbacks.<\/p>\n

First of all, the code will be difficult to use again and it can block the page loading (of course, it depends on what the script contains). Secondly, it is obvious that as the complexity of the project increases, it becomes very difficult to control such a code. When discussing this method we should also mention CSP (Content-Security-Policy). The third issue is that the code connected in this way is highly vulnerable to CSS attacks (Cross-site scripting). If you still want to use this method, then you should add the following attributes when connecting: deferred=”true”, async=”true”.<\/p>\n

\"Andrey_Dubina\"

Partner With Us <\/h3>Let's discuss how to grow your business. Get a Free Quote.<\/span><\/div> Talk to Andrey<\/a><\/div>\n

In Magento style<\/h2>\n

Now, let’s look through the ways to connect JS scripts in Magento style. First of all, it’s worth mentioning that Magento 2 uses RequireJS scripts to connect JS. This approach allows using JS modularly as well as background and asynchronous loading. To learn more aboutRequireJS, follow the link<\/a>.<\/p>\n

So, the first way is to use the special data-mage-init <\/b>attribute . The attribute must contain the path to the JS module as a value, the element which we want to apply our JS code to and configuration parameters.<\/p>\n

For example, imagine that we have a RequireJS module that calls a popup window. Let’s create a JS file in the following directory:<\/p>\n

app\/code\/Example\/JavascriptInitExample\/view\/frontend\/web\/example.js<\/strong><\/p>\n

Next, we will write the following code inside the file:<\/p>\n

define([], function(){\r\n    alert(\"A simple Example module\");  \r\n});<\/pre>\n
Now, let’s say there is a certain template in which we want to connect our JS module. For the beginners, we can connect it the following way:<\/p>\n
<div class=\"example-element\"  data-mage-init='{\"Example_JavascriptInitExample\/example\": {}}'>A single div<\/div>\r\n<\/pre>\n
When loading a page, the browser will simply show a pop-up window with the specified text. Nothing special, but what if we pass some configuration values to data-mage-init? For example, let’s add this:<\/p>\n
<div class=\"example-element\"  data-mage-init='{\"Example_JavascriptInitExample\/example\": {\"config\": \"value\"}}'>A single div<\/div><\/pre>\n
And then we change the JS module in the following way:<\/p>\n
define([], function(config){\r\n    alert(\"A simple Example module\");\r\n    console.log(config);   \r\n});<\/pre>\n
When the page is reloaded, we will get the same pop-up window, but if we take a look at the console, we will see that the value of the config parameter equals the value. Following the same steps, we can pass any parameters inside our JS module. In addition to that, we can pass a DOM element as a parameter, on which we call our script. In order to do it, we rewrite our module in the following way:<\/p>\n
define([], function(config, element){\r\n    alert(\"A simple Example module\");\r\n    console.log(config);\r\n    console.log(element);   \r\n});\r\n<\/pre>\n
When the page is reloaded, the output of the element will be added to the console. In our case, this will be<\/p>\n
<div class=\"example-element\"><\/div><\/pre>\n
We can also come across a situation, when we pass a group of arguments to our block using the <arguments><\/arguments><\/strong> tag in the layout. If we want to get these arguments as parameters for our JS module, then we need to pass them in the following way:<\/p>\n
<div class=\"example-element\"  data-mage-init='{\"Example_JavascriptInitExample\/example\": \r\n<?= \/* @escapeNotVerified *\/ $block->getJsLayout() ?>'>A single div<\/div>\r\n<\/pre>\n
We get JSON as an input parameter, which we can further use at our discretion.<\/p>\n
Often we have to pass more than one argument to our module. The syntax that was described above can be difficult to read, so type=”text\/x-magento-init”<\/b> can be used as an alternative. It looks like this:<\/p>\n
<script type=\"text\/x-magento-init\">\r\n    {\r\n        \".example-element\": {\r\n            \"Example_JavascriptInitExample\/example\":{\r\n\"config\":\"value\",\r\n\"config2\":\"value2\",\r\n\"config3\": \"optionConfig\": <?php \/* @noEscape *\/ echo $block->getJsonConfig()?>\r\n\r\n   }          \r\n        }\r\n    }        \r\n<\/script><\/pre>\n
As you can see, this code is much easier to read.<\/p>\n
<\/a>
\"magento
Magento Custom Development<\/h3>
Take your online store to the next level with BelVG Magento Custom Development <\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
The imperative approach<\/h2>\n
It is also worth to mention here the so-called imperative approach in connecting JS modules. You can often find it in the Magento 2 code. However, it is recommended in the Magento 2 official documentation not to use it. Here is what the connection looks like:<\/p>\n
<script type=\"text\/javascript\">\r\nrequire( [\r\n       'jquery'\r\n   ],\r\n   function($) {\r\n       \talert('Example');\r\n       });\r\n   }\r\n);\r\n<\/script>\r\n<\/pre>\n
Via require-config.js file<\/h2>\n
Finally, let’s consider the situation when we need to connect the script not at the same page and in a specific element, but on multiple pages at once. In this case, you can use the require-config.js<\/b> file, which needs to be created in the module folder in the view\/base\/require-config.js<\/strong> sub-directory. The content should look like this:<\/p>\n
var config = {\r\ndeps: [\r\n'Example_JavascriptInitExample\/js\/example',\r\n'AnotherExample_JavascriptInitExample\/js\/example',\r\n]\r\n};\r\n<\/pre>\n
Then, the scripts we have connected will work on all the pages of the module. Usually, some third-party libraries are connected in this way. You can also set the map property and define the prefixes for various modules. In the future, we can use these prefixes to connect the required JS modules in other modules. For example:<\/p>\n
var config = {\r\nmap: {\r\n\t\" * \" : {\r\n\t\t\"example_alias\": \"example.js\"\r\n}\r\n}\r\n}\r\n<\/pre>\n
Now, we can use the created alias to connect the corresponding JS module:<\/p>\n
define([\r\n\t\"jquery\",\r\n\t\"example_alias\"\r\n], function($, config){\r\n\t\/* code goes here *\/    \r\n});\r\n<\/pre>\n
If you need to determine the loading order of JS files, you can use the shim option.<\/p>\n
Now let’s consider injecting dynamic content and executing JavaScript in data-mage-init<\/strong> and x-magento-init<\/strong>.<\/p>\n
In order to do it, you can just insert the content in DOM<\/strong> and after that trigger the event ‘contentUpdated<\/strong>’. For example, it can look like this:<\/p>\n
<code>\r\n$.ajax({\r\n    url: 'https:\/\/www.you-url.com',\r\n    method: 'GET'\r\n    success: function (response) {\r\n        $('#element').html(data)\r\n                     .trigger('contentUpdated')\r\n    }\r\n});\r\n\r\n<\/code>\r\n<\/pre>\n
Wrapping it up<\/h2>\n
Magento 2 offers multiple ways to connect JavaScript, each with its own advantages and trade-offs. Simple <script> tags are quick but unreliable and prone to security issues. Magento-style connections using data-mage-init or x-magento-init provide modular, configurable, and maintainable solutions. The imperative approach exists but is discouraged, and require-config.js is ideal for scripts that must load globally across pages.<\/p>\n
Yet, there is one potential issue when connecting JavaScript. It’s common knowledge that adding JS increases page loading time, which can negatively affect your webstore. What can you do in this case? We would strongly recommend you to try Defer JS for the Magento 2<\/a> module, which moves JavaScript to the bottom of the page and speeds up loading.<\/span> With this module, you will be able to install JavaScript, keeping your webstore fast.<\/p>\n
We hope that everything was clear, but if you have any questions, leave them below. Thanks for reading!<\/p>\n\n","protected":false},"excerpt":{"rendered":"In this article, we are going to discuss how you can connect JavaScript in Magento …","protected":false},"author":47,"featured_media":29207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[491,389,473,524],"tags":[],"class_list":["post-17639","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento-2","category-magento2-development","category-magento-front-end-developer","category-magento-speed-optimization","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t