Skip to content

Cart

@storefront-x/cart

Module for e-commerce cart. Requires corresponding integration module (e.g. @storefront-x/cart-magento) which provides mappers, repositories and integration specific services.

useCart composable

Composable for providing presentation logic for cart (prices, taxes, number of items in cart, etc.).

TIP

Override/extend this composable to add presentation functionality to cart.

TIP

Mutating functionality (adding to cart, removing from cart, etc.) should be in separate composables/services.

useCartItem composable

Composable for providing presentation logic for cart items (price, quantity, etc.).

TIP

Override/extend this composable to add presentation functionality to cart items.

TIP

Mutating functionality (updating quantity, etc.) should be in separate composables/services.

injectCartItem composable

Used by components wrapped in CartItemProvider to inject result of useCartItem composable.

CartItemProvider provider

Provides result of useCartItem composable to be injected into nested components.

Example

vue
<!-- organisms/OrderSummary.vue -->

<template>
  <CartItemProvider v-for="cartItem in cartItems" :cart-item="cartItem">
    <OrderSummaryItem />
  </CartItemProvider>
</template>

<script setup lang="ts">
import CartItemProvider from '#ioc/providers/CartItemProvider'
import OrderSummaryItem from '#ioc/molecules/OrderSummaryItem'
import ToCartItem from '#ioc/mappers/ToCartItem'
import { PropType } from 'vue'

defineProps({
  cartItems: {
    type: Array as PropType<ReturnType<typeof ToCartItem>[]>,
    required: true,
  },
})
</script>
<!-- organisms/OrderSummary.vue -->

<template>
  <CartItemProvider v-for="cartItem in cartItems" :cart-item="cartItem">
    <OrderSummaryItem />
  </CartItemProvider>
</template>

<script setup lang="ts">
import CartItemProvider from '#ioc/providers/CartItemProvider'
import OrderSummaryItem from '#ioc/molecules/OrderSummaryItem'
import ToCartItem from '#ioc/mappers/ToCartItem'
import { PropType } from 'vue'

defineProps({
  cartItems: {
    type: Array as PropType<ReturnType<typeof ToCartItem>[]>,
    required: true,
  },
})
</script>
vue
<!-- molecules/OrderSummaryItem.vue -->

<template>
  <h1>{{ cartItem.name }}</h1>
</template>

<script setup lang="ts">
import injectCartItem from '#ioc/composables/injectCartItem'

const cartItem = injectCartItem()
</script>
<!-- molecules/OrderSummaryItem.vue -->

<template>
  <h1>{{ cartItem.name }}</h1>
</template>

<script setup lang="ts">
import injectCartItem from '#ioc/composables/injectCartItem'

const cartItem = injectCartItem()
</script>

useGetCart service

Returns full state of cart (items, prices, coupons, etc.).

useAddToCart service

Adds product to cart.

useRemoveFromCart service

Removes item from cart.

useUpdateCartItem service

Updates cart item (e.g. changes quantity).

useCartStore store

Used for storing global state. Should be initialized in serverInit action in corresponding integration module.