Change the product image when visitor makes an attribute selection in Ubercart

Question

Current Setup

Each product on the store has multiple images. When the visitor visits a product page they see a main image and a series of thumbnails (view). When they click on a thumbnail that image is instantly displayed in the main image area.

Each product also has an attribute selection dropdown for example "Colour".

Drupal / Ubercart Configuration

I'm using Drupal 6. There is a Product content-type that has a custom image field of type file. This image field accepts multiple values (i.e. multiple images).

I then use a view (views module) to display a series of thumbnails and javascript to change the main image when a thumbnail is clicked.

What I'm trying to achieve

What I would like in addition to the thumbnails is when the visitor selects a colour option from the colour attribute dropdown is for one of the available images be displayed (basically the one that matches the colour selection).

What I've looked at

I am aware of Ubercart Option Image but this forces you to upload a new image for each attribute and is not per product. For example the attribute colour is used for multiple different products that all share the same colours.

With option image module all products that share the same attribute would display the same image. So this is a no go.

Also I don't wan't to upload a new image I want to be able to use one of the existing images from the product node.

Answer 1

This should possible but in a somewhat roundabout way. Perhaps the following method will be worth the pain?

1. Create a new content type. Call it ImagefieldAttribute. Let that content type store an unlimited number of imagefields. Also associate the ImagefieldAttribute content type with a taxonomy vocabulary called attribute. Essentially the ImagefieldAttribute content type will store all product images having the same attribute

2. Now create a node reference field in the Product content type. The nodereference field will only link to the ImagefieldAttribute content type. (edit: make sure that nodereference field can have unlimited number of nodereferences. This is so that you can refer to an arbitrary number of ImageFieldAttribute content types -- each of them containing all images with a specific attribute)

3. You will need to change the view and thumbnails to reflect an additional level of indirection in the Product content type. If you're experienced in views you'll just recognize this as a case of creating a views relationship.

4. You should also be able to create exposed filters. Please note that again you will need to use relationships as the filters would be in the ImagefieldAttribute content type (which you will get through using the nodereference relationship). You can restrict the attributes which will be on display (e.g. If there is no yellow color amongst any of the items) you should not get yellow in the drop down. This you can achieve by using the http://drupal.org/project/views_taxonomy_selective_filter module.

5. It can be tedious to have to create an ImagefieldAttribute everytime and then nodereference it to your Product. This can be made easy using http://drupal.org/project/popups_reference

Obviously I haven't tried this out so you could encounter unforeseen problems along the way. It might also be a good idea to not have a taxonomy vocabulary for attributes but simply CCK select list. However, the views taxonomy selective filter will not work subsequently.

Answer 2

If I understand what you are attempting to accomplish, I have done something similar at http://homespun-at-heart.com/product/gracie. What I did to accomplish this was simply customize the option_images module's javascript and preloading functionality to update the main product image instead of option_image's image like it does by default.

The one major drawback of what I did was that duplicate images are stored at two places on the server and therefore separately downloaded. This was a small project that was done on a budget so I didn't have the freedom to invest the time to do it "right". But, if that is all you need...it works!

On this site we aren't attaching more than one image directly to the product, instead they are attached to the attributes with the option images module. It also wouldn't take an awful lot of work to write some js so that the color selection would be update when the thumbnail is clicked.

Update 1:
I'm not sure how much you are willing to invest it this project, but as I have thought about this a little more, it seems to me what you need it is to specify which attribute options apply to which pictures. What I would visualize is that when you are uploading the images on the product you would be able to make these selections.

Then, when the visitor selects an option that is attached to an image or when a thumbnail is clicked, the options are updated.

I haven't thought about it long enough to visualize the interface yet. Maybe some of your other requirements would dictate that.

Update 2:
After your comment below, here are some more suggestions.

On the edit/options screen of you product, you could have a dropdown that would allow you to select which images apply to which of the specific options. This will allow you to overcome the issue of having your image uploaded to your server multiple times.

To accomplish this would require a substantial amount of work and probably another table or at least a field added to the uc_product_options table to store the relationship between the product and the image. I would use the uc_option_image module as a starting point. It would give you a lot of direction on accomplishing what is needed.

What I did to overcome the issue of having the attributes attached to multiple products is have my customer put all the possible colors on the attribute then they select only the ones apply to the specific product. The other option that we considered but vetoed was setting up a lot of different attributes that would roughly correspond to each different product. I forget all the reasons we didn't go this route but some of them are pretty obvious. :-)