Yireo_Webp2 icon indicating copy to clipboard operation
Yireo_Webp2 copied to clipboard

Swatches not updating images

Open AbdulSamadAbbasi opened this issue 4 years ago • 13 comments

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.

AbdulSamadAbbasi avatar Jan 26 '21 09:01 AbdulSamadAbbasi

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 avatar Jan 27 '21 06:01 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?

jissereitsma avatar Jan 27 '21 06:01 jissereitsma

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 avatar Jan 27 '21 07:01 AbdulSamadAbbasi

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

AbdulSamadAbbasi avatar Jan 27 '21 07:01 AbdulSamadAbbasi

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 avatar Jan 27 '21 07:01 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 avatar Jan 27 '21 08:01 jissereitsma

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

jissereitsma avatar Jan 28 '21 11:01 jissereitsma

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.

AbdulSamadAbbasi avatar Feb 01 '21 09:02 AbdulSamadAbbasi

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.

jissereitsma avatar Feb 11 '21 14:02 jissereitsma

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. swatchesissue

AbdulSamadAbbasi avatar Feb 12 '21 12:02 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.

AbdulSamadAbbasi avatar Feb 17 '21 05:02 AbdulSamadAbbasi

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

Amadeco avatar Jan 16 '22 13:01 Amadeco

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.

image

valiati100 avatar Aug 24 '22 18:08 valiati100