Shopify Ajax购物车中如何获取变体库存数量？

我之前也碰到过类似的坑，咱们一步步排查解决：

先排查最基础的库存设置问题 #

这是最容易被忽略的关键点：如果你的商品变体没有开启库存跟踪，inventory_quantity字段会一直返回0。你可以按以下步骤检查：

• 登录Shopify后台，找到对应商品的变体页面
• 确认「Track quantity」选项已勾选，并且「Quantity」栏填写了大于0的数值
• 保存设置后刷新前端页面，再看看item.variant.inventory_quantity是否显示正确

如果库存设置没问题，那大概率是Ajax购物车的数据源问题：

为什么Ajax更新后库存显示异常？ #

Shopify默认的/cart.js接口返回的购物车数据里，line item的variant对象不包含inventory_quantity属性。如果你的Ajax购物车是依赖这个接口来更新页面内容的，初始页面加载时用Liquid渲染的是正确值，但Ajax更新后就会变成0——因为接口没返回这个字段，代码可能默认填充了0。

解决方案 #

方案1：预存初始库存到前端（适合简单场景） #

在header.liquid里，页面加载时用Liquid把所有已加入购物车的变体库存预存到一个JavaScript对象中，这样Ajax更新时可以直接复用：

// 在header.liquid的script标签中添加
window.cartVariantInventory = {
  {% for item in cart.items %}
    "{{ item.variant.id }}": {{ item.variant.inventory_quantity }},
  {% endfor %}
};

之后当Ajax更新购物车时，你可以从这个对象里根据变体ID获取库存数量，再渲染到页面上。

方案2：Ajax更新时请求变体详情（适合实时库存场景） #

如果需要实时获取最新库存，你可以在Ajax拿到购物车数据后，为每个line item请求对应的变体详情接口。不过要注意：直接在前端调用Shopify的Admin API会有跨域问题，所以需要通过主题的代理端点或者Shopify的Frontend API来实现。

举个简单的代理思路（需要在主题配置里添加代理设置），前端请求示例：

// 假设代理路径是 /apps/proxy/variant/{variant_id}
async function getVariantInventory(variantId) {
  const response = await fetch(`/apps/proxy/variant/${variantId}`);
  const data = await response.json();
  return data.variant.inventory_quantity;
}

这样就能拿到实时的库存数量，再更新到购物车UI里。

额外提示 #

如果你的主题有自定义的Ajax购物车逻辑，记得检查渲染购物车的代码——有些主题会在更新时忽略inventory_quantity字段，直接硬编码为0，这种情况只要修改渲染逻辑，替换成预存的或请求到的库存值即可。

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