Vote up!
Vote down!

Is it possible to unlink color selection from ajax updated image?

Hi there,

I have to confess I am confused with that so please receive my apologies if question is already answered or if question is not correct.

For a given product I have lets say green, red and black variations. I also need to add some photos independent of the variations so I add them to an image field for the content type instead of the variation type.
However I need to display all 5 images (green version, red version, black version and 2 global) in the same place under the main image in the full product view and let customer select which image to display in the main container.

So problem is, when the user changes the color from the "Ad to cart form" in the "product variations" area, images are ajax updated and it displays the images stored to the corresponding variation type. This means that I should either upload all images to all variation types, or disable ajax updating images and load all 5 images to a single variation type (which is obviously preferred).

I think my issue has to do with the known issue discussed extensively in various threads like this http://drupal.stackexchange.com/questions/40267/drupal-commerce-product-... but I still can't find my way around.

I would like to achieve something like this http://haftmarket.pl/pl/odziez/fartuch-kelnerski-d%C5%82ugi-gala

Any help regarding the ajax thing or a different way to solve it would be highly appreciated!!!!

Asked by: proko
on August 31, 2013

1 Answer

Vote up!
Vote down!

This may not work for your use case but one way to resolve this is to hide the variation images in the product variation's view mode (manage display) and only show images that are attached to the product node/display and relate to all variation.

It looks like the link you referenced is using the fancy attributes module which allow you to add a term reference field with an image filed attached to each term.

Hope this helps.

Answer by: ahimsauzi
Posted: Sep 2, 2013


Hello ahimsauzi and thank you for your suggestion. I had initially thought of this method which didn't finally follow as I wanted to take advantage of the built in functionality. It seems that there is no other way of doing what I want. I will most probably load all images in the content type as you said and use a gallery module or a plugin to display them in a single container in the full node page!

- proko on September 6, 2013

Hi proko, I had success using Kickstart's included cloud zoom to create the gallery on the content type.

If you do that you can get a gallery with thumbnails without adding any additional modules. The difference from the default behavior is that all product reference fields will change when a user click on an attribute but the main image gallery will not because it is not added to the content type's view mode.

This may be a good use case for product displays that have attributes that don't require large image but instead use a more editorial approach for product images.

- ahimsauzi on September 16, 2013