Product Page: New Setting: Show only images for currently selected variants

[nicklepine]

Purpose

On the product page, we should only show the images in the gallery that correspond to the currently selected variant.

Approach

Since the way the variant image is currently being put to the forefront is by putting it to the front of the list of gallery images, adding a modifier class on it like --variant-image when it's one of the variant featured images and then using CSS like the following:

--variant-image {
  display:none;
}

--variant-image:first-child {
  display: block;
}

... might be a viable way to handle this such that it works without the need to add any JS logic.

Offer this as a setting: the setting would be what sets the class on the variant images. If it's disabled, the class just wouldn't be there and all the images would be visible.

Problem explained here: https://screenshot.click/21-05-e113w-2ictb.mp4

[nicklepine]

We have something like this in narrative:

[tauthomas01]

One thing to note is that Narrative is displayed differently when it comes to showing the variant image: video demonstration

From the video demonstration above, the variant image changes on the first image, but the rest of the product images are still being displayed at the bottom.

If we want to apply similar pattern on Dawn, we could change the 1st image when we switch variants, however, the rest of the images will still be displayed underneath.

If we switch variant, show the selected variant image and hide the rest of the product images, I don't think it will be good for performance because we're triggering layout shift.

This will need some UX exploration.

[nicklepine]

If we switch variant, show the selected variant image and hide the rest of the product images, I don't think it will be good for performance because we're triggering layout shift.

To be clear on expected behaviour:

When this setting is enabled, and I select a variant I should see:

1. First, the image associated with the variant
2. Then, the images not associated to any variant.
3. However, I should not see the images associated to the other variants.

So we would not be hiding the rest of the images, but a portion of it. You may be right that we'll need to figure out a way that is performant.

[ludoboludo]

I can take a look at this tomorrow 👍