Shopify - Zeige mehrere Vorschaubilder pro Variante - Minimal Thema

Question

Hinweis - Bitte lesen Sie den Thread durch, es ist ziemlich lang, wenn Sie weitere Informationen oder Codebeispiele benötigen, fragen Sie bitte vor dem Downvoting; Ich werde nirgendwohin gehen und werde das regelmäßig überprüfen, und so kann und werde ich alles weitere liefern

Viele dieser Beiträge herum, aber keine richtige Antwort. Das Minimal-Thema ist auf Shopify sehr beliebt und viele Leute stellen diese Frage.

F: Wie kann ich mehrere Miniaturbilder pro Variante angezeigt - ähnlich wie diesem Beitrag http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants

• Ich habe 6 Bilder, 3 schwarz, 3 braun.
• Schwarzer Schuh wird gezeigt, Bildminiaturen zeigen die 3 schwarzen Bilder.
• Braune Schuhvariante wird angeklickt.
• Schwarze Miniaturbilder werden entfernt/ausgeblendet.
• 3 Braune Vorschaubilder werden hinzugefügt/gezeigt.

Es Code ist im Umlauf, vor allem hier, https://gist.github.com/kyleaparker/560a3847860bace1d680

im oberen Bereich, gistfile1. Aufgrund von Unterschieden in den Themen funktioniert dies jedoch nicht auf Minimal wie Plug'n'Play.

Der folgende Code steuert das Hauptbild und die Thumbnails zum Thema Minimal.

<div class="product-single__photos" id="ProductPhoto"> 
     {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %} 
     <img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg"{% if settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %} data-image-id="{{ featured_image.id }}"> 
     </div> 

     {% if product.images.size > 1 %} 

     <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs"> 

      {% assign featured_alt = product.selected_or_first_available_variant.option2 %}<!-- this line relates to the variant image code --> 
      {% for image in product.images %} 
      {% if image.alt == featured_alt or image == featured_image %}<!-- this line relates to the variant image code --> 

      <li class="grid__item wide--one-quarter large--one-third medium-down--one-third"> 
       <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail"> 
       <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}"> 
       </a> 
      </li> 
      {% endif %} 
      {% endfor %} 
     </ul> 

     {% endif %} 
</div> 

Dies ist der Code, der von der Github-Seite, die den Wechsel von Thumbnails, mit Klasse/id Änderungen steuert über Verweis auf den Code zu machen.

<script> 
jQuery(document).ready(function($){ 
var images = []; 
{% for image in product.images %} 
    images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"}); 
{% endfor %} 

var thumbnails = $("#ProductThumbs");       
$('#product-select-option-1').change(function() { 
var selected = $(this).val(), mainImage = jQuery('#ProductPhoto img').attr('src').replace('_medium', '_grande'); 

thumbnails.hide().html(""); 
arr = []; 
var addImage = $.each(images, function(i, image) { 
    var alt = images[i].alt, url = images[i].url; 
    if (alt == selected || url == mainImage) { 

// this code tries to build a new <li> tag for each thumbnails 
    thumbnails.append('<li class="grid__item wide--one-quarter large--one-third medium-down--one-third"><a href="' + url.replace('_medium', '_grande') + '" class="product-single__thumbnail"><img src="' + url + '" alt="' + alt + '"></a></li>'); 
    } 
}); 

arr.push(addImage); 
$.when.apply($, arr).done(function() { 
    thumbnails.fadeIn(); 
    $('#product .product-single__thumbnails a').on('click', function(e) { 
    e.preventDefault(); 
    switchImage($(this).attr('href'), null, $('#ProductPhoto img')[0]); 
     }); 
    }); 
    }); 
});  
} 
</script> 

jedoch der obige Code funktioniert nicht, https://retailtherapyboutique.myshopify.com/collections/womens/products/tamaris-26606-25-knee-length-boots?variant=18734617287 Passwort: schaum

Schwarze Bilder angezeigt werden, braune Stiefel Farbe Option klicken, werden die wichtigsten Änderungen Bild, aber die Thumbnails nicht ändern, das gleiche mit der graue Stiefel.

Habe ich etwas offensichtlich offensichtlich übersehen, oder in Teilen des Codes von der GitHub-Seite, die entfernt werden sollte - oder sollte es nur alles neu geschrieben werden?

Answer 1

Da es anscheinend keine jQuery/Liquid-Experten gibt ... wurde mir diese Lösung von jemandem gegeben, der unglaublich gut im Minimal-Thema funktioniert, sowie in zahlreichen anderen; und seine plug'n'play

https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe