Session Cart Provider Overview

SessionCartProvider

Unlike the CartProvider, SessionProvider never interacts with the Medusa backend. It can be used to implement the user experience related to managing a cart’s items. Its state variables are JavaScript objects living in the browser, but are in no way communicated with the backend.

You can use the SessionProvider as a lightweight client-side cart functionality. It’s not stored in any database or on the Medusa backend.

To use SessionProvider, you first have to insert it somewhere in your component tree below the MedusaProvider. Then, in any of the child components, you can use the useSessionCart hook to get access to client-side cart item functionalities.

Example

src/App.ts

import { SessionProvider, MedusaProvider } from "medusa-react"
import Storefront from "./Storefront"
import { QueryClient } from "@tanstack/react-query"
import React from "react"

const queryClient = new QueryClient()

const App = () => {
  return (
    <MedusaProvider
      queryClientProviderProps={{ client: queryClient }}
      baseUrl="http://localhost:9000"
    >
      <SessionProvider>
        <Storefront />
      </SessionProvider>
    </MedusaProvider>
  )
}

export default App

Parameters

param0SessionCartProviderPropsRequired

Props of the provider.

Returns

ElementElementRequired

Unlike the CartProvider, SessionProvider never interacts with the Medusa backend. It can be used to implement the user experience related to managing a cart’s items. Its state variables are JavaScript objects living in the browser, but are in no way communicated with the backend. You can use the SessionProvider as a lightweight client-side cart functionality. It’s not stored in any database or on the Medusa backend. To use SessionProvider, you first have to insert it somewhere in your component tree below the MedusaProvider. Then, in any of the child components, you can use the useSessionCart hook to get access to client-side cart item functionalities.

---

useSessionCart

This hook exposes the context of SessionCartProvider.

Example

The following example assumes that you've added SessionCartProvider previously in the React components tree:

src/Products.ts

const Products = () => {
  const { addItem } = useSessionCart()
  // ...

  function addToCart(variant: ProductVariant) {
    addItem({
      variant: variant,
      quantity: 1,
    })
  }
}

Returns

regionRegionInfoRequired

The region of the cart.

itemsItem[]Required

The items in the cart.

totalItemsnumberRequired

The total items in the cart.

totalnumberRequired

The total amount of the cart.

setRegion(region: RegionInfo) => voidRequired

A state function used to set the region.

addItem(item: Item) => voidRequired

This function adds an item to the session cart.

removeItem(id: string) => voidRequired

This function removes an item from the session cart.

updateItem(id: string, item: Partial<Item>) => voidRequired

This function updates an item in the session cart.

setItems(items: Item[]) => voidRequired

A state function used to set the items in the cart.

updateItemQuantity(id: string, quantity: number) => voidRequired

This function updates an item's quantity in the cart.

incrementItemQuantity(id: string) => voidRequired

This function increments the item's quantity in the cart.

decrementItemQuantity(id: string) => voidRequired

This function decrements the item's quantity in the cart.

getItem(id: string) => undefined | ItemRequired

This function retrieves an item's details by its ID.

clearItems() => voidRequired

Removes all items in the cart.