我正在为客户设置自定义 Shopify 主题。他们的产品有不同的颜色和尺寸。我需要在产品系列页面上单独显示每种颜色变体，但不将所有尺寸变体显示为单独的项目。
然后，仍然在产品系列页面上，在每个产品项目中，我需要显示该变体可用的尺寸范围。
所以像这样：
T恤(红色(
尺码： XS M L XL XXL
T恤(蓝色(
尺码： XS M L XL XXL
我一直在使用这篇文章中的解决方案：Shopify 在集合中显示颜色变体，但不显示尺寸变体，这让我在那里找到了一部分 - 我能够单独显示颜色变体，但现在我不确定如何输出尺寸变体与产品一起。
这是我正在使用的代码的简化版本：
{% 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 %}
任何帮助都非常感谢！
你快到了，但我不得不清理你的代码，因为你彼此有 3 个 for，这是相当多的循环。
以下是修改后的代码：
{% 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选项索引。此外，还有一个单独的循环填充大小列表变量。
以下是额外添加项的代码细分：
{% 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>
这是我们输出尺寸的甜蜜时刻。