How To Add JS File in Frontend for All Pages in Magento 2

How To Add JS File in Frontend for All Pages in Magento 2

Hello Magento Folks?,

Welcome back to another Magento Tutorial Blog, How are you all? I hope all are fit and fine and maintaining social distancing. Today I am here with one of the interesting topics to guide you on How To Add JS File in Frontend for All Pages in Magento 2. Are you updated with the latest release of Magento? Have a look at Breaking News: Magento 2.4.0 (Beta) Version Launched for all exciting features and enhanced updates. Let’s Dive In?.

Introduction:

Basically, I have received some problems facing queries for implementing some equivalent functionalities with the help of JS file for all the pages of your Magento 2 store. No worries I am here with the easiest solution for the problem where you can easily implement the same functionality on all pages of your Magento 2 store. Let’s say you want to implement an email subscription popup on all the pages of your Magento 2 store then the below steps will help you to make your work easy. As always, work smart and not hard.

Steps to Add JS File in Frontend for All Pages in Magento 2:

Step 1: Firstly you need to create default.xml at app\code\[Vendor]\[Module]\view\frontend\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">

    <head>

    <link src="[Vendor]_[Module]::js/js_fileName.js"/>

    </head>

</page>

Step 2: Now, create JS file at app\code\[Vendor]\[Module]\view\frontend\web\js\js_fileName.js

Step 3: Implement setup upgrade command and setup:static-content:deploy command for implementing the JS file for all the pages of your Magento 2 store

Final Words:

I hope the solution was helpful to you and if any difficulties in the above-given solution do connect with our Support Team for further assistance Do comment down your reviews in the comment section below. Suggestions are always welcomed so feel free to suggest any topic or issues. 

Happy Reading?

Previous Article

How to Get Instagram Feed Access Token -Step by Step Guide

Next Article

Top Game-Changing SEO Tips for Ecommerce in 2020

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨