Adding image zoom to Aurora (WebSphere Commerce) Part 2

Earlier this year I posted an article (Using Dynamic Drive’s Image Zoomer in WebSphere Commerce) but I didn’t complete it. Meaning, if you selected a new swatch color the large zoom image did not change to the new color. This post finishes the implementation, all be it as a little hack but works great!

Capture

Hopefully you did the steps in the first post before trying these steps as they would not make much sense. We will only be modifying this file: WidgetsWidgetsProductFullImage under the AuroraStorefrontAssetStore.

Add this new function to figure out what the new large zoom image is:

updateImageZoom = function(){
    var element = document.getElementById('productMainImage');
    var img = element.getAttribute("src");
    img = img.replace("447x447","1000x1000");
 
 jQuery('#productMainImage').addimagezoom({ // single image zoom
    zoomrange: [3, 10],
    magnifiersize: [447,447],
    magnifierpos: 'right',
    cursorshade: true,
    largeimage: img//<-- No comma after last option!
 }) 
 
}

Then you will modify the jQuery.document.ready() function with the following code to register for when a new swatch was clicked:

$('.color_swatch').click(function(){
 setTimeout(function(){
 updateImageZoom();
 }, 300);
 });
 $('.color_swatch_selected').click(function(){
 setTimeout(function(){
 updateImageZoom();
 }, 300);
 });

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s