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:

screenshot

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 somethign?)...

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?

Any advice on how I should proceed with this would be great.

Cheers

... also: This really seems like drop-dead no-brainer absolutely-required functionality. Why wouldn't magento support stuff like this out of the box??

update

I finally got this figured out, for those individuals interested in something similar.

My first method of dealing with this - getting images from the child products worked to a degree, but got convoluted when trying to grab unique image urls for multiple sets of attributes. It also meant having to supply an image for each option in a simple product, so - a lot of unnecessary labor.

I ended up using the free plugin (with some modifications) that @Greg Demetrick suggested. Its a pretty solid little module that allows for image urls to be associated with any attribute option / as well as a couple of methods for grabbing them.

My final solution looks a bit like this:

catalog/product/view/type/options/configurable.phtml:

<?php foreach($_attributes as $_attribute): ?>

  // markup for the attribute

    <script type="text/javascript">
        //<![CDATA[
        var attribute_data_<?php echo $_attribute->getAttributeId() ?> = {};
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.id = '<?php echo $_attribute->getAttributeId() ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.title = '<?php echo $_attribute->getLabel() ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data = {};
        <?php 
        $a = Mage::getModel('eav/config')->getAttribute('catalog_product', $_attribute->getAttributeId() );
        $helper = Mage::helper('attributeoptionimage');
        foreach ( $a->getSource()->getAllOptions(true) as $option): ?>
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?> = {};
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?>.val = '<?php echo $option['value'] ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?>.imageurl = '<?php echo $helper->getAttributeOptionImage($option['value']); ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?>.imgtitle = '<?php echo $option['label']; ?>';
        <?php endforeach; ?>
        //]]>
    </script>

    <?php endforeach; ?>

This gets printed in the markup, one set for each attribute. Which works nicely, but returns all options for the attribute, instead of only the options selected for the product (data which teh getJsonConfig() object has stored). So, then I just test my attribute_data_xxx object against the spConfig, and send the unique matching options along to my controller script.

Extending getJsonConfig to grab the attribute urls would probably of worked as well...

Whatever the case - the key point here was associating image urls with the attribute options themselves (instead of products).

Cheers

nachito nachito · Accepted Answer · 2012-07-24T16:38:44

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:

Extend getJsonConfig to include a simple product image URL, or
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.

Magento - configurable product option images

update

2 Answers