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.
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