asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: update storefront development guides to use JS SDK [2] (#12015)

Browse Source
This commit is contained in:
Shahed Nasser
2025-03-27 17:14:22 +02:00
committed by GitHub
parent 1895d8cc11
commit bf882b5aff
43 changed files with 13257 additions and 13309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/resources/app/storefront-development/cart/context/page.mdx
+46 -35
View File
@@ -12,25 +12,37 @@ export const metadata = {
# {metadata.title}
Throughout your storefront, you'll need to access the customer's cart to perform different actions.
In this guide, you'll learn how to create a cart context in your storefront.
## Why Create a Cart Context?
Throughout your storefront, you'll need to access the customer's cart to perform different actions. For example, you may need to add a product variant to the cart from the product page.
So, if your storefront is React-based, create a cart context and add it at the top of your components tree. Then, you can access the customer's cart anywhere in your storefront.
---
## Create Cart Context Provider
For example, create the following file that exports a `CartProvider` component and a `useCart` hook:
<Note title="Tip">
- This example uses the `useRegion` hook defined in the [Region React Context guide](../../regions/context/page.mdx) to associate the cart with the customer's selected region.
- Learn how to install and configure the JS SDK in the [JS SDK documentation](../../../js-sdk/page.mdx).
</Note>
export const highlights = [
["13", "cart", "Expose cart to children of the context provider."],
["14", "setCart", "Allow the context provider's children to update the cart."],
["17", "refreshCart", "Allow the context provider's children to unset and reset the cart."],
["26", "CartProvider", "The provider component to use in your component tree."],
["30", "useRegion", "Use the `useRegion` hook defined in the Region Context guide."],
["40", "fetch", "If the customer doesn't have a cart, create a new one."],
["44", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to associate the correct sales channel(s)."],
["58", "fetch", "Retrieve the customer's cart."],
["71", "refreshCart", "This function unsets the cart, which triggers the `useEffect` callback to create a cart."],
["87", "useCart", "The hook that child components of the provider use to access the cart."]
["14", "cart", "Expose cart to children of the context provider."],
["15", "setCart", "Allow the context provider's children to update the cart."],
["18", "refreshCart", "Allow the context provider's children to unset and reset the cart."],
["27", "CartProvider", "The provider component to use in your component tree."],
["31", "useRegion", "Use the `useRegion` hook defined in the Region Context guide."],
["41", "create", "If the customer doesn't have a cart, create a new one."],
["50", "retrieve", "Retrieve the customer's cart."],
["57", "refreshCart", "This function unsets the cart, which triggers the `useEffect` callback to create a cart."],
["73", "useCart", "The hook that child components of the provider use to access the cart."]
]
```tsx highlights={highlights}
@@ -44,6 +56,7 @@ import {
} from "react"
import { HttpTypes } from "@medusajs/types"
import { useRegion } from "./region"
import { sdk } from "@/lib/sdk"
type CartContextType = {
cart?: HttpTypes.StoreCart
@@ -73,31 +86,16 @@ export const CartProvider = ({ children }: CartProviderProps) => {
const cartId = localStorage.getItem("cart_id")
if (!cartId) {
// create a cart
fetch(`http://localhost:9000/store/carts`, {
method: "POST",
credentials: "include",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
"Content-Type": "application/json",
},
body: JSON.stringify({
region_id: region.id,
}),
sdk.store.cart.create({
region_id: region.id,
})
.then((res) => res.json())
.then(({ cart: dataCart }) => {
localStorage.setItem("cart_id", dataCart.id)
setCart(dataCart)
})
} else {
// retrieve cart
fetch(`http://localhost:9000/store/carts/${cartId}`, {
credentials: "include",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
})
.then((res) => res.json())
sdk.store.cart.retrieve(cartId)
.then(({ cart: dataCart }) => {
setCart(dataCart)
})
@@ -131,10 +129,21 @@ export const useCart = () => {
}
```
The `CartProvider` handles retrieving or creating the customer's cart. It uses the `useRegion` hook defined in the [Region Context guide](../../regions/context/page.mdx).
The `CartProvider` handles retrieving or creating the customer's cart. It uses the `useRegion` hook defined in the [Region Context guide](../../regions/context/page.mdx) to associate the cart with the customer's selected region.
The `useCart` hook returns the value of the `CartContext`. Child components of `CartProvider` use this hook to access `cart`, `setCart`, or `refreshCart`.
`refreshCart` unsets the cart, which triggers the `useEffect` callback to create a cart. This is useful when the customer logs in or out, or after the customer places an order.
<Note title="Tip">
You can add to the context and provider other functions useful for updating the cart and its items. Refer to the following guides for details on how to implement these functions:
- [Manage Cart Items](../manage-items/page.mdx).
- [Update Cart's Region and Customer](../update/page.mdx).
</Note>
---
## Use CartProvider in Component Tree
@@ -147,8 +156,8 @@ For example, if you're using Next.js, add it to the `app/layout.tsx` or `src/app
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { CartProvider } from "../providers/cart"
import { RegionProvider } from "../providers/region"
import { CartProvider } from "@/providers/cart"
import { RegionProvider } from "@/providers/region"
const inter = Inter({ subsets: ["latin"] })
@@ -177,9 +186,9 @@ export default function RootLayout({
}
```
---
Make sure to put the `CartProvider` as a child of the `RegionProvider` since it uses the `useRegion` hook defined in the [Region Context guide](../../regions/context/page.mdx).
## Use useCart Hook
### Use useCart Hook
Now, you can use the `useCart` hook in child components of `CartProvider`.
@@ -188,10 +197,12 @@ For example:
```tsx
"use client" // include with Next.js 13+
// ...
import { useCart } from "../providers/cart"
import { useCart } from "@/providers/cart"
export default function Products() {
const { cart } = useCart()
// ...
}
```
The `useCart` hook returns the cart details, which you can use in your components.
www/apps/resources/app/storefront-development/cart/create/page.mdx
+62 -53
View File
@@ -12,64 +12,44 @@ export const metadata = {
# {metadata.title}
In this document, you'll learn how to create and store a cart.
In this guide, you'll learn how to create and store a cart in your storefront.
## Create Cart on First Access
It's recommended to create a cart the first time a customer accesses a page, then store the cart's ID in the `localStorage`.
It's recommended to create a cart the first time a customer accesses a page in your storefront. Then, you can store the cart's ID in the `localStorage` and access it whenever necessary.
To create a cart, send a request to the [Create Cart API route](!api!/store#carts_postcarts).
For example:
<Note title="Tip">
Learn how to install and configure the JS SDK in the [JS SDK documentation](../../../js-sdk/page.mdx).
</Note>
<CodeTabs group="store-request">
<CodeTab label="Fetch API" value="fetch">
export const fetchHighlights = [
["5", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to associate the correct sales channel(s)."],
["9", "region_id", "Associate the cart with the chosen region for accurate pricing."],
["14", "setItem", "Set the cart's ID in the `localStorage`."]
]
```ts highlights={fetchHighlights}
fetch(`http://localhost:9000/store/carts`, {
method: "POST",
credentials: "include",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
"Content-Type": "application/json",
},
body: JSON.stringify({
region_id: region.id,
}),
})
.then((res) => res.json())
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
})
```
</CodeTab>
<CodeTab label="React" value="react">
export const highlights = [
["8", "region", "Assuming you previously retrieved the chosen region."],
["15", "cartId", "Retrieve the cart ID from `localStorage`, if exists."],
["22", "fetch", "Send a request to create the cart."],
["26", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to associate the correct sales channel(s)."],
["30", "region_id", "Associate the cart with the chosen region for accurate pricing."],
["35", "setItem", "Set the cart's ID in the `localStorage`."]
["9", "region", "Assuming you previously retrieved the chosen region."],
["17", "cartId", "Retrieve the cart ID from `localStorage`, if exists."],
["24", "create", "Send a request to create the cart."],
["25", "region_id", "Associate the cart with the chosen region for accurate pricing."],
["28", "setItem", "Set the cart's ID in the `localStorage`."]
]
```tsx highlights={highlights}
"use client" // include with Next.js 13+
import { useEffect, useState } from "react"
import { useEffect } from "react"
import { sdk } from "@/lib/sdk"
// other imports...
export default function Home() {
// TODO assuming you have the region retrieved
const region = {
id: "reg_123",
// ...
}
@@ -83,18 +63,9 @@ export const highlights = [
}
// create a cart and store it in the localStorage
fetch(`http://localhost:9000/store/carts`, {
method: "POST",
credentials: "include",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
"Content-Type": "application/json",
},
body: JSON.stringify({
region_id: region.id,
}),
sdk.store.cart.create({
region_id: region.id,
})
.then((res) => res.json())
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
})
@@ -104,18 +75,50 @@ export const highlights = [
}
```
</CodeTab>
<CodeTab label="JS SDK" value="js-sdk">
export const fetchHighlights = [
["2", "region_id", "Associate the cart with the chosen region for accurate pricing."],
["5", "setItem", "Set the cart's ID in the `localStorage`."]
]
```ts highlights={fetchHighlights}
sdk.store.cart.create({
region_id: region.id,
})
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
})
```
</CodeTab>
</CodeTabs>
The response of the Create Cart API route has a `cart` field, which is a cart object.
In this example, you create a cart by sending a request to the [Create Cart API route](!api!/store#carts_postcarts).
The response of the Create Cart API route has a `cart` field, which is a [cart object](!api!/store#carts_cart_schema).
Refer to the [Create Cart API reference](!api!/store#carts_postcarts) for details on other available request parameters.
### Publishable API Key
### Cart's Sales Channel Scope
When you create a cart, you pass the publishable API key in the header of the request. This associates the cart with the sales channel(s) of the publishable API key.
As mentioned before, you must always pass the publishable API key in the header of the request (which is done automatically by the JS SDK, as explained in the [Publishable API Keys](../../publishable-api-keys/page.mdx) guide). So, Medusa will associate the cart with the sales channel(s) of the publishable API key.
This is necessary, as only products matching the cart's sales channel(s) can be added to the cart.
This is necessary, as only products matching the cart's sales channel(s) can be added to the cart. If you want to associate the cart with a different sales channel, or if the publishable API key is associated with multiple sales channels and you want to specify which one to use, you can pass the `sales_channel_id` parameter to the [Create Cart API route](!api!/store#carts_postcarts) with the desired sales channel's ID.
For example:
```ts
sdk.store.cart.create({
region_id: region.id,
sales_channel_id: "sc_123",
})
.then(({ cart }) => {
// TODO use the cart...
console.log(cart)
})
```
---
@@ -123,4 +126,10 @@ This is necessary, as only products matching the cart's sales channel(s) can be
When the cart is created for a logged-in customer, it's automatically associated with that customer.
However, if the cart is created for a guest customer, then the customer logs in, then you have to set the cart's customer as explained in [this guide](../update/page.mdx#set-carts-customer).
However, if the cart is created for a guest customer, then the customer logs in, then you have to set the cart's customer as explained in the [Update Cart](../update/page.mdx#set-carts-customer) guide.
---
## Store Cart Details in React Context
If you're using React, it's then recommended to create a context that stores the cart details and make it available to all components in your application, as explained in the [Cart React Context in Storefront](../context/page.mdx) guide.
www/apps/resources/app/storefront-development/cart/manage-items/page.mdx
+23 -49
View File
@@ -12,7 +12,7 @@ export const metadata = {
# {metadata.title}
In this document, you'll learn how to manage a cart's line items, including adding, updating, and removing them.
In this guide, you'll learn how to manage a cart's line items, including adding, updating, and removing them.
## Add Product Variant to Cart
@@ -20,17 +20,22 @@ To add a product variant to a cart, use the [Add Line Item API route](!api!/stor
<Note title="Tip">
To retrieve a variant's available quantity and check if it's in stock, refer to [this guide](../../products/inventory/page.mdx).
To retrieve a variant's available quantity and check if it's in stock, refer to the [Retrieve Product Variant's Inventory](../../products/inventory/page.mdx) guide.
</Note>
For example:
<Note title="Tip">
Learn how to install and configure the JS SDK in the [JS SDK documentation](../../../js-sdk/page.mdx).
</Note>
export const addHighlights = [
["1", "variant_id", "The ID of the selected variant."],
["2", "cartId", "Retrieve the cart ID from the `localStorage`."],
["13", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "You must pass the publishable API key of all storefront requests."],
["17", "quantity", "You can also allow customers to specify the quantity."]
["10", "quantity", "You can also allow customers to specify the quantity."]
]
```ts highlights={addHighlights}
@@ -41,19 +46,10 @@ const addToCart = (variant_id: string) => {
return
}
fetch(`http://localhost:9000/store/carts/${cartId}/line-items`, {
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
body: JSON.stringify({
variant_id,
quantity: 1,
}),
sdk.store.cart.createLineItem(cartId, {
variant_id,
quantity: 1,
})
.then((res) => res.json())
.then(({ cart }) => {
// use cart
console.log(cart)
@@ -62,12 +58,12 @@ const addToCart = (variant_id: string) => {
}
```
The Add Line Item API route requires two request body parameters:
The [Add Line Item API route](!api!/store#carts_postcartsidlineitems) requires two request body parameters:
- `variant_id`: The ID of the product variant to add to the cart. This is the variant selected by the customer.
- `quantity`: The quantity to add to cart.
The API route returns the updated cart object.
The API route returns the updated [cart object](!api!/store#carts_cart_schema).
---
@@ -81,8 +77,7 @@ export const updateHighlights = [
["2", "itemId", "The ID of the item to update."],
["3", "quantity", "The new quantity of the item."],
["5", "cartId", "Retrieve the cart ID from the `localStorage`."],
["12", "itemId", "Pass the item's ID as a path parameter."],
["18", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "You must pass the publishable API key of all storefront requests."],
["11", "itemId", "Pass the item's ID as a parameter."],
]
```ts highlights={updateHighlights}
@@ -96,20 +91,9 @@ const updateQuantity = (
return
}
fetch(`http://localhost:9000/store/carts/${cartId}/line-items/${
itemId
}`, {
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
body: JSON.stringify({
quantity,
}),
sdk.store.cart.updateLineItem(cartId, itemId, {
quantity,
})
.then((res) => res.json())
.then(({ cart }) => {
// use cart
console.log(cart)
@@ -117,12 +101,12 @@ const updateQuantity = (
}
```
The Update Line Item API route requires:
The [Update Line Item API route](!api!/store#carts_postcartsidlineitemsline_id) requires:
- The line item's ID to be passed as a path parameter.
- The `quantity` request body parameter, which is the new quantity of the item.
The API route returns the updated cart object.
The API route returns the updated [cart object](!api!/store#carts_cart_schema).
---
@@ -135,9 +119,8 @@ For example:
export const deleteHighlights = [
["1", "itemId", "The ID of the line item to remove."],
["2", "cartId", "Retrieve the cart ID from the `localStorage`."],
["9", "itemId", "Pass the item's ID as a path parameter."],
["13", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "You must pass the publishable API key of all storefront requests."],
["18", "parent", "The updated cart is returned as the `parent` field."]
["8", "itemId", "Pass the item's ID as a parameter."],
["9", "parent", "The updated cart is returned as the `parent` field."]
]
```ts highlights={deleteHighlights}
@@ -148,16 +131,7 @@ const removeItem = (itemId: string) => {
return
}
fetch(`http://localhost:9000/store/carts/${cartId}/line-items/${
itemId
}`, {
credentials: "include",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
method: "DELETE",
})
.then((res) => res.json())
sdk.store.cart.deleteLineItem(cartId, itemId)
.then(({ parent: cart }) => {
// use cart
console.log(cart)
@@ -165,4 +139,4 @@ const removeItem = (itemId: string) => {
}
```
The Delete Line Item API route returns the updated cart object as the `parent` field.
The [Delete Line Item API route](!api!/store#carts_deletecartsidlineitemsline_id) returns the updated [cart object](!api!/store#carts_cart_schema) as the `parent` field.
www/apps/resources/app/storefront-development/cart/retrieve/page.mdx
+28 -39
View File
@@ -12,42 +12,21 @@ export const metadata = {
# {metadata.title}
You can retrieve a cart by sending a request to the [Get a Cart API route](!api!/store#carts_getcartsid).
In this guide, you'll learn how to retrieve a cart's details in your storefront.
Assuming you stored the cart's ID in the `localStorage` as explained in the [Create Cart guide](../create/page.mdx), pass that ID as a path parameter to the request.
Assuming you stored the cart's ID in the `localStorage` as explained in the [Create Cart guide](../create/page.mdx), you can retrieve a cart by sending a request to the [Get a Cart API route](!api!/store#carts_getcartsid).
For example:
<CodeTabs group="store-request">
<CodeTab label="Fetch API" value="fetch">
export const fetchHighlights = [
["1", "cartId", "Pass the customer's cart ID as a path parameter."],
]
```ts highlights={fetchHighlights}
fetch(`http://localhost:9000/store/carts/${cartId}`, {
credentials: "include",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
})
.then((res) => res.json())
.then(({ cart }) => {
// use cart...
console.log(cart)
})
```
</CodeTab>
<CodeTab label="React" value="react">
export const highlights = [
["16", "cartId", "Retrieve the cart ID from `localStorage`."],
["18", "TODO", "You can create the cart and set it here as explained in the Create Cart guide."],
["22"], ["23"], ["24"], ["25"], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"],
["34", "formatPrice", "This function was previously created to format product prices. You can re-use the same function."],
["37", "currency_code", "If you reuse the `formatPrice` function, pass the currency code as a parameter."],
["17", "cartId", "Retrieve the cart ID from `localStorage`."],
["19", "TODO", "You can create the cart and set it here as explained in the Create Cart guide."],
["23"], ["24"], ["25"], ["26"],
["29", "formatPrice", "This function was previously created to format product prices. You can re-use the same function."],
["32", "currency", "If you reuse the `formatPrice` function, pass the currency code as a parameter."],
]
```tsx highlights={highlights}
@@ -55,6 +34,7 @@ export const highlights = [
import { useEffect, useState } from "react"
import { HttpTypes } from "@medusajs/types"
import { sdk } from "@/lib/sdk"
export default function Cart() {
const [cart, setCart] = useState<
@@ -72,13 +52,7 @@ export const highlights = [
return
}
fetch(`http://localhost:9000/store/carts/${cartId}`, {
credentials: "include",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
})
.then((res) => res.json())
sdk.store.cart.retrieve(cartId)
.then(({ cart: dataCart }) => {
setCart(dataCart)
})
@@ -115,14 +89,29 @@ export const highlights = [
}
```
</CodeTab>
<CodeTab label="JS SDK" value="js-sdk">
export const fetchHighlights = [
["1", "cartId", "Pass the customer's cart ID as a parameter."],
]
```ts highlights={fetchHighlights}
sdk.store.cart.retrieve(cartId)
.then(({ cart }) => {
// use cart...
console.log(cart)
})
```
</CodeTab>
</CodeTabs>
The response of the [Get Cart API](!api!/store#carts_getcartsid) route has a `cart` field, which is a cart object.
In this example, you retrieve a cart by sending a request to the [Get a Cart API route](!api!/store#carts_getcartsid).
---
The response of the [Get a Cart API route](!api!/store#carts_getcartsid) has a `cart` field, which is a [cart object](!api!/store#carts_cart_schema).
## Format Prices
### Format Prices
When displaying the cart's totals or line item's price, make sure to format the price as implemented in the `formatPrice` function shown in the above snippet:
@@ -136,4 +125,4 @@ const formatPrice = (amount: number): string => {
}
```
Since this is the same function used to format the prices of products, you can define the function in one place and re-use it where necessary. In that case, make sure to pass the currency code as a parameter.
Since this is the same function used to [format the prices of product variants](../../products/price/page.mdx), you can define the function in one place and re-use it where necessary. In that case, make sure to pass the currency code as a parameter to the `formatPrice` function.
www/apps/resources/app/storefront-development/cart/totals/page.mdx
+7 -1
View File
@@ -77,6 +77,12 @@ The fields that are most commonly used are:
Here's an example of how you can show the cart totals in a React component:
<Note title="Tip">
This example uses the `useCart` hook from the [Cart Context](../context/page.mdx) to retrieve the cart.
</Note>
export const highlights = [
["3", "useCart", "The `useCart` hook was defined in the Cart React Context documentation."],
["8", "formatPrice", "A function to format a price using the `Intl.NumberFormat` API."],
@@ -90,7 +96,7 @@ export const highlights = [
```tsx highlights={highlights}
"use client" // include with Next.js 13+
import { useCart } from "../../../providers/cart"
import { useCart } from "@/providers/cart"
export default function CartTotals() {
const { cart } = useCart()
www/apps/resources/app/storefront-development/cart/update/page.mdx
+18 -31
View File
@@ -12,11 +12,11 @@ export const metadata = {
# {metadata.title}
In this document, you'll learn how to update different details of a cart.
In this guide, you'll learn how to update different details of a cart.
<Note>
<Note title="Tip">
All cart updates are performed using the [Update Cart API route](!api!/store#carts_postcartsid).
This guide doesn't cover updating the cart's line items. For that, refer to the [Manage Cart's Items in Storefront](../manage-items/page.mdx) guide.
</Note>
@@ -26,32 +26,27 @@ If a customer changes their region, you must update their cart to be associated
For example:
<Note title="Tip">
Learn how to install and configure the JS SDK in the [JS SDK documentation](../../../js-sdk/page.mdx).
</Note>
export const updateRegionHighlights = [
["11", `"new_id"`, "Pass the new chosen region's ID."]
["2", `"new_id"`, "Pass the new chosen region's ID."]
]
```ts highlights={updateRegionHighlights}
fetch(`http://localhost:9000/store/carts/${cartId}`, {
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
headers: {
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
},
body: JSON.stringify({
region_id: "new_id",
}),
sdk.store.cart.update(cartId, {
region_id: "new_id",
})
.then((res) => res.json())
.then(({ cart }) => {
// use cart...
console.log(cart)
})
```
The Update Cart API route accepts a `region_id` request body parameter, whose value is the new region to associate with the cart.
The [Update Cart API route](!api!/store#carts_postcartsid) accepts a `region_id` request body parameter, whose value is the new region to associate with the cart.
---
@@ -71,27 +66,19 @@ This API route is only available after [Medusa v2.0.5](https://github.com/medusa
</Note>
```ts
fetch(`http://localhost:9000/store/carts/${cartId}/customer`, {
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
})
.then((res) => res.json())
sdk.store.cart.transferCart(cartId)
.then(({ cart }) => {
// use cart...
console.log(cart)
})
```
To send an authenticated request, either use `credentials: include` if the customer is already authenticated with a cookie session, or pass the Authorization Bearer token in the request's header.
Assuming the JS SDK is configured to send an authenticated request, the cart is now associated with the logged-in customer.
Learn more about authenticating customers with the JS SDK in the [Login Customer guide](../../customers/login/page.mdx).
<Note title="Tip">
Learn more about authenticating customers in [this guide](../../customers/login/page.mdx).
When using the Fetch API to send the request, either use `credentials: include` if the customer is already authenticated with a cookie session, or pass the Authorization Bearer token in the request's header.
</Note>
The cart is now associated with the logged-in customer.