如何只顯示Shopify中所選產品變體的縮略圖

Question

如果我的產品有10種款式，然後每種款式有10種顏色，每種產品變體至少有2種圖像（正面和背面），目前的Shopify主題將會顯示產品變體的所有縮略圖（在特色圖片下）。這種情況會給用戶帶來糟糕的用戶體驗，因爲顯示所有不同的圖像會使產品頁面過於擁擠。

我試圖修改代碼如下。但它沒有顯示任何縮略圖。

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

任何人都可以幫我弄清楚這一點嗎？我想要顯示當前產品的選定樣式和顏色的縮略圖。

謝謝！

Answer 1

我認爲你應該隱藏所有縮略圖，除了你需要顯示槽css + js。 例如添加.thumb類和「樣式名」所有的縮略圖（li元素）

，並在JS哪裏定義的「選擇風格」功能添加.show與類的所有元素與選定的「樣式名」

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

...在JS的地方在那裏你 「選擇」 變函數定義

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