如何在Shopify集合页展示商品所有可用尺码（不受颜色影响）

原代码的问题在于，它仅通过对应颜色（比如第一个颜色Green）的变体来判断尺码是否可用，导致其他颜色下存在的可用尺码（比如Black/36）被误判为售罄。要实现遍历所有尺码，只要该尺码在任意颜色下有可用变体就标记为可用，可以按以下方式修改代码：

{% comment %} 先定位到尺码选项，获取所有尺码值 {% endcomment %}
{% assign size_option = nil %}
{% for option in product.options_with_values %}
  {% if option.name | downcase contains 'size' %}
    {% assign size_option = option %}
    {% break %}
  {% endif %}
{% endfor %}

{% if size_option %}
  {% comment %} 遍历每个尺码值 {% endcomment %}
  {% for size_value in size_option.values %}
    {% assign is_available = false %}
    {% comment %} 检查所有变体中是否存在该尺码的可用款 {% endcomment %}
    {% for variant in product.variants %}
      {% if variant.options[size_option.position] == size_value and variant.available %}
        {% assign is_available = true %}
        {% break %} {% comment %} 找到一个可用的就停止遍历变体 {% endcomment %}
      {% endif %}
    {% endfor %}
    <span class="{% unless is_available %}soldout{% endunless %}">{{ size_value | escape }}</span>
  {% endfor %}
{% endif %}

代码逻辑说明： #

• 首先遍历商品的选项，定位到名称包含"size"的尺码选项，保存其信息（包括所有尺码值和它在选项中的位置）
• 对每个尺码值，遍历商品的所有变体，检查是否存在该尺码且库存可用的变体
• 只要找到一个符合条件的变体，就标记该尺码为可用；如果遍历完所有变体都没有可用的，才添加soldout类

这样处理后，你的示例商品（Green/32、Green/34、Blue/34、Black/34、Black/36）会正确展示：32（仅Green可用）、34（多颜色可用）、36（Black可用），不会遗漏Black/36这个可用尺码。

内容的提问来源于stack exchange，提问作者Anta