How to change product image on swatch selection on related product on product view page in Magento 2?

Question

I have color swatches on related products list on product page. I want to change product image on the basis of swatch selection on view page.

How can I change image?

Answer 1

I have done this using below steps:

1. add a function in the block : vendor/module_name/Block/Index/Index.php

public function getProductPricetoHtml(
        \Magento\Catalog\Model\Product $product,
        $priceType = null
    ) {
        $priceRender = $this->getLayout()->getBlock('product.price.render.default');
        $price = '';
        if ($priceRender) {
            $price = $priceRender->render(
                \Magento\Catalog\Pricing\Price\FinalPrice::PRICE_CODE,
                $product
            );
        }
        return $price;
    }

2. call your block in phtml and use action in the top of the file:

use Magento\Framework\App\Action\Action;
$blockObj= $block->getLayout()->createBlock('Vendor\Module_Name\Block\Index\Index');

3. call price block like this for product price:

<?php echo $blockObj->getProductPricetoHtml($product, $type); ?>

4. Call color swatches:

<?php if($product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE){
                                     $swatchBlock = $this->getLayout()->createBlock("Magento\Swatches\Block\Product\Renderer\Listing\Configurable")->setTemplate("Magento_Swatches::product/listing/renderer.phtml");
                                       echo $swatchBlock->setProduct($product)->toHtml();                           
                                    } ?>

Done! now product image will change on click swatches on any custom product collection.

I hope it will be helpful someone.