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');?>
11 replies
  1. thresa
    thresa says:

    I am in the same position as Mark above. I have followed all the instructions but have yet to get rid of the drop downs. Maybe I am not quite understanding bullet item #1 fully, because I'm begining to think I am not sure if I did this correctly --> with thumbnails of available colors, all stored in a file with the name of the color.

    Would you please clarify in details.... ASAP Thanks a bunch.

    Reply
  2. jacopo
    jacopo says:

    I am sorry for the previous comment, I read your article more carefully and it's in fact clear what is this for.

    I have another related question thou:
    your sample (as some others around) starts by having color options displayed as Color Thumbnails.
    Instead I would like as color option not a default thumbnail, but a view of the related product.

    display
    Is there any example

    Reply
  3. jacopo
    jacopo says:

    hi.
    do you have a demo for this? i am not sure 100% of what is this for, but sounds interesting...

    Reply
  4. Mark
    Mark says:

    Hi, Is the person who wrote this handy tutorial available to help me out?

    I've followed the steps listed above and have also followed the wiki but I'm not getting it working as it should. I see no difference at all on the frontend - but I'm not quite sure what I should be doing with the configurable products in the admin.

    Many thanks

    Reply
  5. Rob
    Rob says:

    This is great and exactly what I am looking for! except it will not change the image when thumbnails are clicked.. Do you happen to know why?

    Reply
  6. chonkton
    chonkton says:

    Does this work for 1.4?

    It seems other solutions like this are for earlier versions.

    Many thanks.

    Reply
  7. Johannes
    Johannes says:

    Hi,
    I don't know what I have done wrong, but I have still the dropdown instead of the thumbnails.

    Do you know the misstake?

    Thanks in advance.

    Johannes

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *