Add JS File in Magento 2 Module: How to Add Java Script

When we create a magneto model or extension then at that time we also need to use javascript and style sheet file etc.
Let us know how we add js file in Magento 2 or style sheet in  Magento 2 module or extension.

Add JS file in Magento 2

Magento 2 has its own structure to define the javascript and CSS file. So we will follow the same path in order to add the js file to execute JavaScript code.

Here, I am going to explain with an example so I will create a Magento 2 module to add a JS file to execute the code and pass the parameters inside a script.

 

Steps to Add JS File in Magento 2 Module

There are five steps to add the js and CSS file in Magento 2 module.

  • Create or add in the existing module.
  • Create a requirejs-config.js and a JavaScript module file.
  • Create a layout update to add a template that will enable the JavaScript module.
  • Create a template file.

 

Step 1: Create a New Module

app/code/Wishusucess/AddJsfile/registration.php
<?php
/**
* Developer: Hemant Singh Magento 2x Developer
* Website: http://www.wishusucess.com/
*/

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Wishusucess_AddJsfile',
__DIR__
);

 

Step 2: Create a Module XML file

app/code/Wishusucess/AddJsfile/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_AddJsfile" setup_version="0.0.1">
</module>
</config>

 

Step 3: Create requirejs-config.js and a JavaScript

Add the file

app/code/Wishusucess/AddJsfile/view/frontend/requirejs-config.js
var config = {
map: {
'*': {
hello: 'Wishusucess_AddJsfile/js/hello',
}
}
};

 

Step 4: Add JS File in Magento 2 Extension

In this step, we will add the javascript file in Magento 2 extension or module.

And finally, add the file

app/code/Wishusucess/AddJsfile/view/frontend/web/js/hello.js
define([
"jquery"
], function($){
"use strict";
return function(config, element) {
alert(config.message);
}
}
)

 

Step 5: Add XML File

Now we have to create a layout file in order to add a template file so that will enable the JavaScript in that file of the module.

And then add the file catalog_product_view.xml

app/code/Wishusucess/AddJsfile/view/frontend/layout/catalog_product_view.xml
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" template="Wishusucess_AddJsfile::hello.phtml" />
</referenceContainer>
</body>
</page>

Step 6: Create a Template File

So, this template is a frontend view so we can choose any template in order to show the js functionality.

Now, suppose we have a template file hello.phtml and we want to add the javascript in that file so we will add in the file like below.

 app/code/Wishusucess/AddJsfile/view/frontend/templates/hello.phtml
<div data-mage-init='{"hello": {"message": "Hello Wishusucess Magento Team!"}}'>
Content
</div>

 

Step 6: Run Below Magento 2 Command

Now we have to run the below upgrade and cache command in Magento 2 root directory.

bin/magento setup:upgrade

bin/magento cache:clean

 

Read more: System XML File: How to Create Admin Configuration in Magento 2

 

Add CSS File in Magento 2 Module

In this step, we will learn how we can add the style sheet in Magento 2 extension or Module.

In order to add the CSS file in the Module. first, we will create a CSS file.

app/code/Wishusucess/AddJsfile/view/frontend/web/css/cssfilename.css

 

Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2