Shopify多库存变体显示异常：重复提示与无分隔符问题

原代码核心问题 #

1. 遍历每个变体时重复输出“Ready to ship”文本，有多少个有库存变体就重复多少次
2. 变体链接之间未添加逗号分隔符
3. 外层循环遍历所有选项，每个符合条件的选项都会触发一次变体渲染，可能导致重复输出整个区块

修正后的代码 #

{%- assign has_large_option = false -%}
{%- for option in product.options_with_values -%}
  {%- if option.values.size > 20 -%}
    {%- assign has_large_option = true -%}
    {%- break -%} {% comment %} 找到第一个符合条件的选项就停止遍历，避免重复判断 {% endcomment %}
  {%- endif -%}
{%- endfor -%}

{%- if has_large_option -%}
  {%- assign in_stock_variants = product.variants | where: 'inventory_quantity', '>' , 0 -%}
  {%- if in_stock_variants.size > 0 -%}
    <div style="color:gray; font-size:12px;">
      Ready to ship: 
      {%- for variant in in_stock_variants -%}
        <a href="{{ variant.url }}" alt="View available variant {{ variant.title }}">{{ variant.title }}</a>
        {%- unless forloop.last -%}, {% endunless %} {% comment %} 最后一个变体不添加逗号 {% endcomment %}
      {%- endfor -%}
    </div>
  {%- endif -%}
{%- endif -%}

关键优化点 #

• 提前标记符合条件的选项：用has_large_option变量统一标记是否存在选项值数量超过20的情况，仅触发一次渲染逻辑
• 批量筛选有库存变体：通过where过滤器直接获取所有库存大于0的变体集合，减少循环内的判断逻辑
• 控制文本唯一显示：将“Ready to ship”放在变体循环外部，确保仅显示一次
• 智能添加分隔符：利用forloop.last变量判断是否为最后一个变体，仅在非末尾的变体后添加逗号，避免多余符号

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