Shopify Debut主题：解决搜索结果中部分有货产品显示售罄问题

问题根源 #

Shopify默认的product.available属性只判定首个（默认）变体的库存状态，所以当默认变体售罄但其他变体还有货时，搜索结果会错误显示“售罄”。

具体解决方案 #

修改search.liquid中的产品渲染逻辑，通过遍历所有变体判断是否存在可用库存，替代原有的单一默认变体判断：

1. 替换库存判断逻辑 #

把你原来的{% if item.object_type == 'product' and item.available == true %}替换为以下代码，先检查产品是否有可用变体：

{% for item in search.results %}
  {% if item.object_type == 'product' %}
    {% assign has_available_variant = false %}
    {% for variant in item.variants %}
      {% if variant.available %}
        {% assign has_available_variant = true %}
        {% break %} <!-- 找到可用变体就停止循环，提升加载速度 -->
      {% endif %}
    {% endfor %}

    {% if has_available_variant %}
      <!-- 这里保留你原来的产品卡片渲染代码（标题、图片、链接等） -->
      <div class="product-grid-item">
        <a href="{{ item.url }}">
          <img src="{{ item.featured_image | img_url: 'medium' }}" alt="{{ item.title }}">
          <h4>{{ item.title }}</h4>
          <!-- 优先显示有库存变体的价格 -->
          {% assign available_variant = item.variants | where: 'available', true | first %}
          <span class="price">{{ available_variant.price | money }}</span>
          <!-- 调整库存标签显示 -->
          {% if item.available == false and has_available_variant %}
            <span class="product-badge">部分有货</span>
          {% elsif item.available %}
            <span class="product-badge">有货</span>
          {% else %}
            <span class="product-badge">售罄</span>
          {% endif %}
        </a>
      </div>
    {% endif %}
  {% endif %}
{% endfor %}

2. 调整库存标签显示 #

如果默认变体售罄但存在其他可用库存，不要显示“售罄”，改成“部分有货”或者直接显示“有货”（可根据需求修改标签文字）。

3. 性能优化（可选） #

用{% break %}在找到第一个可用变体时终止循环，避免遍历所有变体，减少页面加载耗时。

核心逻辑说明 #

• 新增的has_available_variant变量会遍历产品所有变体，只要有一个变体有库存就设为true，以此准确判断产品是否还有货。
• 若需要在搜索结果中展示可用变体的价格，通过item.variants | where: 'available', true | first获取第一个有库存的变体，再输出对应价格即可。

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