在Shopify中使用布魯克林主題的集合頁面顯示所有顏色變體

Question

嘿，我在我的shopify網站中使用布魯克林主題。我有不同的產品會變色。當我點擊收藏頁面時，我想將該產品的所有顏色變體顯示爲單獨的產品。我從昨天晚上開始使用Google進行搜索。

Answer 1

看看下面的代碼。

<ul class="colorlist"> 
{% for option in product.options %} 
{% if option == 'Color' %} 
{% assign index = forloop.index0 %} 
{% assign colorlist = '' %} 
{% assign color = '' %} 
{% for variant in product.variants %} 
{% capture color %} 
{{ variant.options[index] }} 
{% endcapture %} 

{% unless colorlist contains color %} 
    {% if variant.available %} 

    <li id="{{ variant.id }}" title="{{ variant.inventory_quantity }} In Stock" class="instock"><a href="{{ product.url | within: collection }}?variant={{ variant.id }}" style="background:{{ color | downcase }}">{{ color | downcase }}</a></li> 

    {% else %} 

    <li id="{{ variant.id }}" title="Out of Stock" class="outstock" >{{ color | downcase }}</li> 

    {% endif %} 

{% capture tempList %} 
{{colorlist | append: color | append: " " }} 
{% endcapture %} 
{% assign colorlist = tempList %} 
{% endunless %} 
{% endfor %} 
{% endif %} 
{% endfor %} 
</ul> 

上面的代碼可以顯示集合頁面中產品的可用顏色。您可以採用相同的循環結構並顯示整個產品網格，而不僅僅顯示變體名稱。