Shopify变体变更后如何基于现有代码无刷新更新库存显示？

你的现有Liquid代码仅能在页面加载时渲染当前选中（或首个可用）变体的库存，而变体切换属于前端交互，静态渲染的内容无法自动更新。以下是基于原代码的改造方案：

1. 调整Liquid模板代码 #

给库存显示容器添加唯一ID，同时完善缺货状态的显示逻辑（已将英文文本翻译为中文）：

{% assign current_variant = product.selected_or_first_available_variant %}
<div class="instock-pulse" id="stock-display">
  {% if current_variant.available %}
    {% if current_variant.inventory_quantity > 0 %}
      <span class="icon--pulsing"></span>{{ current_variant.inventory_quantity }} 件库存
    {% else %}
      <span>缺货</span>
    {% endif %}
  {% else %}
    <span>缺货</span>
  {% endif %}
</div>

2. 添加JavaScript监听逻辑 #

Shopify多数主题在变体切换时会自动更新全局变量window.currentVariant，我们通过监听变体选择的变化事件，利用该变量的动态数据更新库存显示：

document.addEventListener('DOMContentLoaded', function() {
  // 定位产品表单（根据你的主题结构调整选择器，比如.product-form或.variant-form）
  const productForm = document.querySelector('form[action="/cart/add"]');
  if (!productForm) return;

  // 监听变体选择变化
  productForm.addEventListener('change', function() {
    const selectedVariant = window.currentVariant;
    const stockElement = document.getElementById('stock-display');
    if (!selectedVariant || !stockElement) return;

    // 动态更新库存内容
    if (selectedVariant.available && selectedVariant.inventory_quantity > 0) {
      stockElement.innerHTML = `<span class="icon--pulsing"></span>${selectedVariant.inventory_quantity} 件库存`;
    } else {
      stockElement.innerHTML = '<span>缺货</span>';
    }
  });
});

关键注意事项 #

• 若你的主题未自动维护window.currentVariant，可改用Shopify官方的VariantSelectors组件获取选中变体，或通过AJAX请求/products/{{ product.handle }}.js接口拉取所有变体数据，再匹配当前选中的变体ID。
• 确保JS代码放在产品页面底部，或用DOMContentLoaded事件包裹，避免DOM元素未加载就执行代码。

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