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

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...

Answer 2

There is also extension which changes configurable image according to the selected option Configurable Image Switcher.

This Extension adds feature on product page for configurable products. When customer select option of configurable product on product page, main image changes to the image from selected simple product.

If your associated simple prodcut doesnt have any image upliaded, it may change to the default image placholer or didnt change image (it may be configured in extension's admin settings)

Also extension support integration with custom zoom modules with different image size from base template.

Make sure that you have compilation disabled before installing extension. System > Tools > Compilation page and click on Disable button. After Installation you can enable compilation back.