我正在为客户设置自定义Shopify主题。他们的产品有不同的颜色和尺寸。我需要在收集页面上单独显示每个颜色变量，但不要将所有尺寸变体显示为单独的项目。
然后，仍然在收集页面上，在每个产品项目中，我需要显示变体可用的尺寸范围。
类似于：
尺寸：XS S M L XL XXL
尺寸：XS S M L XL XXL
我一直在使用这篇文章中的解决方案：Shopify show color variants in collection but not size variant，它让我在那里的一部分 - 我能够单独显示颜色变体，但现在我不知道如何输出尺寸变量以及产品。
这是我正在使用的代码的简化版本：
{% for product in collection.products %}
{% 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 %}
{% assign product = variant %}
<a class="product" href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | img_url: '480x480' }}">
{{ product.title }}
<ul class="product__sizes">
<!-- Need to output sizes here -->
</ul>
</a>
{% capture tempList %}
{{colorlist | append: color | append: ' '}}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
非常感谢任何帮助！
答案 0 :(得分：1)
你几乎就在那里，但我必须清理你的代码，因为彼此有3个代码，这是很多循环。
以下是修改后的代码：
{% for product in collection.products %}
{% assign options = product.options %}
{% assign have_color = false %}
{% assign size_index = false %}
{% for option in options %}
{% comment %}Check if there is a color option{% endcomment %}
{% if option == "Color" or option == "Colour" %}
{% assign have_color = forloop.index0 %}
{% endif %}
{% comment %}Get the size index{% endcomment %}
{% if option == "Size" %}
{% assign size_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if have_color != false %}
{% assign variants = product.variants %}
{% assign colorlist = '' %}
{% assign sizelist = '' %}
{% assign color = '' %}
{% comment %}Get All Sizes{% endcomment %}
{% for variant in variants %}
{% comment %}We use the @ to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
{% assign string_check = variant.options[size_index] | append: '@' | prepend: '@' %}
{% unless sizelist contains string_check %}
{% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}@{{ variant.options[size_index] }}@{% endcapture %}
{% endunless %}
{% endfor %}
{% assign sizelist_array = sizelist | replace: '@', '' | split: ',' %}
{% for variant in variants %}
{% capture color %}
{{ variant.options[have_color] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign product = variant %}
<a class="product" href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | img_url: '480x480' }}">
{{ product.title }}
<ul class="product__sizes">
{% for size in sizelist_array %}
<li>
{{ size }}
</li>
{% endfor %}
</ul>
</a>
{% capture tempList %}
{{colorlist | append: color | append: ' '}}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
主要区别在于我在外部for循环中取出color检查，在同一循环中我得到size选项索引。此外，还有一个单独的循环填充了一个sizelist变量。
以下是额外添加项目的代码细分：
{% assign have_color = false %}
{% assign size_index = false %}
我添加了变量，一个用于颜色检查，一个用于尺寸索引。
{% for option in options %}
{% comment %}Check if there is a color option{% endcomment %}
{% if option == "Color" or option == "Colour" %}
{% assign have_color = forloop.index0 %}
{% endif %}
{% comment %}Get the size index{% endcomment %}
{% if option == "Size" %}
{% assign size_index = forloop.index0 %}
{% endif %}
{% endfor %}
在此循环中，我们检查产品是否有颜色并设置尺寸索引。
{% assign sizelist = '' %}
我们创建了另一个包含所有大小的变量。
{% comment %}Get All Sizes{% endcomment %}
{% for variant in variants %}
{% comment %}We use the @ to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
{% assign string_check = variant.options[size_index] | append: '@' | prepend: '@' %}
{% unless sizelist contains string_check %}
{% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}@{{ variant.options[size_index] }}@{% endcapture %}
{% endunless %}
{% endfor %}
这里我们使用所有大小填充sizelist变量，我们使用@字符创建唯一字符串，我们可以检查它们是否包含在列表中。
{% assign sizelist_array = sizelist | replace: '@', '' | split: ',' %}
之后，我们清除@字符中的填充变量，并将其拆分为,以创建数组。
<ul class="product__sizes">
{% for size in sizelist_array %}
<li>
{{ size }}
</li>
{% endfor %}
</ul>
这是我们输出尺寸时的甜蜜时刻。