Magento Configurable products : change product image on thumbnail option

This article describes a  color chooser for magento product page, a technique that automatically use product attributes from a Magento admin to display color thumbnails that

• allows end user to choose color option by clicking on thumbnail
• change product image to associated product image

the technique above is inspired from Magento Wiki page that describes the javascript that catches the Options price select event to modifyu the product image. We’ve changed a few things though

1. this example is a color chooser. First thing is to create a folder in media/productColors with thumbnails of available colors, all stored in a file with the name of the color
2. follow the Magento Wiki tutorial carefully
3. instead of adding the code to view.phtml, create a new phtml file
   app/design/frontend/*/*/template/catalog/product/view/WebmasterBulletin_JsConfigColors.phtml with the following code

   
   

   <?
       $_helper = $this->helper('catalog/output');
       $_product = $this->getProduct();
   ?>
   <script type="text/javascript">
       var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
   
       var assocIMG = { // Added
       <?php
       if ($_product->getTypeId() == "configurable") {
           $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
   
           foreach ($associated_products as $assoc)
               {$dados[] = $assoc->getId().":'".($assoc->image == "no_selection" || $assoc->image == "" ? $this->helper('catalog/image')->init($_product, 'image', $_product->image)->resize(365,400) : $this->helper('catalog/image')->init($assoc, 'image', $assoc->image)->resize(365,400))."'";
               }
       } else {
           $dados[] =  "''";
       }
       echo implode(',', $dados );
       ?>
       }   
   
   function displayProductConfigImage(id)
   {
   jQuery('#image0').attr('src', assocIMG[id]) ;
   jQuery('#image0').attr('jqimg', assocIMG[id]) ;
   jSelectImage('0');
   }
   function selectColor(idAttribute, idProduct)
   {
   jQuery('#attribute76').val(idAttribute);
   spConfig.reloadPrice();
   displayProductConfigImage(idProduct);
   }
   var tipConfigImgThumb = "Choose your color :";
   </script>
   <?  $ii=0;foreach ($associated_products as $assoc)
            {
            $color=$assoc->getAttributeText("color");
            $w=100; $h=100;
            $imageColorSource =  "/media/productColors/" . strtolower($color) . ".jpg";
            $imageColorResized =  Mage::getBaseUrl() . "/media/phpThumb_1.7.9/phpThumb.php?src=" .  $imageColorSource . "&w=$w&h=$h&iar=1";?>
            <a href="javascript:selectColor(<?=$assoc->getColor()?>, <?=$assoc->getId()?>)" id="ConfigImgThumb<?=$assoc->getId()?>"><img src="<?=$imageColorResized?>" width="<?=$w?>" height="<?=$h?>" alt="<?=$color?>" border="0"></a>
   <script>new Tip('ConfigImgThumb<?=$assoc->getId()?>', tipConfigImgThumb + '<b><?=$color?></b>');</script><?
            }
        ?>

4. reference WebmasterBulletin_JsConfigColors.phtml in layout/catalog.xml, in the catalog/product_view block section :

       <block type="catalog/product_view" name="product.products_jsConfigColors" as="webmasterbulletin_products_js_config_colors" template="catalog/product/view/WebmasterBulletin_JsConfigColors.phtml" />

5. in the product.view.phtml you can now place your color chooser where you like

   <?if ($_product->isSaleable() && $this->hasOptions()) echo $this->getChildHtml('webmasterbulletin_products_js_config_colors');?>