¿Cuál es el problema con mi función JS que busca clases HTML y condicionalmente oculta o muestra?

Estoy intentando modificar un tema de Dawn 2.0 para que, en la página de productos, solo se muestren imágenes con ciertas etiquetas dependiendo de un selector de entrada. Tengo un producto que consta de 8 artículos, cada artículo tiene una imagen. Este producto se puede pedir en tres variaciones:

• La primera variación sería el producto con 4 artículos.
• La segunda variación sería el producto con 6 artículos.
• La tercera variación sería el producto con 8 artículos.

Hay un selector de variantes en la página de productos:

Imagen

y se han creado las tres variantes en la página de productos de administración de Shopify. La solución que estoy intentando utilizar es esta. Lo elegí porque es la única que encontré en otros lugares (aparte de comprar un complemento que no quiero hacer), me pareció un enfoque lógico, aunque no tengo una lealtad particular a este enfoque si alguien puede pensar en una mejor manera de lograr lo que estoy tratando de hacer.

Esta solución implica el uso de valores asignados al atributo de texto alternativo de la imagen a través de la página de productos de administración de Shopify. Los valores de texto alternativo aplicados son:

• set_all para las primeras 4 imágenes, porque estos 4 elementos estarían incluidos en las tres variantes (la de solo x4 elementos, la de x6 elementos y la de x8 elementos).
• set_6&8 para la quinta y sexta imágenes, porque estos dos elementos estará incluidos tanto en la segunda variante (la de x6 elementos) como en la tercera variante (la de x8 elementos).
• set_8 para la séptima y octava imágenes, porque estos dos elementos solo se incluirán en la tercera variante (la de x8 elementos).

Luego interpolando ese valor de texto alternativo en una etiqueta de datos en el html:

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

que se aplica al <li> en el que está alojada cada imagen, y luego escribiendo una función de JavaScript que:

• oculta todas las imágenes
• almacena en una variable local el valor de texto alternativo de la imagen destacada (la “imagen destacada” es la única imagen que se puede aplicar a cada variante en la página de productos de administración de Shopify. Por lo tanto, si el usuario selecciona una variante diferente, se adjunta una imagen destacada diferente con texto alternativo diferente a esa variante).
• muestra las imágenes cuyo valor data-thumbnail-set-number coincide con el valor del texto alternativo de la featured_image. El código JavaScript es:

  ‘./assets/global.js’ en la clase VariantSelects, línea ~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)
  }

Todo esto funciona excepto dos problemas:

• Necesito escribir más condiciones en JavaScript no solo para que coincida con el texto alternativo de featured_image sino también para incluir:
  • las imágenes set_all, ya que estos elementos vienen con las 3 variaciones, y para la variante set_8 incluir las imágenes set_6&8. Debería poder lidiar con esto bien, probablemente codificaré el data-thumbnail-set-number que cada condicional está buscando.
• Aunque la función JavaScript parece efectiva al buscar y mostrar las imágenes con un valor data-thumbnail-set-number que coincide con el valor del texto alternativo de la featured_image, la página también parece siempre representar otra imagen, que no tiene la clase data-thumbnail-set-number aplicada al <li> en absoluto, y parece que esa imagen es siempre la primera de las imágenes guardadas en el producto principal.

A pesar de mucho tiempo buscando, no puedo entender por qué ocurre el problema 2 y cómo detenerlo. ¿Alguien puede ayudarme a resolver esto?