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...
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.
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 .
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>
I solved this issue by using this method... Please suggest new ideas or better solution than this if available...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With