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
File path: skin/design/frontend/MageCheck/MCTheme/layout/local.xml
<?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>
Magento 2
File path: app/code/MageCheck/Seasons/view/frontend/ magecheck_seasons_index_index.xml
<?xml version='1.0'?>
<page xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' 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>
Step 2: Create Js File
Magento 1
File path: skin/design/frontend/MageCheck/MCTheme/js/customjs.js
alert('Hello MageCheck!');
Magento 2
File path: app/code/MageCheck/Seasons/view/frontend/web/customjs.js
alert('Hello MageCheck!');
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!