Shopify购物车商品关联变体获取方案技术问询

在Shopify场景下，购物车对象的items数组仅包含商品product_id等基础信息，没有关联的变体列表，但我们需要实现购物车商品的尺寸编辑功能，核心需求就是通过product_id获取对应商品的完整变体数据。由于非商品页无法直接通过{{ product }}访问商品对象，以下是几种可行的实现方法：

方法1：服务端预渲染变体数据（Liquid） #

在购物车模板中，利用Liquid全局对象all_products，通过购物车item的product_id直接获取对应商品的变体数据，预渲染为JS全局变量供前端调用。

{% comment %} 购物车模板中添加该代码，预存购物车商品的变体映射 {% endcomment %}
<script>
  const cartProductVariants = {
    {% for item in cart.items %}
      "{{ item.product_id }}": {{ all_products[item.product_id].variants | json }},
    {% endfor %}
  };
</script>

前端JS处理购物车数据时，直接通过product_id匹配变体：

// 假设已通过fetch获取到购物车原始数据cartData
cartData.items.forEach(item => {
  item.variants = cartProductVariants[item.product_id] || [];
});

优缺点：

• 优势：无需额外异步请求，响应速度快，实现成本低
• 劣势：all_products对象最多支持获取20个商品，超出限制后无法获取；商品数量过多会增大页面HTML体积

方法2：使用Storefront API异步获取变体 #

通过Shopify Storefront API，以异步请求的方式根据product_id查询商品变体数据，适合商品数量较多的场景。

首先需要在Shopify后台生成Storefront访问令牌，然后编写请求函数：

async function fetchProductVariants(productId) {
  const query = `
    query GetProductVariants($productId: ID!) {
      product(id: $productId) {
        variants(first: 100) {
          edges {
            node {
              id
              title
              selectedOptions {
                name
                value
              }
              price {
                amount
                currencyCode
              }
            }
          }
        }
      }
    }
  `;

  try {
    const response = await fetch(`https://${Shopify.shop}/api/2024-07/graphql.json`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': '你的Storefront令牌'
      },
      body: JSON.stringify({
        query,
        variables: {
          productId: `gid://shopify/Product/${productId}`
        }
      })
    });

    const data = await response.json();
    return data.data.product.variants.edges.map(edge => edge.node);
  } catch (error) {
    console.error('获取变体失败:', error);
    return [];
  }
}

遍历购物车item调用该函数，补全变体数据：

//  enrichCartWithVariants 函数：给购物车数据添加变体字段
async function enrichCartWithVariants(cartData) {
  for (const item of cartData.items) {
    item.variants = await fetchProductVariants(item.product_id);
  }
  return cartData;
}

// 调用示例
enrichCartWithVariants(cartData).then(updatedCart => {
  // 基于带变体的购物车数据，渲染尺寸选择器
});

优缺点：

• 优势：不受all_products数量限制，页面体积小，扩展性强
• 劣势：需要处理异步请求、错误捕获和缓存逻辑；需配置Storefront令牌，存在权限管理成本

方法3：加购时缓存变体数据（局限性较大） #

在商品页加购时，通过Liquid将商品变体数据存入购物车item的自定义属性中，适合变体极少更新的商品。

{% comment %} 商品页加购表单中添加隐藏字段 {% endcomment %}
<form action="/cart/add" method="post">
  <input type="hidden" name="properties[variants]" value="{{ product.variants | json | escape }}">
  <!-- 其他加购字段（如变体选择器） -->
  <button type="submit">加入购物车</button>
</form>

前端解析购物车数据时，从自定义属性中提取变体：

cartData.items.forEach(item => {
  if (item.properties?.variants) {
    try {
      item.variants = JSON.parse(item.properties.variants);
    } catch (e) {
      item.variants = [];
    }
  }
});

优缺点：

• 优势：实现简单，无需额外请求
• 劣势：变体数据随加购操作固定，商品变体更新后购物车数据不会同步；自定义属性存在字符长度限制

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