How to include & add custom js in Magento 2
We learn how to add custom js in Magento 2
In modules Developing, we need to add custom JS in Magento 2. There are many ways to add custom js in Magento 2. Here we show some possible way to add custom js give below:
1) Via <script type=”text/javascript></script>
This way is the most accessible way to add javascript, but this is an unreliable way. This way provides simplicity but has many significant drawbacks. When the complexity of the project increases, it becomes tough to control such a code. Another issue is that the code connected in this way is highly vulnerable to CSS attacks (Cross-site scripting). If you want this way to add javascript, you should add the following attributes when connecting: deferred=”true”, async=”true”.
<script type="text/javascript">
alert("Javascript Call");
</script>
2) Via data-mage-init attribute
Magento 2 use require-config.js to connect js scripts. This approach allows using JS modularly as well as background and asynchronous loading. This approach uses a unique data-mage-init attribute. The attribute must contain the JS module path as a value, the element to which we want to apply our JS code to and configuration parameters.
Hire our Magento 2 Development partner for custom development
Example: add your custom javascript file and add your code init.
app/code/Dolphin/RequireJsDemo/view/frontend/web/js
custom_js.js
define(["jquery", "domReady!","custom_js"], function($,dom,custom_js){
alert("Add Custom Js");
})
after we connect our custom javascript to requirejs.
app/code/Dolphin/RequireJsDemo/view/frontend
requirejs-config.js
var config = {
map: {
'*':{
custom_js:'Dolphin_RequireJsDemo/js/custom_js',
}
},
shim:{
'custom_js':{
deps: ['jquery']
}
}
};
Now we simply call our custom javascript code into phtml file using data-mage-init attribute.
<div class="example-element" data-mage-init='{"custom_js": {}}'>A single div</div>
3) Via Adding Layout
In this Method you don’t need to define your custom javascript to requirejs-config.js file. Simply add your custom js file to layout using <script> tag.
<?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>
<script src="Dolphin_RequireJsDemo::js/custom_js.js" />
</head>
</page>
And add the below code to your custom js file:
require(
[
"jquery",
],
function($){
alert("Add Custom Js");
})
4) Via <script type=”text/x-magento-init”>
Often we have to pass more than one argument to our module. The syntax of data-mage-init attribute can be difficult to read, so type=”text/x-magento-init” can be used as an alternative. It looks like this:
<script type="text/x-magento-init">
{
"*": {
"Dolphin_RequireJsDemo/js/custom_js": {
"slidername": "Silder Name Here",
"slideritems": "Silder Items Here"
}
}
}
</script>
And you can access this value into your custom javascript file like below:
define([
'jquery',
'domReady',
], function ($,dom) {
'use strict';
return function(config) {
console.log(config);
console.log(config.slidername);
console.log(config.slideritems);
}
});
5) Using an imperative approach
This method is also used to add custom javascript to connecting JS modules. Magento 2 official documentation does not recommend using this method. You can add directly into your phtml file like below:
<script>
require(
[
'jquery',
],
function($) {
alert("Add Custom Js");
}
);
</script>
I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.
We can help you with
- Dedicated Team
- Setup Extended Team
- Product Development
- Custom App Development
Our Offices
AHMEDABAD (INDIA)
B-203, B-204, Empire Business Hub, Science City Road, Sola, Ahmedabad – 380060
BERLIN (GERMANY)
Badensche Str. 28, 10715 Berlin, Germany
CALIFORNIA (USA)
9601 Reseda Blvd, Apt#223, Northridge CA-91324, USA
ALBERTA (CANADA)
302 Skyview Ranch Drive NE, Calgary, Alberta, Canada T3N0P5
