访问每个购物车商品的变体 Shopify

Question

首先，我总是喜欢发布可运行的示例，但由于这是 js 和服务器端在 shopify 上呈现液体的混合，所以我无法获得运行示例。

在 shopify 中，您可以从产品模板访问 product 对象，就像 {{ product }} 一样。

购物车对象有一个items 属性，它是购物车中所有项目的数组。购物车中的每个 item 对象都不同于 product 对象。 product 对象有一个变体列表，购物车 item 对象没有。

这样做的目的是能够编辑购物车中商品的大小。

我的问题是，您如何才能获得所有链接的变体？您将不得不向上移动到产品并获得那里所有变体的列表，从它的变体 product_id。

这很棘手的原因是，当您获得购物车对象的获取响应时，您会为购物车中的每个 item 获得一个 product_id。除非您在产品页面上，否则您无法获得产品对象。

只是为了帮助可视化购物车是这样的：

{
  items: [
    {
      handle: 'product-handle',
      product_id: 123,
      variant_title: 'product variant'
    }
  ]
}

需要完成的是：

{
  items: [
    {
      handle: 'product-handle',
      product_id: 123,
      /**
       * to get this you need first access to the product object from the product 
       * template. You could convert the product to json with a filter
       * e.g. const product = {{ product | json }} but you don't have the 
       * opportunity to be on the product template each time you edit a cart item
      */
      variants: [
        { color: 'white', size: 's' },
        { color: 'white', size: 'm' }
      ]
    }
  ]
}

Answer 1

如果您有产品 ID 或句柄，您可以随意致电 Shopify 以获取有关产品的更多信息，例如分配给它的所有变体，以及所有选项。因此，要更改为不同的选项，您需要从购物车中删除一个变体 ID，然后添加一个不同的 ID，即您想要的那个。您可以使用 StorefrontAPI 调用来获取产品信息。这通常是商家做您需要做的事情的方式。

Answer 2

经过一整天的斗争，我终于明白了。对于遇到此问题的任何其他人，您需要做这样的事情。

来自购物车模板，cart.liquid

const cart = (() => {
  const cart = {{ cart | json }}
  const items = []
  let variants

  {% for item in cart.items %}
    item = {{ item | json }}
    variants = []

    {% for variant in item.product.variants %}
      variant = {{ variant | json }}
      variants.push(variant)
    {% endfor %}

    item.variants = variants
    items.push(item)
  {% endfor %}
  cart.items = items

  return cart
})();

现在对于购物车中的每个项目属性，您都有它的变体。

Answer 3

该代码应粘贴到 cart.liquid 部分的什么位置？