asyavee/medusa-store
1
0 Fork 0
Code Issues Pull Requests Actions 4 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 authored and GitHub committed 2025-03-27 17:14:22 +02:00
1 parent 1895d8cc11
commit bf882b5aff
43 files changed
+13257 -13309
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/apps/resources/app/storefront-development/checkout/email/page.mdx
+34 -43
View File
@@ -12,7 +12,9 @@ export const metadata = {
# {metadata.title}
The first step of the checkout flow is to enter the customer's email. Then, use the [Update Cart API route](!api!/store#carts_postcartsid) to update the cart with the email.
In this guide, you'll learn how to add an email step to the checkout flow. This typically would be the first step of the checkout flow, but you can also change the steps of the checkout flow as you see fit.
When the user enters their email, use the [Update Cart API route](!api!/store#carts_postcartsid) to update the cart with the email.
<Note title="Tip">
@@ -22,45 +24,28 @@ If the customer is logged-in, you can pre-fill the email with the customer's ema
For example:
<Note title="Tip">
- This example uses the `useCart` hook defined in the [Cart React Context guide](../../cart/context/page.mdx).
- 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">
```ts
const cartId = localStorage.getItem("cart_id")
fetch(`http://localhost:9000/store/carts/${cartId}`, {
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
body: JSON.stringify({
email,
}),
})
.then((res) => res.json())
.then(({ cart }) => {
// use cart...
console.log(cart)
})
```
</CodeTab>
<CodeTab label="React" value="react">
export const highlights = [
["4", "useCart", "The `useCart` hook was defined in the Cart React Context documentation."],
["13", "TODO", "Cart must have at least one item. If not, redirect to another page."],
["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"], ["34"],
["35"], ["36"], ["37"], ["38"], ["39"], ["40"], ["41"]
["14", "TODO", "Cart must have at least one item. If not, redirect to another page."],
["28"], ["29"], ["30"], ["31"], ["32"], ["33"], ["34"],
]
```tsx highlights={highlights}
"use client" // include with Next.js 13+
import { useState } from "react"
import { useCart } from "../../../providers/cart"
import { useEffect, useState } from "react"
import { useCart } from "@/providers/cart"
import { sdk } from "@/lib/sdk"
export default function CheckoutEmailStep() {
const { cart, setCart } = useCart()
@@ -83,18 +68,9 @@ export const highlights = [
e.preventDefault()
setLoading(true)
fetch(`http://localhost:9000/store/carts/${cart.id}`, {
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
body: JSON.stringify({
email,
}),
sdk.store.cart.update(cart.id, {
email,
})
.then((res) => res.json())
.then(({ cart: updatedCart }) => {
setCart(updatedCart)
})
@@ -122,9 +98,24 @@ export const highlights = [
}
```
</CodeTab>
<CodeTab label="JS SDK" value="js-sdk">
```ts
const cartId = localStorage.getItem("cart_id")
sdk.store.cart.update(cart.id, {
email,
})
.then(({ cart }) => {
// use cart...
console.log(cart)
})
```
</CodeTab>
</CodeTabs>
After the customer enters and submits their email, you send a request to the Update Cart API route passing it the email in the request body.
After the customer enters and submits their email, you send a request to the [Update Cart API route](!api!/store#carts_postcartsid) passing it the email in the request body.
Notice that if the cart doesn't have items, you should redirect to another page as the checkout requires at least one item in the cart.
Notice that if the cart doesn't have items, you should redirect to another page as the checkout requires at least one item in the cart. Redirecting to another page is not covered in this guide as this depends on the framework you're using.