Mage Check Facebook iconFacebook MAGE CHECK Mage Check Linkedin iconLinkedin MAGE CHECK

Magento How to add a JavaScript file from layout

$ In this tutorial we will describe how to add javascript file from layout in Magento.

$ We have just three steps, so let's folow them and in a couple of minutes, our Magento project will run a custom javascript file.

Step 1: Install Module\Extension

Install the module from initial page

Step 2: Create Layout File

Magento 1 (2007 - 2014)

File path: skin/design/frontend/MageCheck/Tutorial/layout/local.xml


Magento 2 Open Source (2014 -)

File path: app/code/MageCheck/Tutorial/view/frontend/layout/magecheck_tutorial_index_index.xml


Step 3: Create Js File

Magento 1 (2007 - 2014)

File path: skin/design/frontend/MageCheck/Tutorial/js/customjs.js


Magento 2 Open Source (2014 -)

File path: app/code/MageCheck/Tutorial/view/frontend/web/customjs.js


Step 4: Flush Cache

Magento 1 (2007 - 2014)

Log in to you Magento 1 Admin panel, go to System -> Cache management and flush your magento cache.

Magento 2 Open Source (2014 -)

The last thing you have to do is to clean and flush your Magento cache:

php bin/magento cache:clean

php bin/magento cache:flush

This is the simplest method to add Javascript file from layout in Magento!