[FIXED] What is the problem with my JS function searching html classes and conditionally hiding or showing?

Issue

I am trying to modify a Dawn 2.0 theme to, on the product page, only render images with certain tags depending on an input selector. I have one product which consists of 8 items, each item has an image. This product can be ordered in three variations:

• The first variation would be the product with 4 items.
• The second variation would be the product with 6 items.
• The third variation would be the product with 8 items.

There is a variant selector in the products page:

and the three variants have been created on the Shopify admin products page. The solution that I'm attempting to use is this one. I chose it as it's the only one I found reference to elsewhere (apart from buying an add on which I don't want to do), it seemed a logical approach to me, though I have no particular loyalty to this approach if anyone can think of a better way to achieve what I'm trying to.

This solution involves using values assigned to image's alt text attribute via the Shopify admin products page. The alt text values applied are:

1. set_all for the first 4 images, because these 4 items would be included in all three of variants (the one with only x4 itmes, the one with x6 items, and the one with x8 items).
2. set_6&8 for the 5th and 6th images, because these 2 items would be included in both the 2nd variant (the one with x6 items) and the 3rd variant (the one with x8 items).
3. set_8 for the 7th and 8th images, because these 2 items would only be included in the 3rd variant (the one with x8 items)

Then interpolating that alt text value into a data tag in the html:

data-thumbnail-set-number="{{media.alt}}"

which is applied to the <li> that each image is housed within and then writing a js function which:

1. hides all images
2. stores in local variable the alt text value of the featured image ('featured image' being the one, and only, image that you can apply to each variant in the Shopify admin products page. Therefore if the user selects a different variant a different featured image with different alt text is attached to that variant).
3. shows the images whose data-thumbnail-set-number value matches the value from the variant's featured_image.alt text. JS being:

'./assets/global.js' in VariantSelects class, line ~561

onVariantChange() {
   ...
   this.filterThumbnails();
   ...
};

filterThumbnails() {
    if (this.currentVariant.featured_media != null && this.currentVariant.featured_media.alt != null) {
      document.querySelectorAll('[data-thumbnail-set-number]').forEach(function(el) {
        el.style.display = 'none';
      });
    // show thumbnails for selected set
      var selected_set = this.currentVariant.featured_media.alt;
      document.querySelectorAll('[data-thumbnail-set-number="' + selected_set + '"]').forEach(function(el) {
        el.style.display = 'block';
      });
    }
    else {
    //show all thumbnails
      document.querySelectorAll('[data-thumbnail-set-number]').forEach(function(el) {
        el.style.display = 'block';
      });
    }
    // console.log("thumbnail update", this.currentVariant.featured_media.alt)
  }

This all works apart from two problems:

1. I need to write further conditions in the JS to not just match the featured_image.alt text but to also include:

• the set_all images as those items come with all 3 variations, and for the set_8 variant to include the set_6&8 images. I should be able to deal with this fine, will probably hard code the data-thumbnail-set-number that each three conditional is looking for.

2. Even though the JS function seems to be effective at searching and showing the images with a data-thumbnail-set-number value that matches the variant's featured image alt text value, the page also always seems to render one other image, which does not have the data-thumbnail-set-number class applied to the <li> at all, and it seems that that image is always the first of the images saved to the main product.

Despite a good deal of time looking I can't seem to understand why issue 2. is happening, and how to stop it. Can anybody help me solve this?

Solution

PEBCAK 🥴

To solve issue 2, I found that another <li> is inserted in the main-product.liquid above the <li> which iterates and shows all images in the image colleciton just to show just the featured image. I don't really understand why this featured image is separated out for rendering apart from the others in the collection, but it it. I just needed to add the data-thumbnail-set-number="{{media.alt}}" into this newly found featured image <li>.

As i took some time to write out this question I thought that I'd leave it here in case it's of help to anyone else.

Answered By - jbk

Answer Checked By - Senaida (PHPFixing Volunteer)