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!


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:

 }, 300);
 }, 300);


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.