[Vuejs]-Access Variants for each Cart Item Shopify

by

0👍

✅

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.

0👍

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.

Leave a comment