Cart page

Cart mixin from the SDK will be injected automatically by default. So you don't have to do anything to active it.

You will be able to access these following data and methods from any components:

Property / Method name	type	Description
applyDiscount(discountCode)	method	Apply discount to cart
removeDiscount	method	Remove discount from cart
createCartItem(variantId, quantity)	method	Create cart item
deleteCartItem(cartItemResourceObject)	method	Remove a cart item
isLoadingCart	property	true if cart is loading
cartDocument	property	A JSON:API document object
cart	property	A JSON:API resource object
cartItems	property	An array of cart items

Example of usage

Below is a full example of a Cart.vue component:

<template>
  <div class="cart">

    <!-- Cart is loading -->
    <div v-if="isLoadingCart">
      ...Loading...
    </div>

    <!-- No cart items - Empty cart -->
    <div v-if="!cartItems.length">
      Your cart is empty. Click <router-link :to="$linkTo('home')">here</router-link> to go back.
    </div>

    <!-- Cart is loaded -->
    <div v-else>

      <!-- Cart items -->
      <div v-for="cartItem in cartItems">

        <!-- Item image -->
        <img :src="$image.url(cartItem.getRelationshipData('product').getRelationshipData('image'))" />

        <!-- Item title -->
        <router-link :to="$linkTo('product', cartItem.getRelationshipData('product'))">
          {{ cartItem.getRelationshipData('product').getAttribute('title') }}
        </router-link>

        <!-- Variant title -->
        <p v-if="cartItem.getRelationshipData('variant').getAttribute('title')">
          <small>{{ cartItem.getRelationshipData('variant').getAttribute('title') }}</small>
        </p>

        <!-- Quantity -->
        <select :value="cartItem.getAttribute('quantity')" @change="createCartItem(cartItem.getRelationshipData('variant').getId(), $event.target.value)">
          <option v-for="i in 10" :value="i">{{ i }}</option>
        </select>

        <!-- Remove item -->
        <button @click="deleteCartItem(cartItem)">Remove this item from cart</button>

      </div>

      <!-- Summary -->
      <div class="cart__summary">

        <!-- Subtotal -->
        <p>Subtotal: {{ $currency.priceFormat(cart.getAttribute('subtotal_price')) }}</p>
        <p>Discount: {{ $currency.priceFormat(cart.getAttribute('total_discount')) }}</p>
        <p>Total: {{ $currency.priceFormat(cart.getAttribute('total_price')) }}</p>

      </div>

      <!-- Discount -->
      <div class="cart__discount">

        <p>Enter discount code:</p>
        <input placeholder="Discount code" v-on:keyup.enter="applyDiscount($event.target.value)" />

      </div>

      <!-- Proceed to checkout -->
      <a :href="'/checkout/' + cart.getId()">Proceed to checkout</a>

    </div>

  </div>
</template>

<!-- No javascript required in this example -->