Multiple Variant Images

Highlighted
New Member
3 0 0

Hello,

I want to show only the images corresponding to a specific color variant, therefore I named all the alt-tags of the related images the same and I tried to modify my product-template.liquid and my theme.js.liquid according to this video: https://www.youtube.com/watch?v=ARpSIscriYA but I think the code changed, or the Brooklyn theme I'm using is too different.

In the video the images are stored in a list, for me the images are in a product-single__media-group-wrapper. I think the corresponding code section should lie somewhere here:

<div id="ProductMediaGroup-{{ section.id }}" class="product-single__media-group-wrapper" data-product-single-media-group-wrapper>
          <div class="product-single__media-group{% unless stacked %} product-single__media-group--single-xr{% endunless %}" data-product-single-media-group>
            {%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
            {% assign height = 850 %}
            {% assign width = 575 %}
            {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
            {% comment %}
              Display product images
            {% endcomment %}
            {%- for media in product.media -%}
              {%- assign featured = false -%}
              {%- if media == featured_media -%}
                {%- assign featured = true -%}
              {%- endif -%}

              {%- capture thumbnail_alt -%}
                {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                  {{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                {%- elsif media.media_type == 'model' -%}
                  {{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                {%- else -%}
                  {{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                {%- endif -%}
              {%- endcapture -%}

              <div class="product-single__media-flex-wrapper" data-slick-media-label="{{ thumbnail_alt }}" data-product-single-media-flex-wrapper>
                <div class="product-single__media-flex">
                  {%- include 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}

                  {% comment %}
                    Display a "View in your space" button (multi) for the first visible media and each individual model.
                    Stacked layout only.
                  {% endcomment %}
                  {% if stacked %}
                    {%- assign xr_id = false -%}
                    {%- if first_media and first_3d_model -%}
                      {%- assign xr_id = first_3d_model.id -%}
                    {%- elsif media.media_type == 'model' -%}
                      {%- assign xr_id = media.id -%}
                    {%- endif -%}

                    {%- if xr_id -%}
                      {%- include 'xr-button' with model_id: xr_id, multi: true -%}
                    {%- endif -%}
                    {%- assign first_media = false -%}
                  {% endif %}
                </div>
              </div>
            {%- endfor -%}
          </div>

 

I think this loop needs to be modified:

{%- for media in product.media -%}
              {%- assign featured = false -%}
              {%- if media == featured_media -%}
                {%- assign featured = true -%}
              {%- endif -%}

 

And in theme.js.liquid I think the function

_updateMedia: function(variant) {
      var variantMedia = variant.featured_media || {};
      var currentVariantMedia = this.currentVariant.featured_media || {};

      var isMatchingPreviewImage = false;

      if (variantMedia.preview_image && currentVariantMedia.preview_image) {
        isMatchingPreviewImage =
          variantMedia.preview_image.src===
          currentVariantMedia.preview_image.src;
      }

      if (!variant.featured_media || isMatchingPreviewImage) return;

      this.$container.trigger({
        type: 'variantMediaChange',
        variant: variant
      });
    },

 

Can be modified?

I also found another code-snippet which seems also to be outdated: https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe 

I hope someone can help

Best regards

Kevin

 

 

 

 

0 Likes