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