test

assets/global.js

@@ -937,7 +937,7 @@ class SlideshowComponent extends SliderComponent {
     const slideScrollPosition =
       this.slider.scrollLeft +
       this.sliderFirstItemNode.clientWidth *
-        (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
+      (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
     this.slider.scrollTo({
       left: slideScrollPosition,
     });
@@ -959,6 +959,7 @@ class VariantSelects extends HTMLElement {
     this.toggleAddButton(true, '', false);
     this.updatePickupAvailability();
     this.removeErrorMessage();
+    this.filterImageVariant();
     this.updateVariantStatuses();
 
     if (!this.currentVariant) {
@@ -973,6 +974,14 @@ class VariantSelects extends HTMLElement {
     }
   }
 
+  filterImageVariant() {
+    const variantId = this.currentVariant?.id;
+    const productImages = document.querySelectorAll(`[data-variant-id]`);
+    productImages.forEach((image) => {
+      image.style.display = image.dataset.variantId === variantId ? 'block' : 'none';
+    });
+  }
+
   updateOptions() {
     this.options = Array.from(this.querySelectorAll('select, fieldset'), (element) => {
       if (element.tagName === 'SELECT') {
@@ -1107,8 +1116,7 @@ class VariantSelects extends HTMLElement {
     const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
 
     fetch(
-      `${this.dataset.url}?variant=${requestedVariantId}&section_id=${
-        this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section
+      `${this.dataset.url}?variant=${requestedVariantId}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section
       }`
     )
       .then((response) => response.text())

snippets/product-media-gallery.liquid

@@ -196,7 +196,6 @@
             class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}"
             data-target="{{ section.id }}-{{ featured_media.id }}"
             data-media-position="{{ media_index }}">
-            <p>Test1</p>
             {%- capture thumbnail_id -%}
               Thumbnail-{{ section.id }}-0{{ id_append }}
             {%- endcapture -%}
@@ -230,12 +229,13 @@
               {% if product.selected_or_first_available_variant.featured_image.alt != media.alt and product.selected_or_first_available_variant.featured_image.alt != blank %}
               style="display: none;"
               {% endif %}
+              thumbnail-alt={{ media.alt }
+
               id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
               class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
               data-target="{{ section.id }}-{{ media.id }}"
               data-media-position="{{ media_index }}">
-              <p>{{ product.selected_or_first_available_variant.featured_image.alt }}</p>
-              <p>{{ media.alt }}</p>
+              
               {%- if media.media_type == 'model' -%}
                 <span class="thumbnail__badge" aria-hidden="true">
                   {%- render 'icon-3d-model' -%}