Shopifyは、コレクション内のカラーバリエーションを表示しますが、サイズのバリエーションは表示しません。

Question

Shopifyのコレクションページに追加のカラーバリエーションを表示するゴールです。 Supplyテーマの使用。私はコレクション内のすべてのバリアント画像を表示していますが、バリアントが存在する場合にはカラーバリアントを表示するだけです。一部の品目にはバリアントがなく、一部にはサイズの変更があります。いくつかは色があり、あるものは色と大きさがあります。私は、コレクションページに色のすべてのサイズのバリエーションを表示したくありません。 Collection.liquid

{% for product in collection.products %} 
    {% for variant in product.variants %} 
    {% if has_sidebar %} 
     {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %} 
    {% else %} 
     {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %} 
    {% endif %} 
    {% include 'product-grid-item' %} 

    {% else %} 

    <div class="grid-item"> 
     <p>{{ 'collections.general.no_matches' | t }}</p> 
    </div> 
    {% endfor %} 
    {% endfor %} 

</div> 

製品グリッドitem.liquid

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}"> 

{％ならsold_out％} {{ 'products.product.sold_out' | t}} {％endif％} 私はif文でバリエーションを確認し、次にforloopを追加する必要があると考えています。 {％for option in product.options％} {％if option == 'Color'％}

助けていただければ幸いです。

Answer 1

このようなことがあれば、始めることができます。

最初に商品のオプションをループしてから、色や色のみを指定して、そのオプションに属するすべてのバリアントをループします。色をつかんで、タイトルのリストアイテムを作成します。

<ul> 
{% for option in product.options %} 
    {% if option == "Color" or option == "Colour" %} 
    {% assign index = forloop.index0 %} 
    {% assign colorlist = '' %} 
    {% assign color = '' %} 
    {% for variant in product.variants %} 
     {% capture color %} 
     {{ variant.options[index] }} 
     {% endcapture %} 
     {% unless colorlist contains color %} 
     <li><span class="color-{{color | handle }}"><a href="{{variant.id}}">{{color}}</a></span></li> 
     {% capture tempList %} 
      {{colorlist | append: color | append: ' '}} 
     {% endcapture %} 
     {% assign colorlist = tempList %} 
     {% endunless %} 
    {% endfor %} 
    {% endif %} 
{% endfor %} 
</ul>