Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 447
Vijay Dholakia Avatar asked Nov 30 '13 11:11

Vijay Dholakia


People also ask

How do I edit a configurable product in Magento 2?

Log in to the Admin Panel, go to Products>Catalog, preselect the needed Magento 2 configurable product from existing simple products or press Create New Attribute to get a new one.. Once it's set up, click the Add Configurations (if a configurable is just created) or Edit Configurations option.

What is swatch attribute?

Swatches can be defined as a component of the color attribute or set up locally for a specific product and uploaded as product images. In the following examples, the Sylvia Capris are available in specific values of red , green , and blue .


1 Answers

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

like image 120
Vijay Dholakia Avatar answered Nov 15 '22 04:11

Vijay Dholakia