Adding JavaScript via Layout in Magento

Jan 9, 2018320Sergey Samets
Adding JavaScript via Layout in Magento

Magento front end developer certification is an exam that requires a clear understanding of Magento’s components and the ability to operate with them in order to modify the user interface according to the recent trends. By passing the exam, the developer proves his level of knowledge and shows how familiar he is with Magento.

We represent FAQs about Magento 1 front end components to help developers get knowledgeable about the topic.

How to include custom JavaScript on all pages

In order to add a custom JS file on all pages, you need to include the script file (for example, test.js) in the local.xml file app/design/frontend/our_package/our_theme/layout/local.xml with the commands:

If we add the script for some certain theme, then we use the following command:

and the script file must be located in skin/design/frontend/our_package/our_theme/js/test.js

The file will be as follows:

Where “default” is a handle specifying that the file is added to all pages.

If we add the script globally, then we use the following command:

and the script file must be located in magento root directory/js/test.js

How to include custom JavaScript on specific pages

In order to add a custom JS file on specific pages, you need to include the script file (for example, test.js) in the local.xml file app/design/frontend/our_package/our_theme/layout/local.xml with the commands:

If we add the script for some certain theme, then we use the following command:

and the script file must be located in skin/design/frontend/our_package/our_theme/js/test.js

Here is an example of adding a JS file on the product page:

Where “catalog_product_view” is a handle specifying that the file is added to all product pages.

If we add the script globally, then we use the following command:

and the script file must be located in magento root directory/js/test.js

More FAQs you can find in the articles to be published soon. Subscribe to stay tuned.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *