Access variations of each cart item Shopify

Question

First of all, I always like to post working examples, but since this is a mix of js and server-side rendering liquid on Shopify, I can't get a running example.

In Shopify, you can access the product object from a product template, like this {{ Product }} .

The shopping cart object has a items attribute, which is an array of all items in the shopping cart. Each item object in the shopping cart is different from a product object. The product object has a list of variations, while the cart item object does not.

The purpose of this is to be able to edit the size of the items in the shopping cart.

My question is, how can I get all linked variations? You have to go to the product and get a list of all variations in it, get the product_id from the variations.

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

Just to help visualize the shopping cart like this:

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

What needs to be completed 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' }
      ]
    }
  ]
}

Answer 1

If you have a product ID or handle, you can always call Shopify to get more information about the product, such as all variations assigned to the product, and all options. So, to change to a different option, you need to remove the variant ID from your cart and add the different ID you want. You can use StorefrontAPI calls to get product information. This is usually how merchants do what you need to do.

Answer 2

After a whole day of struggle, I finally figured it out. For anyone else who has encountered this problem, you need to do something similar.

From the shopping 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 you have a variation for each item attribute in your cart.