Work with the cart ​

In this chapter you will learn how to

• Create a cart
• Add products and promotions to a cart
• Remove items from the cart
• Display the cart

Create a cart ​

You don't need to create a cart explicitly. Upon calling refreshCart, a new cart will be created if it doesn't exist yet. A new cart contains no items.

const { refreshCart } = useCart();

await refreshCart();

The refreshCart method is called automatically after any action within the cart (add product, remove item, etc.), but can be used explicitly if there was some request made outside the composables, for the same session context.

In a real application, we encourage you to use the refreshCart method in client-side calls only (for example using the onMounted nuxt hook) - unless required otherwise. It's useful to keep an eye on your browser's network tab to see if there are too many requests to the cart endpoint.

Add items to the cart ​

The useCart composable also offers methods to add items to the cart, such as

• Products
• Promotions

Add product to the cart ​

You can use the useAddToCart composable to add a product to the cart:

<script setup lang="ts">
const product: Product = {
  id: "7b5b97bd48454979b14f21c8ef38ce08",
};
const { addProduct, quantity, getAvailableStock } = useAddToCart({
  product,
});
</script>
<template>
  Only {{ getAvailableStock }} in stock<br />
  <input v-model="quantity" type="number" />
  <button @click="addToCart()">Add to cart</button>
</template>

Add promotion to the cart ​

The process of adding a promotions code is just as straightforward as adding a product to the cart. You can use the appliedPromotionCodes field to receive a list of all applied promotion codes.

<script setup lang="ts">
const promotionCode = ref<string>();
const { addPromotionCode, appliedPromotionCodes } = useCart();
</script>
<template>
  <input type="text" v-model="promotionCode" />
  <button @click="addPromotionCode(promotionCode)">Apply promotion code</button>
</template>

Promitions will appear as a line item in the cart with a negative price.

Display the cart items ​

Once the products are added to the cart, the can be accessed through the cartItems reference. In a similar fashion, you can access other information like totalPrice, subtotal or cartErrors which can occur in the case of invalid cart configurations.

<script setup lang="ts">
const { cartItems, totalPrice, count } = useCart();
</script>
<template>
  Items in the cart: {{ count }}<br />
  Total price: {{ totalPrice }}<br />

  <ul>
    <li v-for="cartItem in cartItems" :id="cartItem.id">
      {{ cartItem.label }} - {{ cartItem.price.totalPrice }}
    </li>
  </ul>
</template>

Find a table of commonly used properties of cart items below:

Change the quantity of a cart item ​

The changeProductQuantity method can be used to change the quantity of a cart item.

const { changeProductQuantity } = useCart();

const cartItem: LineItem = {
  id: "7b5b97bd48454979b14f21c8ef38ce08",
  quantity: 2,
};

changeProductQuantity(cartItem);

Remove a cart item ​

You can remove items from the cart using the useCart or the useCartItem composables:

const { removeItem } = useCart();

await removeItem({ id: "7b5b97bd48454979b14f21c8ef38ce08" });

In case of the useCartItem composable, you pass the item identifier when calling the composable, but not when calling the removeItem method.

const { cartItem } = toRefs(props);
const { removeItem } = useCartItem(cartItem);

await removeItem();