How to include custom javaScript or jQuery library in Magento

To developing Magento websites you will likely have a need to use custom JavaScript file or jQuery library to Customize your magento store. By Using JavaScript library you can improve your productivity. By defult Magento already included the Prototype JavaScript library, but it allows to integrate jQuery library.
I included my custom JavaScript file and jQuery library in my store. So i know how to add a js files in the Magento store.

Including JavaScript or jQuery library:

You can download jQuery from here

To install jQuery library or your custom javaScript you need to copy the files one of the following directory locations:

/js/your-custom-folder/your-jQuery-or-custom-scriptname.js

/skin/frontend/your-instance-name/your-theme-name/js/your-jQuery-or-custom-scriptname.js

Now you need to edit page.xml which is located in:

/app/design/frontend/your-instance-name/your-theme-name/layout/page.xml

Or in the default theme at:

/app/design/frontend/default/default/layout/page.xml

If you not found page.xml file there, then go:

/app/design/frontend/base/default/layout/page.xml

Now open page.xml and find the following block:

<block type=”page/html_head” name=”head” as=”head”>

If your file location is “/js/your-custom-folder/” you need to add the following command inside the block:

<action method="addJs"><script>your-custom-folder/your-jQuery-or-custom-scriptname.js</script></action>

If your file location is “/skin/frontend/your-instance-name/your-theme-name/js/” you need to add the following command inside the block:

<action method="addItem"><type>skin_js</type><name>js/your-jQuery-or-custom-scriptname.js</name></action>

This would be all you need to do, however Magento also includes Prototype. It uses ‘$’ as shorthand for accessing the Prototype library. But jQuery also uses ‘$’ to access itself. So it will conflict in the global JavaScript namespace of the web browser. Fortunately jQuery provides a new shorthand for jQuery which is jQuery.noConflict();

So at first you should define in your javaScript file the following code :

var $j = jQuery.noConflict();

Then you can use’$j’ as shorthand of jQuery.

Important Note: If you can’t see your javaScript file by view page source then you should delete or disable your Magento cache.

You can also include javaScript file in any CMS page or home page without any layout files modification. To add javaScript file in CMS page go: CMS -> pages from your magento backend. Then click on on that page where you want to add javaScript.

Then click on Design tab from left panel like:

Now past following code in “Latout Update XML” field:

<reference name="head">
   <action method="addItem">
       <type>skin_js</type><name>js/your-custom-scriptname.js</name>
   </action>
</reference>

Note: Before that you must upload your javascript file in following location:
/skin/frontend/your-instance-name/your-theme-name/js/

If you want to include javaScript file in any Category you can follow above procedure. Just go Cataloge -> Manage Categories from magento backend. Then select your category where you want to include javaScript. After that click on “Custom Design” tab. then past above code in “Custom Layout Update” field. [Data Source]

Bio
Latest Posts

Md Sabur Khan

I'm an expert to build eCommerce site by using Magento platform. I completed MORE THEN 50 Magento job with 5 STARS and great feedback. I also very much familiar with all latest web technologies such as twitter bootstrap, Zurb Foundation, WordPress, HTML5, xHTML, CSS3, JavaScript, jQuery, PHP and MySQL.