How to integrate jquery with magento

Posted in magento integration on March 19, 2013 0 comment(s)  

I recently ran in to this problem whist developing an e-commerce site using the Magento platform. I needed to incorporate Flowplayer in to the site and for that purpose I wanted to use jQuery. The problem is that Magento relies heavily on the Prototype library which uses the same ($) selectors as jQuery so simply including jQuery causes both libraries to stop working. Here's how to go about it…

jquery magento

1) If you want to use jQuery on all pages, then you start by adding the jquery script to…

jquery-magento-1

…add the following line below the other script entries:

jquery magento

2) However, if you only want to use jQuery on certain pages (for example on certain product pages), you need to go to the product page in the admin panel 'catlog → manage products' then select the appropriate product page. Now, select the 'Design' section and add the following xml in to the 'Custom Layout Update' box:

jquery-magento

In this case the place to put your jQuery.js file is: '/skin/forntend/base/default/jQuery.js'.

3) Now, when using jQuery you must ensure it is using 'noConflict' mode. To do this, add:

jquery magento

to the end of your jQuery script.

and now, alter any jQuery code as follows. If you have:

jquery magento

alter it to:

jquery magento

You can include any jQuery scripts either globally (as in stage 1) or on a per page basis (as in stage 2).

And now you should have jQuery working on your Magento site.

You can find more information on the jQuery mobile mode here:

http://www.mage-shop.com/magento-jquery-mobile-theme.html


This post was posted in magento integration and was tagged with magento, integrate jquery with magento, magento jquery, magento jquery mobile

Leave a comments
Your email address will not published. Required fields are marked *

What Our Clients Say?

  • Oscar Soto MANAGER
    ArrowHiTech has always impressed me! They are professionals and are quick to response to my needs. I have used
    them in the past and will continue to use them in the future. Thanks Martin and all the Staff at ArrowHiTech!!!
  • The guys of AHT solutions did a perfect job and are real profesionals. Definitely recommend them and will use them again!
  • Jonatas Leonel MANAGER
    Martin has a great team of Magento experts, I really liked the work he did for me. I asked him to customize my template following a couple of jpg files that I got from a designer and he worked on that template without the psd's - that was awesome, the result I got was really good.
  • I really enjoy working with ahtsolutions. Quick response to our questions, delivery the project in time and excellent skills. I hope to work with them soon
Request us now! Yahoo:gravitational_boy Email:info@mage-shop.com Skype:martin_aht +84437955813