So zeigen Sie nur Thumbnails ausgewählter Produktvarianten in Shopify an

Question

Wenn ich ein Produkt mit 10 Styles habe, dann hat jeder Style 10 Farben und jede Produktvariante hat mindestens 2 Bilder (vorne und hinten), das aktuelle Shopify Theme wird zeige alle Thumbnails (unter dem abgebildeten Bild) der Produktvarianten an. Diese Situation wird den Kunden schlechte UX-Erfahrung bringen, da das Anzeigen aller Variantenbilder die Produktseite zu überfüllt macht.

Ich habe versucht, den Code wie folgt zu ändern. Aber es zeigte überhaupt keine Vorschaubilder.

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs"> 
      {% for variant in product.variants %} 
      {% if variant == product.selected_or_first_available_variant %} 
       <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: '1024x1024' }}" class="product-single__thumbnail"> 
        <img src="{{ image.src | img_url: 'thumb' }}" alt="{{ image.alt | escape }}"> 
       </a> 
       </li> 
      {% endif %} 
      {% endfor %} 
     </ul> 

Wer kann mir helfen, das herauszufinden? Ich möchte Miniaturansichten des ausgewählten Stils und der Farbe des aktuellen Produkts anzeigen.

Danke!

Answer 1

Ich denke, dass Sie alle Thumbnails ausblenden sollten, außer was Sie durch css + js zeigen müssen. Zum Beispiel fügen Klasse .thumb und ‚Stylename‘ auf alle Ihre Thumbnails (li Elemente)

und in JS, wo Funktion auf „wählen Stil“ definiert ist hinzuzufügen .show auf alle Elemente mit Klasse mit ausgewählten „Stylename“

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs"> 
      {% for variant in product.variants %} 
      {% if variant == product.selected_or_first_available_variant %} 

       <!--let option1 is style--> 
       {% capture stylename %}{{variant.option1 | handle}}{% endcapture %} 

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

... irgendwo in JS, wo Ihr auf "select" -Variante Funktion definiert ist

$thumbs = $('.thumbs'); 
$options.on("change", function(){ 
    ... 
    $thumbs.hide(); 
    $('.thumbs.' + $(this).data('stylename')).show(); 
});