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

Question

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 

    }
}
?>

Answer 1

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.

Answer 2

After R&D of M2 core file, i got solution. Here is that I have add extra images in my gallery section. So add code for extra images in to gallery.phtml file. Here i am giving path of core file. But put it into your theme.

/vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

<?php
$_product = $block->getProduct();
if( $_product->getTypeId() == 'configurable')
{    
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $mediaUrl = $objectManager->get('Magento\Store\Model\StoreManagerInterface')
                    ->getStore()
                    ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
    $_children = $_product->getTypeInstance()->getUsedProducts($_product);
    //echo "<pre>";
    //print_r($_children);
    $tempAray = array();
    $cId = '';
    foreach ($_children as $child)
    {
        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();


        $_product12 = $objectManager->create('Magento\Catalog\Model\Product')->load($child->getID());  
        $attrImage = $_product12->getData('test');   
        //echo "<pre>";
        //echo $attrImage;
        if(isset($attrImage) && $attrImage != '' && $attrImage != 'no_selection' )
        {
             $cId .= $child->getID().",";
            $productImageAttr = $_product12->getCustomAttribute( 'test' );
            $productImage = $this->helper('Magento\Catalog\Helper\Image')
            ->init($_product12, 'test')
            ->setImageFile($productImageAttr->getValue());  ?>

            <img style="display: none;" id="model_id_<?php echo $child->getID() ?>" src="<?php echo $productImage->getUrl() ?>" width="150" title="<?php echo $child->getName() ?>" alt="<?php echo $block->escapeHtml($child->getName()) ?>" />
            <img style="display: none;" id="model_id_default" src="<?php echo $mediaUrl ?>coming_Soon.png" width="150" title="<?php echo $child->getName() ?>" alt="<?php echo $block->escapeHtml($child->getName()) ?>" />
    <?php 

        }
    }
     $modelId = rtrim($cId,",");

    ?>
            <img style="display: block;" id="model_id_default_placehoder" src="<?php echo $mediaUrl ?>coming_Soon.png" width="150" title=" " alt="<?php echo $block->escapeHtml($_product12->getTitle()) ?>" />
            <input type="hidden" id="model_photo_id" name="model_photo_id" value="<?php echo $modelId ?>" >
<?php } ?>

Now for change effect put code in js file. /vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js

find function _changeProductImage: function () {

In that function find images = this.options.spConfig.images[this.simpleProduct]; After that add following code

/********** Start For extra image *******************************/

        var modelIds = document.getElementById('model_photo_id').value;
        document.getElementById('model_id_default').style.display = 'none';
        document.getElementById('model_id_default_placehoder').style.display = 'none';

        var modelIdArray = modelIds.split(",");
        for(var cnt = 0; cnt<(modelIdArray.length); cnt++)
        {
            if(document.getElementById('model_id_' + modelIdArray[cnt]))
                document.getElementById('model_id_' + modelIdArray[cnt]).style.display = 'none';

        }
        if(document.getElementById('model_id_' + this.simpleProduct))
            document.getElementById('model_id_' + this.simpleProduct).style.display = 'block';
        else
            document.getElementById('model_id_default').style.display = 'block';

        /*************** End For extra image    *********************/