Shopify - バリアントごとに複数のサムネイルを表示 - 最小限のテーマ

Question

注 - 詳しい情報やコード例が必要な場合は、かなり長いです。私はどこにも行きませんし、定期的にこれをチェックしていますので、余分に何かを提供することができます。

これらの投稿はたくさんありますが、正解はありません。 MinimalテーマはShopifyで非常に人気があり、多くの人がこの質問をしています。

Q：どのように私はバリアントごとに複数のサムネイル画像を表示しない - http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants

• 、この記事に似て、私は6枚、3黒、茶色3を持っています。
• 黒い靴が表示され、画像のサムネイルは3つの黒い画像を示します。
• 茶色の靴の変形をクリックします。
• ブラックサムネイル画像は削除/非表示になります。
• 3ブラウンのサムネイル画像が/に追加されています。特にここでは、あちこちのコードがあり

、トップセクションのhttps://gist.github.com/kyleaparker/560a3847860bace1d680

、gistfile1。 しかし、テーマの違いにより、これはプラグインとしての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> 

これは、クラス/ IDの変更とサムネールの変更を制御githubのページから、上記のコードを参照するためのコードです。

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

上記のコードは動作しません。しかし、https://retailtherapyboutique.myshopify.com/collections/womens/products/tamaris-26606-25-knee-length-boots?variant=18734617287 パスワード：schaum

黒画像が表示され、茶色のブーツの色のオプションをクリックし、メイン画像の変更が、サムネイルが変更されない、と同じグレーのブーツ。

githubページのコードの一部が削除されることがありますか、まったく書き直す必要がありますか？

Answer 1

そこにはjQuery/Liquidの専門家がいないようです...私は、Minimalテーマや他の多くのもので信じられないほどうまく動作する誰かによってこの解決策を渡されました。そして

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