Interact with Entity Reference fields

kevster,

That is very similar to what I'm doing. I have two vocabularies, "Scent" and "Scent Color" with fields as follows:
Taxonomy Terms

Scent Color:
  Fields:
    Name (Type: Term name textfield)
    Color Swatch (Type: Color Field | Widget: Simple Color Picker)
Scent:
  Fields:
    Name (Type: Term name textfield)
    Description (Type: Term description textarea)
    Color Ref (Type: Entity reference | Widget: Checkboxes / Radio buttons)

Product

Product:
  Fields:
    Product SKU (Type: Product module SKU form element)
    Title (Type: Product module title form element)
    ...
    Scent (Type: Entity Reference | Widget: Select list [Settings: Enable this field to function as an attribute... | Attribute selection widget: Rendered term)
  Display:
    Scent (Format: Rendered Entity | Rendered as: Add to cart form attribute)

Lastly, you may either want to create your own custom module based to Commerce Fancy Attributes, or a module to override the commerce_fancy_attributes_process_radios function in commerce_fancy_attributes.module.

For example, in my case I needed to update that function as follows to add a wrapper around my rendered items with a class noting which was selected. This was mostly so I can stylize the background of the fields using CSS:

@@ -32,7 +32,7 @@
   // Add our "Rendered term" option for taxonomy_term attributes.
   // @todo Support entityreference
   if (empty($form['locked']) && $instance['entity_type'] == 'commerce_product' &&
-    commerce_cart_field_attribute_eligible($field) && $field['type'] == 'taxonomy_term_reference') {
+    commerce_cart_field_attribute_eligible($field) && ($field['type'] == 'taxonomy_term_reference' || $field['type'] == 'entityreference')) {
     $form['instance']['commerce_cart_settings']['attribute_widget']['#options']['commerce_fancy_attributes'] = t('Rendered term');
   }
 }
@@ -101,11 +101,12 @@
       $default_value = isset($element['#default_value']) ? $element['#default_value'] : NULL;
       // This is the currently selected radio, wrap the rendered term into
       // a div with a special class so that it's themable.
+      $field_item_wrapper_attributes = '';
       if ($key == $default_value) {
-        $output = '<div class="description-selected">' . $output . '</div>';
+        $field_item_wrapper_attributes = ' attribute-selected' . ' ' . $default_value . ' ' . $key;
       }
 
-      $element[$key] += array(
+      $field_item = array(
         '#type' => 'radio',
         '#title' => $choice,
         // The key is sanitized in drupal_attributes() during output from the
@@ -118,7 +119,10 @@
         '#ajax' => isset($element['#ajax']) ? $element['#ajax'] : NULL,
         '#weight' => $weight,
         '#description' => $output,
+        '#prefix' => '<div class="field-item-radios-wrapper' . $field_item_wrapper_attributes . '">',
+        '#suffix' => '<div class="clearfix"></div></div>',
       );
+      $element[$key]+=$field_item;
     }
   }
   return $element;

This could have likely been done with a field template, but I was pressed for time.

Lastly, it was very important to use the Field Extractor module in this case to render the Scent Color, which was referenced by the Scent, which was referenced by the product. So, on my Taxonomy Term settings for the Scent, I have the following set:

Taxonomy - Scent - Manage Display - "Add to Cart form - attribute"
Field: Color Ref
Format: Field extractor (field_color_swatch. Formatter: Color Swatch)

The resulting product display can be viewed here: https://www.machsgutcandlebarn.com/product/24-ounce-jar-candle

The reasoning behind my use of Entity References, was because I didn't want to add every single color swatch to every single scent of every product. In my use case, the colors are referenced by the scent, which are in turn referenced by the product. So, this was a major time saver. The colors, in this case, are determined by the scent chosen. There are over 200 scents, but only 8 colors.

You may be able to accomplish what you want by only making the change to Commerce Fancy Attributes specified in this Issue Summary, and pairing it with the Field Extractor module.

Jim

By the way, I missed a part of your question. You cannot use the standard image field on the product entity. Instead, you need to create a taxonomy vocabulary for your products. The image field should be added to the taxonomy term fields. On the product, not the product display, you would add an entity reference field. This entity reference would reference your taxonomy term.

Images themselves do not serve as product attributes. You can only use fields with a defined list of options as attributes on the add to cart form (see http://www.drupalcommerce.org/user-guide/product-attributes-variations). Therefore, you must use a field with a defined set of options, such as List(text), Term Reference, Entity Reference, etc... You may not use a text field, or an image field.

With Commerce Fancy Attributes, even with the patch I mentioned in the issue summary, you are limited to using a Term reference, either by choosing "Term reference" or "Entity reference" and being sure to choose "Target type: Taxonomy term".

I understand the feature you are looking for, but I don't think this module provides the simplest solution. If I understand correctly, you are intending to have the standard product image as a single valued field on the product. Then, you want the product display to display one image per product variant. Finally, when a visitor clicks on the image, it would update the page to display the product represented by the image clicked.

You can accomplish a similar visitor experience using Commerce Fancy Attributes, Taxonomy terms, and Field Extractor, but your initial setup is going to be more complex. In addition, you'll want to utilize the VBO and Commerce BPC modules to streamline the data entry.