Skip to main content
Skip to main content

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

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.
Was this section helpful?