How to add javascript file from layout in magento

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='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>

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

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?

Magento How to add Javascript file from layout

Step 1: Create Layout File

Magento 1

Magento 2

Step 2: Create Js File

Magento 1

Magento 2

Step 3: Flush Cache

Magento 1

Magento 2

Contact us

Cookies settings