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.