Magento configurable products : display images of sub product

In a previous article, I explored a technique that displays the first image of a sub product when selected in Magento's configurable product page. This time we go one step further by changing the set of thubmnails to display all images associated with the selected sub / simple product. this tutorial requires completion of the the previous one  including the magento wiki 'Change Product Image on View Page to Associated Product's Image' before you go ahead :

  1. in your media.phtml file, the big images are loaded via html. the image id is a collection of images from which only the first one is displayed initially, the other are waiting for the thumbail to be clicked. Simply add here the images collection from associated products,  each image being allocated a css ID built from product id and the increment
            <?//<associated product all images>
                if ($_product->getTypeId() == "configurable") {
            $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
              foreach ($associated_products as $assoc)
                {
                $assocProduct =Mage::getModel('catalog/product')->load($assoc->getId());
                 $i=0; 
    
                 if (count($assocProduct->getMediaGalleryImages()) > 0) {
                       foreach ($assocProduct->getMediaGalleryImages() as $_image)
                        {
                         $imageFile=str_replace(Mage::getBaseUrl('media'),"",$_image->url);
                         $imageId=$assoc->getId() . "_" . $i++;?>
                          <div onclick="showZoom('<?=$imageFile?>')" class="jqzoom">
                  <img style="z-index:-1;display:none" id="image<?php echo $imageId; ?>"
                  width="340px"
                  height="250px"
                  src="<?php echo $this->helper('catalog/image')->init($assocProduct, 'thumbnail2', $_image->getFile())->resize(350, 250); ?>"
                  alt="<?php echo $this->htmlEscape($assocProduct->getName()) ?>"
                    jqimg="<?php echo $_image->url; ?>"></div>
                <?php
                         }
                    }
                }
                } //</associated product all images>
            ?>
  2. in the same file, below, the images thumbnails are displayed in unordered lists. What you need to do here to create one unordered list per associated product, with a display none styling  :
                <?//<associated product all images>
                if ($_product->getTypeId() == "configurable") {
            $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
              foreach ($associated_products as $assoc)
                {
                $assocProduct =Mage::getModel('catalog/product')->load($assoc->getId());
                $i=0;
                 if (count($assocProduct->getMediaGalleryImages()) > 0) { ?><ul id="teckLoom<?=$assoc->getId()?>" style="z-index:-1;display:none">   <?
                       foreach ($assocProduct->getMediaGalleryImages() as $_image)
                        {
                         $imageFile=str_replace(Mage::getBaseUrl('media'),"",$_image->url);
                         $imageId=$assoc->getId() . "_" . $i++;?>
                         <li>
                <a href="#" onclick="jSelectImage('<?=$imageId ?>'); return false;">
                <img src="<?php echo $this->helper('catalog/image')->init($assocProduct, 'thumbnail', $_image->getFile())->resize(70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
            </a>         </li>
    
                <?php
                         }      ?></ul> <?
                    }
                }  }
                  //</associated product all images>   ?>
  3. use the select color  function from our previous article to display the associated image set when an option is selected via image click :
    function selectColor(idAttribute, idProduct)
    {
    jQuery('#attribute76').val(idAttribute);
    spConfig.reloadPrice();
    displayProductConfigImage(idProduct);
    jQuery(".more-views ul").hide();
    jQuery(".more-views ul#teckLoom" + idProduct).show();
    }
  4. add the following code to js/varien/product.js to let the effect work when an option is selected in the dropdown menu :
    var productNo = intersect(selectedAssocProducts) || selectedAssocProducts[attributeId][0];
    //alert(jQuery("#image0").attr('src'));
    //$('image').attr("src", assocIMG[productNo]);
    displayProductConfigImage(productNo);
    jQuery(".more-views ul").hide();
    jQuery(".more-views ul#teckLoom" + productNo).show();
  5. Have a look at the result on ruedesiam's lovely designed multi color loom furniture : try  the chaise giulietta
3 replies
  1. Mohammad Peer
    Mohammad Peer says:

    hi,, i have added this code and i got the associated product images but the loop is executed 3 times i.e, if i am having 2 associated product having 2 images for each product then i am getting those group of 4 images 3 times.
    on click of swatch i have triggered tag

    Reply
  2. jacopo
    jacopo says:

    have you tried this with multiple attributes?
    everything works fine but the second attributes fails to enable if i click on the image thumbnail (it will only enable if i change the option with the dropdown)

    Reply
  3. Sharon
    Sharon says:

    Great article!
    Few Questions though, i did not succeeded to do this with my site...

    1. js/verian/product.js wont the product.js file will be deleted on an upgrade? is there another location to insert it so it wont?
    2. I was looking to do the same as you did in: http://www.ruedesiam.com/collection/chaise-fauteuil-canape-banc/chaise-fauteuil-canape-loom.html (very nice site by the way) meaning I want to show all the colors of a product in the catalog and search results. I partially succeeded to do it by enabling the catalog & search for the simple products while the control of the product would be of the configurable parent product. I just did not manage to "transfer" the selected option (now, it shows the parent product image instead of the simple image that was clicked on. Can you share how you managed to do it?

    Thanks a lot for all the codes and ideas
    Sharon

    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 *