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:

I’m obtaining urls of related images (swatches, for example) when the options for the select gets built. Now I’m trying to do the same with configurable products, but it does not seem to be as straightforward.

Configurable products are built from simple products which represent each iteration of available options. Great. I can obviously upload images for each simple product, and that would be a good start to a solution to this.

For example:
Chair has 3 upholstery and 2 armrest choices (6 simple products).
For chair 2/b I upload upholstery swatch 2 and armrest swatch b, and label them accordingly. When the options get built, I grab image urls associated with each simple product by their label (maybe grabbing all images for that label and removing duplicates or something?)…

In Magento, I see:

In theme/catalog/product/view/type/option/configurable.phtml

<?php foreach($_attributes as $_attribute): ?>
    ..// 
    <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
        <option><?php echo $this->__('Choose an Option...') ?></option>
    </select>
    ..//
</div>
<?php endforeach; ?>
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
</script>

Unlike the bundle, the configurable product select/options are injected onto the page via javascript (in js/varien/configurable.js). This class is then reliant on getJsonConfig() to supply all information after that.

At this point, it seems I should be able to obtain a simple product’s image url information from that object. Tho I see no logic dealing with images at all in configurable.js. How would I go about obtaining those urls and associating them with the related option selects?

Answer 1

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.