Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery

Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery

WP e-Commerce' s new version got integrated with Wordpress in a much better manner and has become one of my favourite Wordprss e-Commerce plugins. One of my projects required the integration of Cloud Zoom jQuery plugin with the Gold Cart Gallery. So here is a short hack on how to achieve it in a convincing manner.

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:

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:

Now this is the modified version of the above code:

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.

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.

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.


Discussion 32 Responses

Hi sumeet,

I don’t think this is working with the new 2.9.1goldcart files, ive just updated to the latest versions, and then added the cloud zoom integration, which looks great, but then it wont work with the other gallery images, its like they load into the viewer and not the frame.

Hope some of this makes sense
http://www.iggy.ie/products-page/male/new-test-product/

this is the site im working on.

Eoin

Yup, they have modified the code for the Gold Cart Gallery and this will not work in it. I did a modification to this code such that it works with the new updated gold cart. Will post it here soon. :)

@Eoin: I have made the changes to the code. It now works with Gold Cart version 2.9.1

Not clear on how To enable the Cloud Zoom feature, edit the wpsc-single_product.php

@Sylvain: You can only implement it if you have the Gold Cart Plugin for WP eCommerce.

Hello Sumeet,

I love this idea, and I have followed your instructions but something still is off. My thumbnails do replace the main image, but they come up in their own full sizes and there is no ability to zoom any further.

Here is an example page:
http://www.baubelocity.com/shop/?wpsc-product=sea-spray-bracelet

What do I need to tweak to fix this? Sorry, I was working on this past midnight and bleary-eyed, so I’m sure I missed something :)

Thanks so much for taking a look,
Maureen

Hey Maureen,

The problem that you are having is, the gallery thumbnail hyper link has the link to the big version of the image (which is correct) but the rel attribute of the hyper link also has the link to the big version of the image. (i.e. the smallImage attribute within rel). It should have the link to the small version of the image ;)

Sorry, I should add that I am using the Gold Cart plugin 2.9.1 for WP e-Commerce 3.8.3.

Sorry, I should add that I am using the Gold Cart plugin 2.9.1 for WP e-Commerce 3.8.3. After looking at the post above from eoin, it looks similar to his issue.

Yes, I have updated the code for the new version of the Gold Cart Plugin.

Hi Sumeet,

Thanks for the reply. I see what you mean when I view source in the browser, but where do I make this change? In the gold cart file or the wpsc-single-product page?

I have copied your code exactly from above. Does this page contain the update you made?

Maureen

@Maureen: The place where am fetching the small image:
$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
Replace the 337,437 with the size of the small image you want to display. (In your case, it should be 210,210)
You have to edit the gold_shopping_cart.php :)

Sumeet, you’re awesome! That fixed the problem. Thanks again for your help, and great job on this code!

Glad that I could help.. :)

I have integrated the code and I seem to be having trouble displaying the selected thumbnail in the original “main image” area, instead it is blowing it up to its original size or something. Any advice you could offer will help alot!

Click a thumbnail here to see what I mean:
http://couturerani.com/new/?wpsc-product=test

Thanks Sumeet!

I should mention that I replaced the image code on the wpsc-single_product.php around line 33 with your code here:

<a id="zoom1" rel="position: 'inside',smoothMove: 4" class="cloud-zoom" href="”>
<img class="product_image" id="product_image_” alt=”" title=”" src=”"/>

And then changed the proper function code on gold_shopping_cart.php exactly as you mentioned in the example (starts with $output) by deleted the original code and replacing it with your example.

thanks for the great code, I know it will work soon but maybe I made a wrong step or missed something?

NEVERMIND I FIXED IT! Please delete my previous posts!

I had the same problem as Maureen and used the solution you provided her.

Thanks Sumeet

I ran into another problem, Sumeet, maybe you can help out.

When the single-product page loads up, the zoom function on the main image doesn’t reference the large-image, instead it uses the lower-resolution image. Once I click on the same image in the thumbnail gallery (which i have setup on the left for a front-back view) the main image replaces and the zoom works as usual, same for the back, but before I click those thumbnails the main image loads up and only zooms the lower-res (seems like its zooming itself until I click a thumbnail to force it to reference the large image).

Your help will be greatly appreciated.

To see the issue go to: http://couturerani.com/new/products-page/churidars/test
… and without clicking thumbnails hover over the main image, then click the same image in the thumbnails and zoom again. It’s a different zoom when it first loads and when the thumbnail is clicked.

Thanks in advance

Hey Brandon,

The page seems to be password protected but your problem sounds like the main image hyperlink contains the link to the smaller image rather than containing the link to the larger version. Where as the gallery images are set up right i.e each image contains the link to the larger version in the javascript argument. Hence, when you click on the image, the main image gets replaced properly and hence the gallery images are working properly… Hope this helps.

Sumeet, thanks for the prompt reply!

Here is the code I have for single-product to link the images, please tell me if it needs correcting:

<a id="zoom1" class="cloud-zoom" rel="zoomWidth: 210, zoomHeight:210" href="”>
<img class="product_image" id="product_image_” alt=”" title=”" src=”"/>

<a href="”>
<img class="no-image" id="product_image_” alt=”No Image” title=”" src=”wpsc-images/noimage.png” width=”" height=”" />

oops its hiding the PHP, hold on…

[code]
<div class="imagecol">
<?php if ( wpsc_the_product_thumbnail() ) : ?>
<a id="zoom1" class="cloud-zoom" rel="zoomWidth: 210, zoomHeight:210" 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>
<?php
if ( function_exists( 'gold_shpcrt_display_gallery' ) )
echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
?>
<?php else: ?>
<a href="<?php echo wpsc_the_product_permalink(); ?>">
<img class="no-image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="No Image" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo WPSC_CORE_THEME_URL; ?>wpsc-images/noimage.png" width="<?php echo get_option('product_image_width'); ?>" height="<?php echo get_option('product_image_height'); ?>" />
</a>
<?php endif; ?>
</div><!--close imagecol-->
[/code]

Also, try this link again, I took off the password so you can check it out…

http://couturerani.com/new/products-page/sarees/test/

Notice, when it loads the zoom uses the smaller image. The code above is exactly what is on single-product.php

Thanks for your help Sumeet!

I checked out the link. From the above code, I can see that you are inserting the product image in the main image hyperlink’s href rather than inserting the actual image. The product image size is obviously set to something and WP resizes the image to that size.
This is what is inserted in the href tag..
and this is what should be inserted in the href tag. If you check out the image names, you will find that the former one is a resized version of the latter one.

In the code which I have modified, I am linking the gallery images to the original image. Hence, when you click on the gallery images, the original image is being replace in the hyerlink tag and then its working as expected.

Solution: In the hyerplink tag of the main image, instead of inserting the product image, try inserting the full size of the image. :)

Hi Suneet, I’ve followed the tutorial for using Cloudzoom for the thumbnails and it does work, BUT.

When I click on the single product page from the product categories page, the Cloudzoom doesn’t initialise until I’ve clicked one of the gallery thumbnails. Before that the cursor is a magnifying glass and the large image is just a link to itself.

Unfortunately I’m developing on my localhost so I don’t have a link to show.

This is a separate question, but Brandon, I noticed on your site that you’ve implemented the “Shopping Bag (x items)” in the header of the page. Would you be so kind as to share the code you used to display that?

hi did you get a fix to this problem im experiencing a the same issue, thanks

I only get this problem in Google Chrome, and when I enter the single product page from the Product Category page. If I follow a different link to the product page, it seems to work correctly.

I just installed CloudZoom and used your code but I’m experiencing issues in that the plugin isn’t working at all. Hovering over the large image just brings up the zoom magnifying glass and clicking on that or any of the images brings up the big image in its’ own window. Not at all what I want. Any idea where the problem persists?

http://rockshopnroll.com/wordpress/products-page/apparel/revamp-jacket/

I solved the issue. It was a JQuery conflict. However, I still have one final issue regarding the medium image. If you go to the same link I pasted in the previous post for the Revamp a Jacket page, the initial image is fine but click on any of the thumbnails and it becomes a mess. According to Sumeet’s instructions, we’re supposed to fetch the medium image from the database. However, he never explained how to do that. Not being much of a programmer, how is that accomplished? Any code examples?

I solved it. I didn’t realize I had to change the array in the gold_shopping_cart.php file. Now it’s working great.

Thanks Buddy,

It works fine on my system, I just added “true” to make the single product image as a medium size of image ie.

$small_image = wp_get_attachment_image_src( $post->ID, array(444,362, true));

thanks,
Jim

Hi !

Is there a way to exclude the main product image from the gallery (and the preview image) as they are displayed twice when doing a slideshow. Thank you for your reply :)

I can’t seem to get the small image dimensions correct. It seems like it’s putting a smaller image inside the main image square, but if I make the small image dimensions smaller as explained above, then when I click on an additional thumbnail, the main image gets really tiny (although the zoom now works).

http://shop.lovestoryshop.com/products-page/accessories/new-product

Trackbacks and Pingbacks

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>