Access Variants for each Cart Item Shopify-CodePudding

First off, I always like to post runnable examples, but since this is a mix of js and server side rendered liquid on shopify I can't get a running example.

In shopify, you can access the product object like so {{ product }} from the product template.

The cart object has an items property which is an array of all the items in the cart. Each item object in the cart differs from the product object. The product object has a list of variants, the cart item object does not.

The purpose of this is to be able to edit the size of an item in the cart.

My question is, how would you be able to get all the linked variants? You would have to move up to the product and get a list of all the variants there, from the variant by it's product_id.

The reason this is tricky is because when you get the fetch response of the cart object, you get a product_id for each item in the cart. You can't get the product object though unless you are on the product page.

Just to help visualize the cart is something like this:

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

what needs to be accomplished is:

{
  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' }
      ]
    }
  ]
}

CodePudding user response：

If you have a product ID or handle, you are free to make a call to Shopify to get more information about the product, such as all the variants assigned to it, and therefore, all the options. So to change to a different option, you would need to remove a variant ID from the cart, and add a different one, the one you want. You can use StorefrontAPI calls to get product information. That is typically how a merchant would do what you need done.

CodePudding user response：

After fighting with this all day I finally got it. For anyone else that ever runs across this you need to do something like this.

From the cart template, 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
})();

Now for each item property in the cart you have the variants for it.