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/regions/context/page.mdx
+8 -4
View File
@@ -14,6 +14,8 @@ export const metadata = {
In this guide, you'll learn how to create a region context in your React storefront.
## Why Create a Region Context?
Throughout your storefront, you'll need to access the customer's selected region to perform different actions, such as retrieve product's prices in the selected region.
<Note title="Tip">
@@ -24,6 +26,8 @@ To learn how to allow customers to select their region, refer to the [Store Sele
So, if your storefront is React-based, create a region context and add it at the top of your components tree. Then, you can access the selected region anywhere in your storefront.
---
## Create Region Context Provider
For example, create the following file that exports a `RegionProvider` component and a `useRegion` hook:
@@ -55,7 +59,7 @@ import {
useState,
} from "react"
import { HttpTypes } from "@medusajs/types"
import { sdk } from "../lib/sdk"
import { sdk } from "@/lib/sdk"
type RegionContextType = {
region?: HttpTypes.StoreRegion
@@ -136,8 +140,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"] })
@@ -173,7 +177,7 @@ For example:
```tsx
"use client" // include with Next.js 13+
// ...
import { useRegion } from "../providers/region"
import { useRegion } from "@/providers/region"
export default function Products() {
const { region } = useRegion()
www/apps/resources/app/storefront-development/regions/list/page.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ export const highlights = [
import { useEffect, useState } from "react"
import { HttpTypes } from "@medusajs/types"
import { sdk } from "../../lib/sdk"
import { sdk } from "@/lib/sdk"
export default function Regions() {
const [loading, setLoading] = useState(true)
www/apps/resources/app/storefront-development/regions/store-retrieve-region/page.mdx
+8 -2
View File
@@ -12,9 +12,11 @@ export const metadata = {
In this guide, you'll learn how to store a customer's selected region in your storefront, then retrieve it for later use.
## Why Store and Retrieve Region?
## Why Select and Store Region?
In your store, prices, taxes, and available payment methods can vary between regions. So, you should allow customers to select their region to see the correct prices, taxes, and payment methods.
In your store, prices, taxes, and available payment methods can vary between regions.
So, you should allow customers to select their region to see the correct prices, taxes, and payment methods.
---
@@ -61,4 +63,8 @@ sdk.store.region.retrieve(regionId)
The response has a `regions` field, which is an array of [regions](!api!/store#regions_region_schema).
---
## Store Region Details in React Context
If you're using React, it's then recommended to create a context that stores the region details and make it available to all components in your application, as explained in the [Region React Context in Storefront](../context/page.mdx) guide.