My Blog

My Writings, Sharing my Knowledge, News

Archive for April, 2011

Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery

Friday, April 22nd, 2011

Update 30th April, 2011: The WP e-Commerce Gold Cart Plugin got updated to a new version (v2.9.1). They did some changes in the gallery display method. Hence, I had to modify the code I posted earlier, so that it can work with the updated version of the Gold Cart Gallery.:

The Project

This project of mine required a gallery in the single product page and also the Cloud Zoom plugin enabled such that the users can have a zoomed view of the product's main image just by hovering over the image. The Gold Cart plugin for WP e-Commerce enabled the Gallery option but it provides the thickbox feature as the default option for previewing images.

The Problem

Even though the gallery was displaying the thumbnails perfectly well but there was some problem with it because after clicking on the thumbnail of the images in the gallery, the main product image was not being replaced. The Cloud Zoom plugin was activated on the main image of the product and without the option of the image being replaced by the images in the gallery, the whole point of implementing the gallery was pointless.

The Solution

So after doing a bit of research and finding no solution to replace the main image with the image being clicked in the gallery, I was forced to find another solution to the problem. Cloud Zoom is an awesome plugin and luckily it provides an option of implementing a gallery too, by just adding some classes and a complex rel attribute for the hyprlink tags of the images. This can be done in the following manner:

<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

</head>
    <body>

        <!--
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>

        <!--
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>

        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
        	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  

        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

    </body>
</html>

The details on the arguments for the Cloud Zoom plugin are provided here.

Now from the above example the main points to note are as follows:

  • Class cloud-zoom in the main image's hyperlink tag.
  • The href attribute of the hyperlink tag contains the link to the larger version of the main image.
  • The rel attribute in the main image hyper link which provides the primary arguments for the plugin, which defines how the plugin will work.
  • The hyperlink tag encloses the smaller version of the product main image.
  • The class cloud-zoom-gallery in the hyperlink tag for the gallery thumbnails.
  • The href attribute of the hyperlink tag contains the link to the larger version of the image.
  • The arguments in the rel attribute for the hyperlink tag in the thumbnail gallery. It contains the id of the main image hyperlink, the link to the small version of the image.
  • The gallery hyperlinks enclose the tiny thumbnail images of the gallery.

Hence, we basically need three versions of the images to implement the gallery.

  • Large Version to enable zoom: Provided by the Gold Cart plugin itself.
  • Medium version which is supposed to be the size of the main image for the single product page: We have to fetch from the database.
  • Finally, the small tiny thumbnails for the gallery: Provided by the Gold Cart Plugin itself.

Now I am going to describe how to integrate this with the Gold Cart plugin and the required hack. First of all, after installing the Gold Cart Plugin, make sure that you have uploaded some images for the product and enabled the gallery in the settings. Also disable the lightbox feature.

Gold Cart Presentation Settings for the Gallery

After that make sure that the gallery is being displayed in the single product's page. Now lets do some code modification. Make sure you have backed up everything, specially the gold cart plugin before proceeding. Edit the gold_shopping_cart.php file and search for the function to display the gallery i.e. gold_shpcrt_display_gallery. In this function, go to the section which displays the gallery for versions above 3.8. This should start from the line number 308 (if you haven’t done any modifications to the code already). This is the original version of the code which displays the gallery:

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "\n", $thumbnails );
$output .= "</div>";
wp_reset_query();

Now this is the modified version of the above code:

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		// ORIGNIAL $link to Represent gallery images with thickbox
		//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
		$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
		$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
		$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );					

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "\n", $thumbnails ); // Imploding Array element as list items
$output .= "</div>"; // Ending list
wp_reset_query();

Now you can see from the above code that all we need to do is fetch a smaller version of the image (to display in the main image section) and modify the rel attributes such that the cloud zoom plugin activates the gallery feature too.

To enable the Cloud Zoom feature, edit the wpsc-single_product.php and modify the code where the image is displayed in a hyerplink tag. You can search it by the class product_image. You need to modify the rel attribute and add an id and a class to the hyperlink enclosing the image.

<a id="zoom1" rel="position: 'inside',smoothMove: 4" class="cloud-zoom" href="<?php echo wpsc_the_product_image(); ?>">
                       <img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
</a>

This is all you need to do to integrate the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Plugin's gallery. Also if you want to enable the jCarousel jQuery plugin on the gallery images, then you need to enclose the gallery hyperlink tags in list elements. For this you need to modify the code slightly such that the hyperlink tags are enclosed in an unordered list.

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<ul class='wpcart_gallery jcarousel-skin-tango'><li>"; // Adding li tag to start implode array elements as list items
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		// ORIGNIAL $link to Represent gallery images with thickbox
		//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
		$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
		$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
		$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );					

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "</li><li>", $thumbnails ); // Imploding Array element as list items
$output .= "</li></ul>"; // Ending list
wp_reset_query();

Conclusion

This method works pretty well for integrating the Cloud Zoom plugin with the WP e-Commerce Gold Cart gallery. But one drawback is that we are modifying the actual contents of the gold cart plugin and all the changes will be lost the day we update the WP e-Commerce gold cart plugin. Hence, I will try to make a plugin which enables this functionality rather than hard coding it in the plugin files.

Disclaimer: The above tutorial is meant to enable the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Gallery. I am not responsible if anything goes wrong and the shopping cart does not behave in the expected way. Please take proper backups before messing with any code of the theme or the plugin files.

Tags: , , , , ,
Posted in Blog, Tutorials | 32 Comments »

  • Graphic River Are My Sites Up? Theme Forest

  • Browse

  • Tag Cloud