Magento - configurable product option images

Question

I\'m currently working on getting images for product options showing up on my first magento build. I have THIS figured out for bundled product, like so:

Answer 1

I think the ultimate issue you are going to run into here is that Options in an Attribute do not have images associated with them. You may need to install something like GoMage's Advanced Navigation which will add that functionality for you. In base Magento, images are only associated with products which is why you can extract them for Bundled products.

Once you have options with images you should be able to extract the option images from the added table in Magento on a per-product basis, display the base image for each option on load, then put in a JS swap for the other images on select. My recommendation would be to download the free "images with options" module below and install it. That will add a new helper class to display the images and will probably give you the code you need for the swapping as well.

The GoMage Module: http://www.gomage.com/extensions/searching-optimization/gomage-advanced-navigation.html/

Free version of a similar function: http://www.johannreinke.com/en/2012/02/05/magento-add-images-to-product-attribute-options/

Answer 2

You can get an array of simple products used in the configurable by using the getUsedProducts() method. This method is not part of the standard product model, but can be found in app/code/core/Mage/Catalog/Model/Product/Type/Configurable.php, so you'll need to first get the configurable product model using getTypeInstance(). That method accepts a single parameter stating whether or not you'd like to return the type model as a singleton (I did).

foreach ($_product->getTypeInstance(true)->getUsedProducts() as $simpleProduct) {
    // From this you should be able to get the image url
}

UPDATE

In spConfig as created by Mage_Catalog_Block_Product_View_Type_Configurable::getJsonConfig() there is an options array containing the product_ids specific to that configurable option.

spConfig :
  attributes : {
    603 : {
      id      : 603,
      code    : part_state,
      label   : "Part State",
      options : [
        {
          id       : 648,
          label    : Harvested,
          price    : 0,
          products : [204379]   // <-- Simple Product ID
        },
        {
          id       : 647,
          label    : New,
          price    : 0,
          products : [224333]
        }]
    },
  ...

At this point, you can either:

1. Extend getJsonConfig to include a simple product image URL, or
2. Create a mapping of simple product IDs to image URLs

I'll give you an example of #2 so you can see what functions you might use.

$spImages = array();
foreach ($this->getAllowProducts() as $_sp) {
    $spImages[$_sp->getId()] = 
        (string)$this->helper('catalog/image')
            ->init($_sp, 'small_image')
            ->resize(40,40);
}
// It is necessary to cast the URL to a `string` because the actual work done by
// Mage_Catalog_Helper_Image happens in the `__toString()` method... weird!

<script type="text/javascript">
    var spImages = <?php echo json_encode($spImages); ?>;
</script>

Now that you have a way to associate an image URL with a simple product ID, you'll need to update the image based on the current selected option. Magento's Product.Config has a configureElement() method that is triggered when the <select class="super-attribute-select"> changes, so I would tap into that. If you're not comfortable doing that, you've got all the information in spConfig.config and spImages from which you could write your own onChange event handler.