Adding jQuery Support Using a jQuery Plugin Example

Last modified by suneet64 on Sat, July 30, 2011 08:55
Source|Old Revisions  

This is an old revision of the document!


Unfortunately Magento version 1.2.1 still does not support jQuery by default. It is the purpose of this article to implement jQuery support for Magento 1.2.1. I believe the best way to learn is by example, so I have set up an example of replacing Magento’s default product zoom widget with a new jQuery version.

Original Files Required

 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 Files Required

 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

To prevent overwriting of changes in files during a Magento update, it is recommended that we create a couple of custom directories for our customization.

Step 1: Create a new custom directory called portero under app/design/frontend/default.

Step 2: Create a new custom directory called portero under skin/frontend/default.

Step 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.

Step 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.

Step 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 SystemConfiguration. 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.

Step 6: 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.

Step 7: 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.

Step 8: 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:

  1. <default>
  2.     <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
  3.     <block type="page/html_head" name="head" as="head">
  4.         <action method="addJs"><script>jquery/jquery.js</script></action>
  5.         <action method="addJs"><script>prototype/prototype.js</script></action>
  6.     ...
  7. ...

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

  1. <print>
  2.     <block type="page/html" name="root" output="toHtml" template="page/print.phtml">
  3.     <block type="page/html_head" name="head" as="head">
  4.         <action method="addJs"><script>jquery/jquery.js</script></action>
  5.         <action method="addJs"><script>prototype/prototype.js</script></action>
  6.     ...
  7. ...

It is important that you include the jquery.js file before the prototype.js file.

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

  1. <action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>
  2. <action method="addItem"><type>skin_css</type><name>css/jqzoom.css</name><params/></action>
  3. <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
  4. ...

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

  1. <action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>
  2. <action method="addItem"><type>skin_css</type><name>css/jqzoom.css</name><params/></action>
  3. <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
  4. ...

Step 9: 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:

  1. <catalog_product_view>
  2.     <reference name="root">
  3.         <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
  4.     </reference>
  5.     <reference name="head">
  6.         <action method="addJs"><script>jquery/jquery.jqzoom.js</script></action>
  7.         <action method="addJs"><script>varien/product.js</script></action>
  8.     ...
  9. ...

Step 10: 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:

  1. });})();
  2. jQuery.noConflict();

Open js/jquery/jquery.jqzoom.js.

Add the following near the end of the file:

  1. })(jQuery);
  2. jQuery.noConflict();
  3. function trim(stringa) {

Step 11:

Open app/design/frontend/default/portero/template/catalog/product/view.phtml.

Add the following jQuery code:

  1. <div class="product-img-box">
  2.     <?php echo $this->getChildHtml('media') ?>
  3.     <script type="text/javascript">
  4.         jQuery(document).ready(function(){
  5.             var options = {
  6.                 zoomWidth: 265,
  7.                 zoomHeight: 265,
  8.                 showEffect: 'show',
  9.                 hideEffect: 'fadeout',
  10.                 fadeoutSpeed: 'slow',
  11.                 title: true
  12.             }
  13.             jQuery(".jqzoom").jqzoom(options);
  14.         });
  15.     </script>
  16. </div>

For more documentation about the code and more available options for JQ Zoom; visit: http://www.mind-projects.it/projects/jqzoom/.

Step 12:

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:

  1. <!--
  2.     <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
  3.     <div class="image-zoom" id="track_outer">
  4.         <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
  5.         <div id="track">
  6.             <div id="handle"></div>
  7.         </div>
  8.         <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
  9.     </div>
  10.     <script type="text/javascript">
  11.         Event.observe(window, 'load', function() {
  12.             product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
  13.         });
  14.     </script>
  15. -->

Next we need to replace the following code:

  1. <p class="product-image-zoom">
  2.     <?php
  3.         $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
  4.         echo $_helper->productAttribute($_product, $_img, 'image')
  5.     ?>
  6. </p>

with:

  1. <p class="product-image-zoom">
  2.     <?php
  3.         $_img = '<a href="'.$this->helper('catalog/image')->init($_product, 'image').'" class="jqzoom" title="Magnified Image"><img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'"/></a>';
  4.         echo $_helper->productAttribute($_product, $_img, 'image')
  5.     ?>
  6. </p>

Conclusion: That’s it folks. Reload the product page, mouse over the main product image and have fun!

Questions? Feel free to ask. Andy Nu nuandy.at.yahoo.com




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs