Magento: Add Javascript to Home Page Only (Or Any CMS Page)

Magento Icon

Have you ever needed to include a javascript file to the home page only to run that sweet slideshow you have displayed (or any other reason)? Fortunately, you don’t have to modify any of the layout files, or add it to your head.phtml file. CMS pages in Magento allow you to modify the layout XML specific to that page. So, all you need to do is open up the CMS page in Magento that you want to add the javascript to, click on the “Custom Design” tab on the left, and in the “Layout Update XML” field add the following:

<reference name="head">
  <action method="addItem">
    <type>skin_js</type><script>yourfile.js</script>
  </action>
</reference>

Or, if you want to just put the javascript in the /js/ directory of your app, you can change the “skin_js” to just “js”.

This entry was posted in Uncategorized. Bookmark the permalink.

9 Responses to Magento: Add Javascript to Home Page Only (Or Any CMS Page)

  1. That’s a really useful tip. Thanks.

  2. neha says:

    Thanx a lot…its really useful tip………….

  3. Eric says:

    Exactly what I needed! Thanks a bunch!

  4. jef says:

    best magento source I have found yet.
    Thanks.

  5. pc game says:

    Thank for information :)

  6. nick scott says:

    How does this work when you have something like i.e the .js file is on another server. Thanks.

  7. nick scott says:

    sorry my previous post got mangled a little. What happens when you a have an external link to your .js?

  8. Free Quiz says:

    how about adding css files
    replace skin_js with skin_css ?

    thanks

  9. Mahmood says:

    Hi,

    I tried your suggestion and unforunately I am unable to link the file.
    In Custom layout of a particular page, I tried adding

    skin_jsyourfile.js

    my js file is placed in skin/frontend/base/my_theme/js. I would greatly appreciate if you can email (mhabibchowdhury@gmail.com) me a detail instruction. I am new Magento user. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">