Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
i have configurable product on listing page with swatches enabled .
Configurable product has images swatches - Red , Green, Blue.
Not when i applied Color - filter as Red still images on Listing page -it still shows default configurable product image, instead it should show Red one image of one of Variant Product with Red image.
I just faced this exact (or possibly similar) issue and wasted a couple of days trying to figure it out.
The underlying issue is that the jsonConfig of product swatches that is generated for each product on the category view page gets cached.
jsonConfig for swatches is used to get many data of configurable product variations for fast switching on the category view and product view pages, including variation images.
If you clear the block_html cache (and possibly the full_page cache) and click on a specific color to be filtered, it will show the correct variation image of the configurable product, but if you remove the filter and then click on another color, the same variation image will load cause of the cached jsonConfig.
For example, you have a configurable product called "shoes", which has 3x variations: red, blue and green shoes.
When you click on the red filter, it will show the image of red shoes.
But if you then remove the red filter and add a green filter, it will still show red shoes as the image.
When you clear the cache, it will again work as expected for the 1st filter.
It's also a bit inconsistent for some reason, as in it will show correct results for some products, but not for others.
The more you use the color filter, the worse it gets...
I couldn't figure out how to fix the cache issue, so I blocked the usage of the jsonConfig.preSelectedGallery option in Magento_Swatches/view/base/web/js/swatch-renderer.js.
Find and comment out this line:
this._setPreSelectedGallery();
That functions sets the variation images so they don't have to be brought in via ajax.
But in this case, using the fallback ajax request that loads the correct variation image is a solution to bypass the incorrect/inconsistent jsonConfig cache.
BTW, you can copy the swatch-renderer.js into your theme (e.g. app/design/frontend/{vendor}/{theme}/Magento_Swatches/web/js/swatch-renderer.js), but know that this file changes with most Magento versions, so you will have to update it regularly with each upgrade if you want to keep it updated and use new features that come out.
Hopefully they fix this some day.
This is the default behaviour. Magento 2 is displaying the parent configurable product that contains the variation product with the filtered colour.
To show the child products in search/filter change their visibility to Search.
In your theme go to etc/view.xml add the following code , if code is already exist, kindly use "replace" instead "prepend"
<vars module="Magento_ConfigurableProduct"><var name="gallery_switch_strategy">replace</var></vars>
