ECommerce Insights Blog

Stay on top of it all and get ahead with useful articles, how-tos, tips and tricks on e-commerce.

How To Introduce jQuery In Magento 1.2.1

OnSale - Magento Extension-0

jquery
People who love jQuery must not feel disappointed with Magento 1.2.1 simply because it does not support jQuery by default. Those interested in Magento customization often complain that jQuery is throwing an error and how they can install and use jQuery as their preferred JavaScript Library.

In this article i am going to tell you how you can use jQuery within your Magento 1.2.1 installation. Lets take an example of default Magento Product Zoom feature which we switch to jQuery version.

Default Files:

1. app/design/frontend/default/portero/layout/page.xml
2. app/design/frontend/default/portero/layout/catalog.xml
3. app/design/frontend/default/portero/template/catalog/product/view.phtml
4. app/design/frontend/default/portero/template/catalog/product/view/media.phtml

New jQuery Files:

1. js/jquery/jquery.js
2. js/jquery/jquery.jqzoom.js
3. skin/frontend/default/portero/css/jqzoom.css
4. skin/frontend/default/portero/images/zoomloader.gif

I would recommend to create different directories for your magento customization so that your existing customization won’t get overwritten while upgrading to newer version of Magento.

Steps (Follow them in exact sequence):

  1. Create a new custom directory called portero under app/design/frontend/default.
  2. Create a new custom directory called portero under skin/frontend/default.
  3. Copy all the directories and files within app/design/frontend/default/default into the new directory at app/design/frontend/default/portero. You should end up with 3 directories under portero. The directories are layout, locale, template.
  4. Copy all the directories and files within skin/frontend/default/default into the new directory at skin/frontend/default/portero. You should end up with 3 directories and a favicon.ico file under portero. The directories are css, images, js.
  5. We need to tell Magento to reference the 2 custom directories we just created. For that we need to log into Magento’s Admin Panel. Go to System → Configuration. Under the General category, click on Design. Under the section Themes, make sure you provide the name of the custom directory for the input field Default. In our example, the value for the field would be portero. This will set the default theme directory to our custom directory. If you would not like to set the default theme directory to the custom directory; simply set 3 fields to their respective custom directory, these fields include: Templates, Skin, and Layout. Please refer to the screenshot below for all the possible fields that can be set.
  6. admin_design

  7. Download the jQuery zoom plugin from http://www.mind-projects.it/projects/jqzoom/. This article assumes you have experience with jQuery plugins before. Create a new directory under the js directory of your Magento installation. We decided to name it jquery, but you can obviously name it anything you want. Copy jquery.js and jquery.jqzoom.js that you downloaded into the new jquery directory.
  8. Copy the jqzoom.css file into the existing directory: skin/frontend/default/portero/css. Copy the zoomloader.gif file into the existing directory: skin/frontend/default/portero/images.
  9. We now need to include the new files we just added. Open up: app/design/frontend/default/portero/layout/page.xml.

    Add the reference to jquery.js within the default/root/head block

  10. skin_csscss/ie7minus.csslt IE 7
    skin_csscss/jqzoom.css
    jslib/ds-sleight.jslt IE 7
    

    Add the reference to jqzoom.css within the print/root/head block:

    skin_csscss/ie7minus.csslt IE 7
    skin_csscss/jqzoom.css
    jslib/ds-sleight.jslt IE 7
    
  11. Finally we need to include jquery.jqzoom.js. We could have included it in page.xml; but since the purpose of the script is to provide a zoom feature for products; it can also be included in catalog.xml. Open up: app/design/frontend/default/portero/layout/catalog.xml.

    Add the reference to jquery.jqzoom.js within the catalog_product_view/root/head block:

  12. 
      
        
      
      
        
        
          ...
          ...
    
  13. Finally we are ready to write some actual code. Since jQuery and Prototype use the same selectors like “$”, scripts containing those selectors will conflict with each other. To resolve this problem, we have to apply the jQuery No Conflict function to the end of jquery.js and jquery.jqzoom.js.
    Open js/jquery/jquery.js.

    Go all the way to the last line and add the following:

  14.  });})();
      jQuery.noConflict();
    

    Open js/jquery/jquery.jqzoom.js.

    Add the following near the end of the file:

    })(jQuery);
    jQuery.noConflict();
    function trim(stringa) {
  15. Open app/design/frontend/default/portero/template/catalog/product/view.phtml.

    Add the following jQuery code:

  16. getChildHtml('media') ?>
  17. Open app/design/frontend/default/portero/template/catalog/product/view/media.phtml.

    Since we are replacing Magento’s default product image zoom widget; we need to comment out the code that renders it

  18. 
    

    Next we need to replace the following code:

      

    helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image') ?>

    With the following lines of code:

     

    helper('catalog/image')->init($_product, 'image').'" class="jqzoom" title="Magnified Image">'.$this->htmlEscape($this->getImageLabel()).''; echo $_helper->productAttribute($_product, $_img, 'image') ?>

All set. Now, if you place your mouse over product image it will show you the desired jQuery effect. Please leave me a comment and let me know if you run into any trouble getting the jQuery installed within Magento 1.2.1 version.