Shopify产品详情页切换variants时动态更新库存显示的Liquid实现问题

你当前遇到的问题核心是Liquid属于服务端渲染语言，仅在页面首次加载时执行一次，切换变体属于前端交互操作，服务端已经渲染好的静态内容不会自动更新，需要搭配前端JavaScript实现动态同步。

步骤1：调整Liquid代码注入全量变体数据 #

先把所有变体的库存数据提前注入到页面的JS变量中，避免切换变体时额外发起接口请求，你原本写的循环所有变体输出库存的代码可以直接删除：

<!-- 注入所有变体的完整数据，包含ID、库存等信息 -->
<script>
const allVariantData = {{ product.variants | json }};
</script>

<!-- 库存展示容器，初始值渲染当前默认选中的变体库存 -->
<div class="stock-display">
  实时库存：<span id="current-stock">{{ product.selected_or_first_available_variant.inventory_quantity }}</span>
</div>

步骤2：添加JavaScript监听变体切换事件 #

绝大多数Shopify官方主题及主流第三方主题，都会在用户切换变体选项时触发全局的variant:change事件，直接监听该事件即可完成库存更新：

document.addEventListener('variant:change', function(event) {
  // 从事件回调中拿到当前选中的变体对象
  const currentVariant = event.detail.variant;
  if (currentVariant) {
    // 更新页面上的库存数值
    document.getElementById('current-stock').textContent = currentVariant.inventory_quantity;
  }
});

老主题兼容方案 #

如果你使用的主题没有内置variant:change事件，可以手动监听变体选项的变更事件，匹配选中的变体ID后更新库存：

// 监听所有变体选框的变更事件，.variant-option替换为你主题内变体选框的实际类名
const variantSelectors = document.querySelectorAll('.variant-option');
variantSelectors.forEach(selector => {
  selector.addEventListener('change', function() {
    // 按照自己主题的选框结构，实现获取当前选中变体ID的逻辑
    const selectedVariantId = getSelectedVariantId();
    const matchedVariant = allVariantData.find(item => item.id === selectedVariantId);
    if (matchedVariant) {
      document.getElementById('current-stock').textContent = matchedVariant.inventory_quantity;
    }
  })
})

可选优化点 #

• 如果店铺开启了超卖许可，可以添加判断逻辑，库存为0时展示接受预订等自定义文案
• 如果需要展示指定仓库的库存，可调整Liquid中获取库存的字段，替换为对应仓库的库存属性即可

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