如何在Shopify的cart.js中获取商品Metafields？

嘿，这个问题我之前帮好几个开发者解决过——确实，Shopify默认的/cart.js接口返回的购物车数据里，是不带商品metafields的。不过有几种实用的方法能搞定这个需求，我给你拆解一下：

这是最直接高效的方案，因为我们可以在主题的Liquid模板里，把商品的metafields提前嵌入到购物车的JS对象中，不用额外发请求。具体步骤：

1. 找到你主题里负责渲染购物车的模板文件，通常是sections/cart-template.liquid或者templates/cart.liquid（不同主题路径可能略有差异）
2. 在模板里，遍历购物车商品时，把需要的metafields数据添加到自定义的JS对象里。比如：

<script>
  // 构建包含metafields的自定义购物车数据
  const cartWithMetafields = {
    items: [
      {% for item in cart.items %}
      {
        id: {{ item.id }},
        productId: {{ item.product_id }},
        title: "{{ item.title | escape }}",
        // 按需添加metafields，这里示例取所有商品metafields，也可以指定特定namespace/key
        metafields: {
          {% for metafield in item.product.metafields %}
          "{{ metafield.namespace }}_{{ metafield.key }}": "{{ metafield.value | escape }}",
          {% endfor %}
          // 如果是变体的metafields，换成item.variant.metafields即可
          // "custom_size": "{{ item.variant.metafields.custom.size | escape }}"
        }
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  };
</script>

之后你在自己的前端JS代码里，直接用cartWithMetafields.items就能拿到带metafields的商品数据，完全不用依赖默认的/cart.js响应。

如果不想修改Liquid模板，你可以先调用默认的/cart.js拿到购物车基础数据，再针对每个商品单独请求它的metafields：

// 先获取购物车基础数据
fetch('/cart.js')
  .then(response => response.json())
  .then(cart => {
    // 遍历每个商品，请求对应的metafields
    cart.items.forEach(item => {
      // 这里替换成你需要的metafields namespace，比如"custom"
      fetch(`/products/${item.product_id}/metafields.json?namespace=custom`)
        .then(res => res.json())
        .then(metafieldsData => {
          // 把metafields挂载到item对象上
          item.metafields = metafieldsData.metafields;
          // 现在就可以使用带metafields的item了
          console.log('商品带metafields数据:', item);
        })
        .catch(err => console.error('获取metafields失败:', err));
    });
  });

⚠️ 注意：这种方法会给每个商品发一次请求，如果购物车商品较多，可能会影响页面性能，所以更适合商品数量少的场景，或者结合防抖/批量请求优化。

• 如果你的metafields是绑定在商品变体上的，记得把Liquid里的item.product.metafields换成item.variant.metafields，或者AJAX请求里用变体ID去拉取（路径是/variants/${item.variant_id}/metafields.json）
• 不要在前端使用Shopify Admin API来获取metafields——需要暴露API密钥，存在安全风险，前端只适合用Storefront API或者上述的AJAX接口
• 确保你要获取的metafields已经正确设置了namespace和key，并且在商品/变体上保存生效

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