Shopifyの商品詳細ページにおいて選択されているバリエーションの商品画像だけを表示するコードカスタマイズ

{%- liquid 
   assign variant_featured_media_ids = ""
   assign variant_featured_media_key_ids = ""
   for variant in product.variants
     assign variant_featured_media_ids = variant_featured_media_ids | append: variant.featured_media.id | append: ','
   endfor
   assign variant_featured_media_ids = variant_featured_media_ids | split: ','
   assign variant_featured_media_key_ids = variant_featured_media_ids | uniq

   assign product_media_ids = ""
   for media in product.media
     assign product_media_ids = product_media_ids | append: media.id | append: ','
   endfor
   assign product_media_ids = product_media_ids | split: ','

   assign current_variant_featured_media_id = product.selected_or_first_available_variant.featured_media.id
   assign next_cariant_featured_media_key_id = variant_featured_media_key_ids | join: ',' | split: current_variant_featured_media_id | last | remove_first: ',' | split: ',' | first
   assign current_variant_media_ids = product_media_ids | join: ',' | split: current_variant_featured_media_id | last | remove_first:',' | split: next_cariant_featured_media_key_id | first | remove_last:',' | prepend: ',' | prepend: current_variant_featured_media_id | split: ','
-%}

<script type="application/json" id="variant_featured_media_key_ids">
{{ variant_featured_media_key_ids | json }}
</script>
<script type="application/json" id="product_media_ids">
{{ product_media_ids | json }}
</script>

<script defer>
  window.addEventListener('load', function() { 
    const variantRadios = document.querySelector('variant-radios');
    const variantRadiosInputs = variantRadios.querySelector('fieldset').querySelectorAll('input');
    const sliderComponetLis = document.querySelector('slider-component').querySelectorAll('li');
  
    const variantFeaturedMediaKeyIds = JSON.parse(document.getElementById('variant_featured_media_key_ids').textContent);
    const productMediaIds = JSON.parse(document.getElementById('product_media_ids').textContent);

    const variantData = variantRadios.getVariantData();
  
    variantRadiosInputs.forEach(input => {
      input.addEventListener('change', switchImages);
    })
  
    function switchImages(e) {
      const selectedVariant = variantData.find(variant => variant.option1 == e.target.value);
      const selectedVariantFeaturedImageId = String(selectedVariant.featured_media.id);
      const nextVariantFeaturedImageId = variantFeaturedMediaKeyIds[variantFeaturedMediaKeyIds.indexOf(selectedVariantFeaturedImageId) + 1];
      const startIndex = productMediaIds.indexOf(selectedVariantFeaturedImageId)
      const endIndex = nextVariantFeaturedImageId != undefined ?  productMediaIds.indexOf(nextVariantFeaturedImageId) :  productMediaIds.length;
      const selectedVariantImageIds =  productMediaIds.slice(startIndex, endIndex);
      sliderComponetLis.forEach(li => {
        const mediaId = li.dataset.mediaId.split('-').pop();
        if (selectedVariantImageIds.indexOf(mediaId) > -1) {
          li.classList.remove('adjust-to-variant'); 
        } else {
          if(!li.classList.contains('adjust-to-variant')) {
            li.classList.add('adjust-to-variant');
          }
        }
      });
    }
  });
</script>

<style>
  .adjust-to-variant {
    display: none;
  }
</style>

class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"

↓

class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}{% assign media_id_string = media.id | append: '' %}{% unless current_variant_media_ids contains media_id_string %} adjust-to-variant{% endunless %}"