Shopify Produktvarianten Bildgruppierung

1, in den Code-Hintergrund, in den Schnipseln innen zu finden product-media.liquid

Code hinzufügen:

{% if current_variant_color == media.alt oder media.alt == 'all' %}
Datenabgleich
{% endif %}

2, in Assets zu finden global.js

Code hinzufügen:

updateMediaBasedOnVariant() {

    const mediaGallery = document.getElementById(

      MediaGallery-${this.dataset.section}

    );

    const options = this.currentVariant.options.map((option) =>

      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"

    );

    // Standardmäßige Anzeige der Miniaturbilder einstellen

    mediaThumbnailWrapper.forEach((media) => {

      media.removeAttribute('data-matched');

    });

    // Einstellen der modalen Medienanzeige als Standard

    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;

      wenn (isMatch) {

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

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

        media.setAttribute("data-matched", true); media.setAttribute("data-matched", true); Media.

        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));;

      }

      return isMatch.

    });

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

      mediaGallery.setActiveMedia(

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

        wahr

      );

    });

    // Schieberegler zurücksetzen

    customElements.whenDefined("Schieberegler-Komponente").then(() => {

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

      sliders.forEach((Schieberegler) => {

        slider.resetPages();

      });

    });

  }

3, in assets innerhalb von section-main-product.css finden

Code 1.

.product-thumbnail_slider .product__media-item:not([data-matched]) {
Anzeige: keine !wichtig;
}

Code 2.

.thumbnail-list.slider-tablet-up .thumbnail-list__item.slider__slide:not([data-matched]) {
Anzeige: keine !wichtig;
}

.product-media-modal__content>img:not([data-matched]) {
Anzeige: keine !wichtig;
}