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
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
Element
ElementRequiredSessionProvider
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:
Returns
The region of the cart.
The items in the cart.
totalItems
numberRequiredtotal
numberRequiredremoveItem
(id: string) => voidRequiredupdateItemQuantity
(id: string, quantity: number) => voidRequiredincrementItemQuantity
(id: string) => voidRequireddecrementItemQuantity
(id: string) => voidRequiredclearItems
() => voidRequired