Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How to add JQUERY in Magento ? 
 
danishah
Jr. Member
 
Total Posts:  11
Joined:  2011-11-15
 

I want to add JQUERY in Magento , how i will do this ? where i have to paste jquery file(.js) ?? Reply as soon as possible .

 
Magento Community Magento Community
Magento Community
Magento Community
 
danishah
Jr. Member
 
Total Posts:  11
Joined:  2011-11-15
 

i am using 1.6 ver of magento .......................

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

on frontend (default theme):

modify app/design/frontend/default/default/layout/page.xml, add line <action method="addJs"><script>jquery/jquery.min.js</script></action> to block with name “head”

on backend (default theme):

modify app/design/adminhtml/default/default/layout/main.xml.

those layout files include javascript to every page header.

upd: you can create your custom theme to save some time on upgrade

 
Magento Community Magento Community
Magento Community
Magento Community
 
tzyganu
Mentor
 
Avatar
Total Posts:  2205
Joined:  2009-11-18
Bucharest, Romania
 

In addition to what ivvy said you need to add this in the header.phtml file of your theme

<script type="text/javascript">
$.
noConflict();
</script>
And in the rest of the application when you want to use jQuery use it like this:
jQuery('...').doSomething();
//instead of
$('...').doSomething();
 
Magento Community Magento Community
Magento Community
Magento Community
 
danishah
Jr. Member
 
Total Posts:  11
Joined:  2011-11-15
 

Thanks & Nice ivvy. but one thing more Boss ! where i have to place jquery folder? it have to place with css and images ??

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

when using addJs method magento looks for files in js folder, ie place jquery in <your magento root>/js/jquery/jquery.min.js

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagePsycho
Moderator
 
Avatar
Total Posts:  1702
Joined:  2009-06-23
 

If you want to include jQuery from Google CDN then try the following xml in local.xml of your theme:

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

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
flex2012
Jr. Member
 
Total Posts:  2
Joined:  2011-12-12
 

Thanks.

ivvy_ru - 12 December 2011 01:05 AM

on frontend (default theme):

modify app/design/frontend/default/default/layout/page.xml, add line <action method="addJs"><script>jquery/jquery.min.js</script></action> to block with name “head”

on backend (default theme):

modify app/design/adminhtml/default/default/layout/main.xml.

those layout files include javascript to every page header.

upd: you can create your custom how much house can I afford theme to save some time on upgrade

 
Magento Community Magento Community
Magento Community
Magento Community
 
Template fans
Guru
 
Total Posts:  446
Joined:  2009-11-02
 

You can also install a third-party jQuery extension.

 
Magento Community Magento Community
Magento Community
Magento Community
 
MattStephens
Sr. Member
 
Avatar
Total Posts:  152
Joined:  2011-07-12
United Kingdom
 

Remember you will need to include jQuery.noConflict(), otherwise you’ll recieve errors.

You can define both of these in the header like so:

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

This will cause no conflicts with prototype, if you define noConflict() in the footer, you will already receive messages such as method not defined etc.

Cheers

 
Magento Community Magento Community
Magento Community
Magento Community
 
g0rdian
Member
 
Total Posts:  65
Joined:  2011-12-04
 

My preferred (and most flexible way) to do this is through local.xml via two separate Javascript files. The first file is jQuery itself--completely unmodified. The second file I call no-conflict.js and it contains only one line:

jQuery.noConflict();

Now we add both of these files to the head section of our local.xml:

<reference name="head">
    <
action method="addItem">
        <
type>skin_js</type>
        <
name>js/jquery-1.7.2.min.js</name>
    </
action>
    <
action method="addItem">
        <
type>skin_js</type>
        <
name>js/no-conflict.js</name>
    </
action>
</
reference>

Keeping these files separate allows you to upgrade or downgrade your jQuery as needed without requiring you to edit the file while still allowing jQuery to function alongside Prototype.

Enjoy!

 
Magento Community Magento Community
Magento Community
Magento Community
 
MattStephens
Sr. Member
 
Avatar
Total Posts:  152
Joined:  2011-07-12
United Kingdom
 

Hello

You are correct, that is the best way of adding items to the header. However the reason I took a different approach is jQuery needs to be loaded after prototype, and on some pages the order of the adding of prototype cannot be determined.

Best thing to do is try both approaches, although inline JS is not ideal, it does the trick.

Matt

 
Magento Community Magento Community
Magento Community
Magento Community
 
maccumhaill
Newbie
 
Total Posts:  0
Joined:  2009-03-19
 

There are different ways as noted and both work. I found a nice post from Redstage on how to properly include custom css and js files in magento in different ways which you can check out:

Different ways of including js in magento

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mygento
Member
 
Avatar
Total Posts:  44
Joined:  2011-03-31
Russia
 

It’s easier to use this plugin - http://www.magentocommerce.com/magento-connect/mygento-jquery-library-and-powerful-plugins.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mage Solution
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2013-11-12
 

Look at this review to solve your problem: http://www.magesolution.com/blog/how-to-add-jquery-in-magento/

More references for combining of Magento to JQuery with jQuery mobile theme at Mage Solution
This is a beautiful magento mobile theme for all mobiles, tablets devices and it’s designed and developed based on JQuery Mobile technology.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top