How to change configurable product main image by associated product image based on color and size attributes?

Question

I am using configurable product with size and color attributes. I want to change the main-image on configurable-product view as per the options chosen Like If I choose red-color then image of associated-product which has red color attribute value should display on main-image as soon as I choose the option.

How can I do that??

Thank you...

Answer 1

I have found one solution for this problem for which I am working...

There is one block at \app\code\core\Mage\Catalog\Block\Product\View\Type\Configurable.php .

1) Extend this block or just add "Mage\Catalog\Block\Product\View\Type\Configurable.php" to "\app\code\local" folder.

2) There is one method in Configurable.php, getJsonConfig() which is used for getting configurable product details with their associated products. I have created one new method in this file, called getJsonConfigImages() and in this method I have added following code.

public function getJsonConfigImages()
     {
        $spImages = array();
        foreach ($this->getAllowProducts() as $_sp) {
            $spImages[$_sp->getId()] = 
                (string)$this->helper('catalog/image')
                    ->init($_sp, 'small_image')
                    ->resize(645,520);
        }
        return Mage::helper('core')->jsonEncode($spImages);
     }

This method will give me every main-image-url of associated-product which is associated with configurable-product.

3) Then I just called this method at \app\design\frontend\yourpackage\yourtheme\template\catalog\product\view\type\options\configurable.phtml like this...

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    var spConfigimages = new Product.Config(<?php echo $this->getJsonConfigImages() ?>);
</script>

4) Now I have every main-image-url of simple products which are associated with configurable-product, then just used some javascript/jquery function to change src of the main-image on product page.

I solved this issue by using this method... Please suggest new ideas or better solution than this if available...