Shopifyの商品バリアント画像のグループ化

1、コード背景の中のスニペットでproduct-media.liquidを探す。

コードを追加する：

{% if current_variant_color == media.alt or media.alt == 'all' %}.
データ一致
{% endif %}。

2、アセットでglobal.jsを探す

コードを追加する：

updateMediaBasedOnVariant(){」。

    const mediaGallery = document.getElementById()

      MediaGallery-${this.dataset.section}`。

    );

    const options = this.currentVariant.options.map((option) => オプション)

      オプション.toLowerCase()

    );

    const mediaWrapper = Array.from()

      mediaGallery.querySelectorAll(".product__media-item")

    );

    const mediaThumbnailWrapper = mediaGallery.querySelectorAll()

      ".thumbnail-list__item"

    );

    const mediaModal = document.querySelectorAll()

      ".product-media-modal__content img"

    );

    // デフォルトのサムネイル表示を設定する

    mediaThumbnailWrapper.forEach((media) => {.

      media.removeAttribute('data-matched')；

    });

    // メディアのモーダル表示をデフォルトで設定する

    mediaModal.forEach((media) => {)

      media.removeAttribute('data-matched')；

    });

    const matchesMedia = mediaWrapper.filter((media) => {.

      media.removeAttribute('data-matched')；

      const alt = media.getAttribute("data-media-alt")；

      const isMatch = alt === "all" || this.currentVariant.options[0] === alt；

      if (isMatch) { { {

        const mediaId = media.getAttribute("data-media-id")；

        const id = mediaId.split("-").pop()；

        media.setAttribute("data-matched", true); メディア.

        const thumbnail = mediaGallery.querySelector()

          `[data-target="${mediaId}"]`

        );

        thumbnail && (thumbnail.style.display = "block")；

        thumbnail && thumbnail.setAttribute("data-matched", true)；

        const modal = document.querySelector()

          .product-media-modal__content img[data-media-id="${id}"]`。

        );

        modal && (modal.setAttribute("data-matched", true));；

      }

      を返す。

    });

    customElements.whenDefined("media-gallery").then(() => {)

      mediaGallery.setActiveMedia(

        matchesMedia[0].getAttribute("data-media-id")、

        真の

      );

    });

    // スライダーをリセットする

    customElements.whenDefined("slider-component").then(() => {)

      const sliders = mediaGallery.querySelectorAll("slider-component")；

      sliders.forEach((slider) => {)

        slider.resetPages()；

      });

    });

  }

3、assetsの中でsection-main-product.cssを見つける。

コード1

.product-thumbnail_slider .product__media-item:not([data-matched]) { [データ一致])
display: none !important；
}

コード2。

.thumbnail-list.slider-tablet-up.thumbnail-list__item.slider__slide:not([データ一致]){。
display: none !important；
}

.product-media-modal__content>img:not([data-matched]){」。
display: none !important；
}