Magento – How to change custom image on change of configurable product option change

configurable-productconfigurable-swatchesmagento-2.1magento2product-images

I need change custom images (not product image) change on change of configurable product option change.

For that, I will create new product image attribute and assign those images to this newly created attribute. On product detail, I can load that image from that newly created attribute code.

Now when configurable product option changes, I want to change those images also. By default only product image changes in the gallery section.

If anyone knows how to do this then please let me know.


Detail explanation:

I have a custom requirement as follow.

On the configurable product detail page, I need child product image slider other than which comes in Magento default product slider. This is because website selling sunglass, specs, and frames.

Now on main product slider (default Magento), we are displaying e.g. sunglass. When you change color from the drop-down (configurable product) sunglass image automatically change as per default Magento functionality.

But in the new slider (child product image slider) which I will add, in that slider model image comes with wearing that sunglass. So when the color change from drop-down e.g select Blue color so 2 images will be changed.

  1. sun glass image. The blue sunglass display in product image slider (default Magento functionality)

  2. New slider image. now model image display with wearing blue sunglass.

For the new slider, I will upload the appropriate image in child product with custom attribute (Media type attribute) so I can display in the new slider.

But I do not know how to change that image when change option.
I hope now you understand what I am trying to say and why I need. Still, you have any question then please let me know.

************************** Display extra image code *******************

<?php
$_product = $block->getProduct();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$_children = $_product->getTypeInstance()->getUsedProducts($_product);

foreach ($_children as $child)
{

    $_product12 = $objectManager->create('Magento\Catalog\Model\Product')->load($child->getID());  
    $attrImage = $_product12->getData('test');   // "test" is my custom attribute
    if(isset($attrImage) && $attrImage != '' )
    {
        $productImageAttr = $_product12->getCustomAttribute( 'test' );
        $productImage = $this->helper('Magento\Catalog\Helper\Image')
        ->init($_product12, 'test')
        ->setImageFile($productImageAttr->getValue());?>
        <img src="<?php echo $productImage->getUrl() ?>" alt="<?php echo $block->escapeHtml($_product12->getTitle()) ?>" />
<?php 

    }
}
?>

Best Answer

As you can see in app/design/frontend/Magento/luma/etc/view.xml.

<vars module="Magento_ConfigurableProduct">
    <var name="change_only_base_image">false</var>
</vars>
<vars module="Magento_Swatches">
    <var name="change_only_base_image">false</var>
</vars>

Change these to false and image gallery will change arcoding to configurable options.

I'm not sure this can satify your question but you can try.

Related Topic