Swatches not updating images

[AbdulSamadAbbasi]

Swatches are not updating. It either keeps on loading or return the main image and not variants. Magento2.4.1 , php7.4.11, NextGen 0.0.5, Webp2 0.9.5.

[jissereitsma]

I'm not sure if this is going to help, but could you first upgrade to the latest versions? NextGenImages is at 0.0.6 and Webp2 is at 0.9.6.

[jissereitsma]

I've tested this now myself and do not find any issues here. Could you also test this with both extensions disabled, just to make sure that we are troubleshooting an issue with this extension?

[AbdulSamadAbbasi]

I've upgraded to latest. NextGen is still 0.0.5 in composer? Anyways, now when I click swatches, the tag is replaced with the picture tag but the image link is still .jpg and in sources (inspecting browser) it loads .jpg, not .webp. Normally, the picture element contains two source tags in this extension, one with .jpg and other .webp but on clicking swatches, it's loaded with only one source tag with .jpg.

[AbdulSamadAbbasi]

On debugging I found that it's not getting in the loop if (justAnImage.img.indexOf('.webp') !== -1) in swatchRenderer.js.

[jissereitsma]

About the versioning, NextGen is at 0.0.6 on Packagist: https://packagist.org/packages/yireo/magento2-next-gen-images#0.0.6 Perhaps your composer cache has issues?

[jissereitsma]

I can see now that the intended functionality is no longer worker (WebP images being loaded in the fotorama effect). However, the original functionality is working perfectly for mine. So far I need to conclude that nothing is broken, but the gallery is not enhanced either - which is something I need to look further into.

[jissereitsma]

I've now released 0.10.0 which re-adds the WebP images in the gallery, plus support for swatches.

[AbdulSamadAbbasi]

Thanks, I'll check it today. And I'm confused about cached images. Can we handle that somehow, like creating cached images for webp before loading and not changing just urls for cached images on page load, what we're doing right now I guess, or enlighten me if I'm wrong.

[jissereitsma]

Sorry for the delay. The extension is quite simple in its approach: It assumes that - for a specific JPG or PNG - you want to have a WebP equivalent to be loaded. If that WebP image is not existing yet, it will be created. Don't see this as a cache. It is just another image that can be converted on the fly. If you don't want to convert the image on the fly, you could pregenerate it with a custom script.

[AbdulSamadAbbasi]

Hi, Sorry I ran into swatches issue once again. It's not updating source tags inside picture element thus not updating swatches on color change. If I manually put .webp instead of .jpg in source tag by inspecting on chrome, it works. Screenshot attached for better understanding.

[AbdulSamadAbbasi]

I've dug a bit deeper and found out that the Magento core functionality to change swatches on category is that it looks for src attribute and replaces it with corresponding image and since in this extension we are using srcset it doesn't replace it. For confirming, I changed srcset to src and it worked perfectly but I think we need to fix it with a better approach since we need srcset attribute as well as .jpg images in case of webp not supported by a browser.

[Amadeco]

@AbdulSamadAbbasi Hi, I am testing the extension and I have the same situation as you, did you find a quick fix ?

[valiati100]

Temporary solution:

Override the 'updateBaseImage' function from the swatch-renderer.js file. Add adjustment:
(vendor\magento\module-swatches\view\base\web\js\swatch-renderer.js)

Extend file for custom theme or create a mixin.