You can add the JQuery library to your Magento instance in several ways, two solutions will be represented here. In both examples the modifications should be added inside your local.xml configuration file. As a matter of fact all your customizations should be added inside local.xml.

 

1. Host your files on your server

 The first solution is by hosting the file on your server inside your js or skin directory, prefferably in skin. In this case your local.xml should contain the following content.

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>jquery-ui/js/jquery-latest.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>jquery-ui/js/jquery-ui-latest.custom.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>jquery-ui/js/jquery-fix.js</name></action>
            <action method="addItem"><type>skin_css</type><name>jquery-ui/css/ui-lightness/jquery-ui-latest.custom.css</name></action>
        </reference>
    </default>
</layout>

 

Because Magento comes with Prototype JS library already installed, and because Prototype JS already uses the $ function, we need to change the way we use the $ function in jQuery by replacing it with another short function name, in our case $j. For this we create a jquery-fix.js file and we add it to the folder were the js files of the jQuery UI installation are.

The content of this file should be:

$j = jQuery.noConflict();

 

If you want to see it in action just add the following code snippet at the end of your jquery-fix.js file and refresh your page.

$j(document).ready(function() {
    $j('
Hello World!
').appendTo($j('body')); $j('#mydiv').dialog(); });

 

2. Use Google CDN

If you use this solution you don't have to download on your server the jquery library. This functionality can be achieved using the following code snippet inside your local.xml file.

<default>
    <reference name="head">
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript">$j = jQuery.noConflict();</script>]]>
                </text>
            </action>
        </block>
    </reference>
</default>

 

The content specified inside the core/text block will be automatically added to your page inside your head tags.

Hope you enjoyed this post, have fun!