Hi all!

Hopefully a simple question-- my site sells different styles of photo albums, often with a variety of cover images/ colors (example: https://www.frameitwabanstore.com/p-3028-pioneer-small-fabric-4x6-photo-album-da-46cbf.aspx) using Advanced Image Viewer. We have a default image with the full array of cover options, and then individual images for each cover option.

I managed to get the colorControls thumbnails to update the color dropdown value in the add-to-cart-form (and vice versa,) and selecting from the thumbnail or the dropdown will update the main (medium) product image, as well as the large pop-up image.

The only part that isn't working is the 'zoomImg' doesn't update on dropdown or thumbnail selection, so on hover it's still showing the default image instead of the selected option. I know I need to set the image src of 'zoomImg' to the appropriate image so that it refreshes along with the medium and pop-up images, but I can't seem to make it happen (I am by no means a js or xml expert.) Any help would be appreciated.

EDIT: I also just noticed that products with size/color modifiers have no product image in the shopping cart or the One Page Checkout mini-cart. These products all have default images; shouldn't that show up even if it can't find a variant image?



in MultiStore by (310 points)
edited by

2 Answers

+1 vote
Best answer

I know this is an old ticket, but I see that it is still pertinent. I would suggest getting the current Advanced Image Viewer for V10 and compare the code concerning that functionality, as it works as expected in V10:


Send me a ticket in our Help Desk and I'll get the add-on to you.


by (4.3k points)
selected by
Thanks, Erik! Yes, the demo appears to work as expected. Submitting a ticket now.
0 votes
Problem mostly solved, thanks to Vortx Erik! The Advanced Image Viewer for v10 has a reinitializeZoom() function in imageviewer.js which passes the correct URL for the chosen color to the zoom window. (I ended up replacing the whole setColor(newColor) function, just cuz there were some other variables I would've had to hunt down, and this was easier.) I prevented the pop-up image from also showing up in the main browser window just by adding event.preventDefault() to both cases in the popUpLarge() function.

The only thing not fixed is that products using size/color options do not have images in the shopping cart, though they *do* have the correct images in the minicart. As far as I can tell, the "pColorImageURL" parameter in minicartcontent.xml.config is correctly concatenating the default image filename with the selected color, whereas shoppingcart.aspx is getting the (presumably default) image URL from the shopping cart control, which I guess is part of the source code I don't have. Maybe I can rewrite the URL in the cart-product-image div? I dunno. It's a problem for another day.
by (310 points)