使用布鲁克林主题在Shopify的``收藏''页面上显示所有颜色变体 [英] Show All Color Variants on Collection page in Shopify using Brooklyn Theme
本文介绍了使用布鲁克林主题在Shopify的``收藏''页面上显示所有颜色变体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
嘿,我在shopify网站上使用的是布鲁克林主题.我有不同的产品会颜色变种.当我单击收集页面时,我想将该产品的所有颜色显示为单独的产品.自昨晚以来我一直在搜身,请帮忙.
Hey i am using brooklyn theme in my shopify website. I have different products will color variants . When i click on collection page i want to show all color variants of that products as separate products. I am googling since last night any help please.
推荐答案
查看下面的代码.
<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>
上面的代码可以在收集页面中显示产品的可用颜色.您可以采用相同的循环结构并显示整个产品网格,而不仅仅是显示变体名称.
The code above can display the available colors of a product in collection page. You can take the same loop structure and display the entire product grid instead of just displaying the variant name.
这篇关于使用布鲁克林主题在Shopify的``收藏''页面上显示所有颜色变体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文