search

vuestorefront / storefront-ui

A frontend library for Vue and React that helps developers quickly build fast, accessible, and beautiful storefronts. Made with 💚 by Vue Storefront team and contributors.
https://storefrontui.io
MIT License
2.33k stars 455 forks source link

[BUG] PDP - Gallery - Main image is not getting replaced with the thumbnail images when the user browse to PDP from PLP #2193

Open scernisevs opened 2 years ago

scernisevs commented 2 years ago

Describe the bug Main image is not getting replaced with the thumbnail images when the user browse to PDP from PLP. If a PDP is open directly in a new window, then it is possible to replace the main image with the one from the thumbnail

How to reproduce Steps to reproduce the behavior:

  1. Go to a PLP

  2. Click on a product (the product must have several image in its gallery) and load its PDP

  3. Click on the Image Thumbnail

  4. Observe that the Main image has not been changed, and nothing has happened

  5. Open the PDP link in a new browser window directly

  6. Click on the Image Thumbnail

  7. Observe that the main image is being changed

Expected behavior The thumbnail image should become the Main Image

Actual behavior Nothing happens

Devices (please complete the following information):

Additional context

┆Issue is synchronized with this Jira Zadanie by Unito

DavidGolodetsky commented 2 years ago

I've seen that issue as well. It looks like Glide.js issue. Once you go from one product to another that has a different amount of thumbnails the glide's track isn't updated. So the images are there, they are changing, but the viewport is wrong, so we're seeing the white background all the time (but sometimes it could be half of an image).

Looks like we should be watching images and call Glide's update method, but this doesn't work as well. It's related to this Glide issue which is merged, so maybe SFui should update the dependency, I've tried to do that but found their issues with Glide, so I ended up recreating Glide's instance whenever a number of thumbs changes, which is suboptimal. Overall Glide doesn't look like a reliable library for the job.

marwand commented 1 year ago

To whoever is still running into this bug, I found a good fix in Shopify's implementation template (@vuestorefront/template-shopify).

Briefly, the problem I was running into was when: you go to a product detail page from another page (not ssr), and the product has multiple images, changing the active image by clicking on a thumbnail doesn't work until you refresh the page.

What got it working for me is a combination of :

  1. the mounted/updated life cycle events, see: https://github.com/vuestorefront/template-shopify/blob/f0e85a2d928e198a72abf19995e513232afe4f50/pages/Product.vue#L453

  2. Adding a loader component to the template, see: https://github.com/vuestorefront/template-shopify/blob/f0e85a2d928e198a72abf19995e513232afe4f50/pages/Product.vue#L2

FRSgit commented 1 year ago

Hey everyone!

Sorry for such delayed response - I've just taken over the SFUI team in January and was focused on getting SFUI2 released till now. I read through your comments and I don't think I fully understand the issue yet - also the example does not work anymore (it's nobody's fault, I know it's 1.5 years old 😄). We have now capacity to tackle this issue, but to be able to work on it we need to get a reproduction - could someone provide it here please? 🙏

And FYI: SFUI1 is now in LTS mode as we have released SFUI2 some time ago. Please migrating as SFUI2 supports Vue3. Also, because of all that I will keep that issue open for a week, but if I don't get any response here I'll close it till there is a reproduction. Hope you can help me with that though 🙌

Cheers!