Shopify Liquid: elsif致Sold Out按钮堆叠单产品下排查

云原生阿岚

2026-8-30

问题根因

你的代码有三处核心错误导致按钮堆叠、逻辑异常：

按钮渲染区块位置错误：你把判断显示Buy Now/Sold Out的循环写在了<div class="card-wrapper">产品卡片容器的闭合标签外部，这部分内容脱离了产品网格的单个卡片布局边界，渲染时会脱离文档流堆叠到同一位置，不会跟随对应产品卡片排列。
重复遍历变体无终止：你先后写了两次遍历所有产品变体的循环，都没有在匹配到9g的目标活动变体后终止循环，存在重复渲染元素的隐患；同时加购逻辑写错了id，当前Buy Now提交的是产品下第一个有库存的变体，不是你要做活动的9g规格，就算9g售罄，只要其他尺寸有库存，按钮判断也会出错。
库存判断逻辑不可靠：直接读取inventory_quantity判断库存的方式，在店铺开启超卖、关闭变体库存追踪时会完全失效，应该用Liquid原生的variant.available属性判断可售状态。
细节语法错误：价格渲染的price_class参数值没加引号，price--large会被识别成Liquid变量而非字符串，会触发渲染报错。

修复步骤

不要重复写两次变体遍历逻辑，在文件头部（样式引入之后）一次性匹配到参与活动的9g变体，存为变量后复用，匹配到就立刻终止循环：

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{% comment %} 匹配参与GWP活动的9g规格变体 {% endcomment %}
{% assign gwp_target_variant = null %}
{% for variant in product_card_product.variants %}
  {% assign current_weight = variant.weight | weight_with_unit: variant.weight_unit %}
  {% if current_weight == '9 g' %}
    {% assign gwp_target_variant = variant %}
    {% break %}
  {% endif %}
{% endfor %}

<div class="card-wrapper">
<!-- 后续原有卡片内容保留 -->

替换掉卡片信息区原来遍历变体渲染价格的代码，直接用提前匹配好的变体变量判断：

<!-- 找到原来card-information__wrapper里的for循环块，全部替换为下面的代码 -->
{%- if gwp_target_variant and gwp_target_variant.available -%}       
  {% render 'price', product: product_card_product, use_variant: gwp_target_variant.id, price_class: 'price--large' %} 
  <div class="caption-with-letter-spacing light">FREE SHIPPING</div>
  <div class="caption-with-letter-spacing light"></div>
{%- endif -%}

删除原来写在card-wrapper闭合标签外部的整个按钮渲染循环，把按钮逻辑移到卡片容器内部（产品卡片DOM的末尾、card-wrapper闭合标签之前），直接用提前匹配的变体判断显示状态：

</div> <!-- 原有card__badge、card__inner、card div的闭合标签保持不动 -->
  </div>

  {% comment %} 按钮区块放在card-wrapper内部，卡片主体下方 {% endcomment %}
  {% if gwp_target_variant %}
    {% if gwp_target_variant.available %}
      <form method="post" action="/cart/add">
        <input type="hidden" name="id" value="{{ gwp_target_variant.id }}" />
        <input type="hidden" name="quantity" value="1"/>
        <input type="submit" value="Buy Now" class="button" />
      </form>
    {% else %}
      <div class="learn-more-button">
        <span>              
          <a href="{{ product_card_product.url }}" class="button">SOLD OUT</a>
        </span>
      </div>
    {% endif %}
  {% endif %}
</div> <!-- 这里是card-wrapper的闭合标签，后面不要放任何单个产品的渲染内容 -->

修复后每个产品的按钮会跟随所属卡片排列，不会出现堆叠问题，加购的也会是正确的活动规格，9g变体售罄时就会正常显示Sold Out按钮，不受同产品其他尺寸库存的影响。

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