Magento : Add CMS javascript reference

Submitted by Kevin on Fri, 14/08/2009 - 10:44

Q: How do I add a reference to a java script file from a magento CMS page by using only the CMS mechanism, without having to edit any layout xml files like page.xml?

A: Place a 'reference' block in the 'Custom Design' section of your page's settings and in this place an 'action' tag to include the javascript file.

The subject of how to import a java script file into magento is well covered 'out there' on the interweb - however much of the information is misleading and many posts contain mistakes. I could not find any information on how to add a reference to a java script file using only the magento CMS user interface, i.e. without having to edit any of the layout files.

Most posts tell you to edit your page.xml layout file and add something like the following to the block named 'head':

<action method="addItem">
  <type>skin_js</type><script>js/my_script.js</script>
</action>

This will add a reference to the file my_script.js which must be placed in a folder called 'js' within your skin's folder. So far so good, however this method requires you to edit a layout file and also adds a reference into all of your shop's pages even if it's not required! So, is it possible to add a reference only for a single page by using only the CMS?

The good news is that there is ->

Edit your CMS page and in the 'Custom Design' settings section, add something like:

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

Save the page and clear every cache you can get your hands on! This should have the same results as editing page.xml but the java script file will only be imported into your CMS page...

Kevin's blog
2802 reads

Fri, 21/08/2009 - 08:49

Stranger

how can we get url of the image

hello this post is very nice. can you please tell me how can we get url of an image in cms page in magento in javascript. i am trying to add a slide show in my home page but just stuck on this problem. so plz help me and tell me how can i get image url that is in skin folder in magento

Fri, 21/08/2009 - 13:56

Kevin

Joined: 08/01/2009

So if I understand you

So if I understand you correctly from your magento CMS web page you want to get the URL of an image that's in your skin folder and then use this in your javascript?

well, you can reference the image url like this:

{{skin url='images/an_image.png'}}

If your javascript is inline you can just include references like that and the full url will be inserted. If it's an external script you could pass the urls as arguments and again use this type of reference to set up the arguments...

Or you could include your images in some hidden DIVs and have your script pull them from there.

This might be of interest too:

http://www.magentocommerce.com/boards/viewthread/14895/

Hope this helps...

Thu, 07/01/2010 - 20:12

Stranger

Works and Doesn't Work

I can get the javascript to show up in the head. Great.

Now... I have a slideshow that is using inline vars underneath the html. How do I add that into the cms page.
Also... does magneto come with any javascript framework's pre-installed? just wondering.

I'm a little frustrated, I built a really nice jquery specials slider for the home page, now I can't even get it in there.

Anyhelp on the topic would be awesome.

Regard,

Fri, 08/01/2010 - 00:21

Stranger

Hi, stranger here... my problem was with the javascript framework that already comes with magento. It was interfering with my Jquery code.

Mon, 15/02/2010 - 16:52

Stranger

This worked beautifully!

Thanks for this excellent post, Kevin. I couldn't figure out - for the life of me - how to include a script. Everyone made it sound so easy to di it through the CMS, but like you said, no one bothered to explain it properly (or correctly.)

Thanks to your post, I was able to get my script working on my CMS page with absolutely NO problems whatsoever.

Thanks again!

Wed, 17/02/2010 - 21:31

Kevin

Joined: 08/01/2009

Hey - Thanks for the nice

Hey - Thanks for the nice comment, I'm glad that you found the post useful!