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

Magento How to add 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: Create Layout File

Magento 1

<?xml version='1.0'?> <layout version='0.1.0'> <catalog_product_view> <reference name='root'> <reference name='head'> <action method='addItem'> <type>skin_js</type> <name>js/customjs.js</name> </action> </reference> </reference> </catalog_product_view> </layout>

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

Magento 2

<?xml version='1.0'?> <page xmlns:xsi='' layout='1column' xsi:noNamespaceSchemaLocation='../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd'> <head> <link src='MageCheck_Seasons::customjs.js'/> </head> <referenceBlock name='content'> <block template='content.phtml' class='MageCheck\Seasons\Block\Main' name='magecheck_seasons_block_main' /> </referenceBlock> </page>

File path: app/code/MageCheck/Seasons/view/frontend/magecheck_seasons_index_index.xml

Step 2: Create Js File

Magento 1

alert('Hello MageCheck!');

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

Magento 2

alert('Hello MageCheck!');

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

Step 3: Flush Cache

Magento 1

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

Magento 2

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!

Contact us

Have you decided on an online Business Plan website?