From bcab38180ef1595dbee1e395c8e5f6869b8faaa1 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 6 Jan 2025 19:01:37 +0200 Subject: [PATCH] docs: update storefront development snippets for next.js 15 compatibility --- .../cart/context/page.mdx | 13 ++--- .../cart/create/page.mdx | 2 +- .../cart/retrieve/page.mdx | 2 +- .../cart/update/page.mdx | 2 +- .../checkout/address/page.mdx | 2 +- .../customers/addresses/page.mdx | 21 +++---- .../customers/retrieve/page.mdx | 2 +- .../customers/third-party-login/page.mdx | 2 +- .../categories/nested-categories/page.mdx | 15 ++--- .../products/categories/products/page.mdx | 21 +++---- .../products/categories/retrieve/page.mdx | 28 ++++----- .../products/collections/products/page.mdx | 21 +++---- .../products/collections/retrieve/page.mdx | 30 ++++------ .../products/inventory/page.mdx | 17 +++--- .../price/examples/sale-price/page.mdx | 29 +++++----- .../price/examples/show-price/page.mdx | 57 +++++++++---------- .../price/examples/tax-price/page.mdx | 47 +++++++-------- .../products/retrieve/page.mdx | 30 ++++------ .../products/variants/page.mdx | 17 +++--- .../regions/list/page.mdx | 4 +- www/apps/resources/generated/edit-dates.mjs | 40 ++++++------- www/apps/resources/generated/sidebar.mjs | 16 ------ www/apps/resources/next.config.mjs | 3 +- www/apps/resources/sidebars/storefront.mjs | 10 ---- 24 files changed, 179 insertions(+), 252 deletions(-) diff --git a/www/apps/resources/app/storefront-development/cart/context/page.mdx b/www/apps/resources/app/storefront-development/cart/context/page.mdx index c8e7d78a98de0..dee07390f1484 100644 --- a/www/apps/resources/app/storefront-development/cart/context/page.mdx +++ b/www/apps/resources/app/storefront-development/cart/context/page.mdx @@ -25,13 +25,12 @@ export const highlights = [ ["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."], - ["32", "useRegion", "Use the `useRegion` hook defined in the Region Context guide."], - ["37", "setItem", "Set the cart's ID in `localStorage` in case it changed."], - ["45", "fetch", "If the customer doesn't have a cart, create a new one."], - ["49", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to associate the correct sales channel(s)."], - ["63", "fetch", "Retrieve the customer's cart."], - ["76", "refreshCart", "This function unsets the cart, which triggers the `useEffect` callback to create a cart."], - ["92", "useCart", "The hook that child components of the provider use to access the cart."] + ["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."] ] ```tsx highlights={highlights} diff --git a/www/apps/resources/app/storefront-development/cart/create/page.mdx b/www/apps/resources/app/storefront-development/cart/create/page.mdx index 0899cd2623231..17b464eb3bb00 100644 --- a/www/apps/resources/app/storefront-development/cart/create/page.mdx +++ b/www/apps/resources/app/storefront-development/cart/create/page.mdx @@ -55,7 +55,7 @@ export const fetchHighlights = [ export const highlights = [ ["8", "region", "Assuming you previously retrieved the chosen region."], ["15", "cartId", "Retrieve the cart ID from `localStorage`, if exists."], - ["21", "", "Send a request to create the cart."], + ["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`."] diff --git a/www/apps/resources/app/storefront-development/cart/retrieve/page.mdx b/www/apps/resources/app/storefront-development/cart/retrieve/page.mdx index e2a8c6cc5a6cd..fa34ede314adc 100644 --- a/www/apps/resources/app/storefront-development/cart/retrieve/page.mdx +++ b/www/apps/resources/app/storefront-development/cart/retrieve/page.mdx @@ -45,7 +45,7 @@ export const fetchHighlights = [ 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"], + ["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."], ] diff --git a/www/apps/resources/app/storefront-development/cart/update/page.mdx b/www/apps/resources/app/storefront-development/cart/update/page.mdx index 71585753667ba..bcf4a76f41764 100644 --- a/www/apps/resources/app/storefront-development/cart/update/page.mdx +++ b/www/apps/resources/app/storefront-development/cart/update/page.mdx @@ -76,7 +76,7 @@ fetch(`http://localhost:9000/store/carts/${cartId}/customer`, { method: "POST", headers: { "Content-Type": "application/json", - + "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp", }, }) .then((res) => res.json()) diff --git a/www/apps/resources/app/storefront-development/checkout/address/page.mdx b/www/apps/resources/app/storefront-development/checkout/address/page.mdx index a438d43c5bdcc..11d16a9574e17 100644 --- a/www/apps/resources/app/storefront-development/checkout/address/page.mdx +++ b/www/apps/resources/app/storefront-development/checkout/address/page.mdx @@ -64,7 +64,7 @@ export const highlights = [ ["4", "useCart", "The `useCart` hook was defined in the Cart React Context documentation."], ["29", "address", "Assemble the address object to be used for both shipping and billing addresses."], ["41"], ["42"], ["43"], ["44"], ["45"], ["46"], ["47"], ["48"], - ["49"], ["50"], ["51"], ["52"], ["53"], ["54"], ["55"], ["56"] + ["49"], ["50"], ["51"], ["52"], ["53"], ["54"], ["55"], ["56"], ["103", "", "The address's country can only be within the cart's region."] ] diff --git a/www/apps/resources/app/storefront-development/customers/addresses/page.mdx b/www/apps/resources/app/storefront-development/customers/addresses/page.mdx index 12095b5fb8c19..08f5871a6c7ba 100644 --- a/www/apps/resources/app/storefront-development/customers/addresses/page.mdx +++ b/www/apps/resources/app/storefront-development/customers/addresses/page.mdx @@ -53,8 +53,8 @@ export const fetchHighlights = [ export const highlights = [ ["20", "offset", "Calculate the number of addresses to skip based on the current page and limit."], ["27", "fetch", "Send a request to retrieve the addresses."], - ["31", "searchParams.toString()", "Pass the pagination parameters in the query."], - ["34", "count", "The total number of addresses in the Medusa application."], + ["28", "searchParams.toString()", "Pass the pagination parameters in the query."], + ["36", "count", "The total number of addresses in the Medusa application."], ["48", "setHasMorePages", "Set whether there are more pages based on the total count."], ["62", "", "Using only two address fields for simplicity."], ["68", "button", "Show a button to load more addresses if there are more pages."] @@ -379,11 +379,10 @@ To edit an address, send a request to the [Update Customer Address API route](!a export const editHighlights = [ ["4", "useRegion", "Use the hook defined in the Region Context guide."], ["5", "useCustomer", "Use the hook defined in the Customer Context guide."], - ["14", "{ params: { id }}", "This is based on Next.js which passes the path parameters as a prop."], - ["19", "address", "Retrieve the address from the customer's `addresses` property."], - ["60"], ["61"], ["62"], ["63"], ["64"], ["65"], ["66"], ["67"], ["68"], ["69"], - ["70"], ["71"], ["72"], ["73"], ["74"], ["75"], ["76"], ["77"], ["78"], ["79"], - ["80"], ["81"], ["82"] + ["17", "address", "Retrieve the address from the customer's `addresses` property."], + ["58"], ["59"], ["60"], ["61"], ["62"], ["63"], ["64"], ["65"], ["66"], ["67"], + ["68"], ["69"], ["70"], ["71"], ["72"], ["73"], ["74"], ["75"], ["76"], ["77"], + ["78"], ["79"], ["80"] ] ```tsx highlights={editHighlights} collapsibleLines="90-161" expandButtonLabel="Show form" @@ -393,14 +392,12 @@ export const editHighlights = [ import { useRegion } from "../../../../../providers/region" import { useCustomer } from "../../../../../providers/customer" - type Params = { - params: { - id: string - } + type Props = { + id: string } export default function EditAddress( - { params: { id } }: Params + { id }: Props ) { const { customer, setCustomer } = useCustomer() const { region } = useRegion() diff --git a/www/apps/resources/app/storefront-development/customers/retrieve/page.mdx b/www/apps/resources/app/storefront-development/customers/retrieve/page.mdx index 2f5eae3b2c6ff..8fe46bc091258 100644 --- a/www/apps/resources/app/storefront-development/customers/retrieve/page.mdx +++ b/www/apps/resources/app/storefront-development/customers/retrieve/page.mdx @@ -8,7 +8,7 @@ tags: import { CodeTabs, CodeTab } from "docs-ui" export const metadata = { - title: `Retrieve Customer in Storefront`, + title: `Retrieve Logged-In Customer in Storefront`, } # {metadata.title} diff --git a/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx b/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx index ff23e69470fcc..2e6cf51e93563 100644 --- a/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx +++ b/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx @@ -392,7 +392,7 @@ export const validateReactHighlights = [ ["2", "sendCallback", "Validate the callback in Medusa and retrieve the authentication token"], ["4", "shouldCreateCustomer", "Check if the decoded token has an `actor_id` property to decide whether a customer to be created."], ["7", "createCustomer", "Create a customer if the decoded token doesn't have `actor_id`."], - ["9", "refetchToken", "Fetch a new token for the created customer."], + ["9", "refreshToken", "Fetch a new token for the created customer."], ["13", "fetch", "Send an authenticated request using the token."] ] diff --git a/www/apps/resources/app/storefront-development/products/categories/nested-categories/page.mdx b/www/apps/resources/app/storefront-development/products/categories/nested-categories/page.mdx index daf8c93518943..27a8153a5a555 100644 --- a/www/apps/resources/app/storefront-development/products/categories/nested-categories/page.mdx +++ b/www/apps/resources/app/storefront-development/products/categories/nested-categories/page.mdx @@ -58,12 +58,11 @@ export const fetchHighlights = [ export const highlights = [ - ["12", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["24", `"category_children.id,category_children.name"`, "Select the fields of category children"], - ["25", "parent_category_id", "Since each category will have its children, you only retrieve categories that don't have a parent."] + ["22", `fields`, "Select the fields of category children"], + ["23", "parent_category_id", "Since each category will have its children, you only retrieve categories that don't have a parent."], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"], ["34"], ["35"], ["36"], ["37"], ["38"], - ["54", "", "Show the nested categories."], + ["52", "", "Show the nested categories."], ] ```tsx highlights={highlights} @@ -72,13 +71,11 @@ export const highlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - id: string - } + type Props = { + id: string } - export default function Category({ params: { id } }: Params) { + export default function Category({ id }: Props) { const [loading, setLoading] = useState(true) const [category, setCategory] = useState< HttpTypes.StoreProductCategory | undefined diff --git a/www/apps/resources/app/storefront-development/products/categories/products/page.mdx b/www/apps/resources/app/storefront-development/products/categories/products/page.mdx index fcb8e46447ae6..0dbdb208775b3 100644 --- a/www/apps/resources/app/storefront-development/products/categories/products/page.mdx +++ b/www/apps/resources/app/storefront-development/products/categories/products/page.mdx @@ -46,12 +46,11 @@ export const fetchHighlights = [ export const highlights = [ - ["13", "params: { categoryId }", "This is based on Next.js which passes the path parameters as a prop."], - ["33", "", "Pass the category ID as a query parameter."], - ["36"], ["37"], ["38"], - ["39", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], - ["40"], ["41"], ["42"], ["43"], ["44"], ["45"], ["46"], ["47"], ["48"], ["49"], ["50"], ["51"], ["52"], ["53"], ["54"], - ["55"], ["56"] + ["31", "", "Pass the category ID as a query parameter."], + ["34"], ["35"], ["36"], + ["37", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], + ["38"], ["39"], ["40"], ["41"], ["42"], ["43"], ["44"], ["45"], ["46"], ["47"], ["48"], ["49"], ["50"], ["51"], ["52"], + ["53"], ["54"] ] ```tsx highlights={highlights} @@ -60,15 +59,13 @@ export const highlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - categoryId: string - } + type Props = { + categoryId: string } export default function CategoryProducts({ - params: { categoryId }, - }: Params) { + categoryId, + }: Props) { const [loading, setLoading] = useState(true) const [products, setProducts] = useState< HttpTypes.StoreProduct[] diff --git a/www/apps/resources/app/storefront-development/products/categories/retrieve/page.mdx b/www/apps/resources/app/storefront-development/products/categories/retrieve/page.mdx index 234db1acada1f..b50ee197f43e7 100644 --- a/www/apps/resources/app/storefront-development/products/categories/retrieve/page.mdx +++ b/www/apps/resources/app/storefront-development/products/categories/retrieve/page.mdx @@ -49,9 +49,8 @@ export const fetchHighlights = [ export const highlights = [ - ["12", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["23"], ["24"], ["25"], ["26"], - ["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"] + ["21"], ["22"], ["23"], ["24"], + ["25"], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"] ] ```tsx highlights={highlights} @@ -60,13 +59,11 @@ export const highlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - id: string - } + type Props = { + id: string } - export default function Category({ params: { id } }: Params) { + export default function Category({ id }: Props) { const [loading, setLoading] = useState(true) const [category, setCategory] = useState< HttpTypes.StoreProductCategory | undefined @@ -146,10 +143,9 @@ export const handleFetchHighlights = [ export const handleHighlights = [ - ["12", "{ params: { handle } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["23"], ["24"], ["25"], ["26"], - ["27"], ["28"], ["29"], ["30"], - ["31"], ["32"], ["33"], ["34"], ["35"], ["36"], ["37"] + ["21"], ["22"], ["23"], ["24"], + ["25"], ["26"], ["27"], ["28"], + ["29"], ["30"], ["31"], ["32"], ["33"], ["34"], ["35"] ] ```tsx highlights={handleHighlights} @@ -158,13 +154,11 @@ export const handleHighlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - handle: string - } + type Props = { + handle: string } - export default function Category({ params: { handle } }: Params) { + export default function Category({ handle }: Props) { const [loading, setLoading] = useState(true) const [category, setCategory] = useState< HttpTypes.StoreProductCategory | undefined diff --git a/www/apps/resources/app/storefront-development/products/collections/products/page.mdx b/www/apps/resources/app/storefront-development/products/collections/products/page.mdx index 9e636188b1b68..9355204569359 100644 --- a/www/apps/resources/app/storefront-development/products/collections/products/page.mdx +++ b/www/apps/resources/app/storefront-development/products/collections/products/page.mdx @@ -46,12 +46,11 @@ export const fetchHighlights = [ export const highlights = [ - ["13", "params: { collectionId }", "This is based on Next.js which passes the path parameters as a prop."], - ["33", "", "Pass the collection ID as a query parameter."], - ["36"], ["37"], ["38"], - ["39", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], - ["40"], ["41"], ["42"], ["43"], ["44"], ["45"], ["46"], ["47"], ["48"], ["49"], ["50"], ["51"], ["52"], ["53"], ["54"], - ["55"], ["56"], ["57"], ["58"] + ["31", "collectionId", "Pass the collection ID as a query parameter."], + ["34"], ["35"], ["36"], + ["37", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], + ["38"], ["39"], ["40"], ["41"], ["42"], ["43"], ["44"], ["45"], ["46"], ["47"], ["48"], ["49"], ["50"], ["51"], ["52"], + ["53"], ["54"], ["55"], ["56"] ] ```tsx highlights={highlights} @@ -60,15 +59,13 @@ export const highlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - collectionId: string - } + type Props = { + collectionId: string } export default function CollectionProducts({ - params: { collectionId }, - }: Params) { + collectionId, + }: Props) { const [loading, setLoading] = useState(true) const [products, setProducts] = useState< HttpTypes.StoreProduct[] diff --git a/www/apps/resources/app/storefront-development/products/collections/retrieve/page.mdx b/www/apps/resources/app/storefront-development/products/collections/retrieve/page.mdx index 0c24330576d2e..0a06a5f5312cb 100644 --- a/www/apps/resources/app/storefront-development/products/collections/retrieve/page.mdx +++ b/www/apps/resources/app/storefront-development/products/collections/retrieve/page.mdx @@ -49,10 +49,9 @@ fetch(`http://localhost:9000/store/collections/${id}`, { export const highlights = [ - ["12", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["23"], ["24"], ["25"], ["26"], - ["27"], ["28"], ["29"], ["30"], - ["31"], ["32"], ["33"] + ["21"], ["22"], ["23"], ["24"], + ["25"], ["26"], ["27"], ["28"], + ["29"], ["30"], ["31"], ] ```tsx highlights={highlights} @@ -61,13 +60,11 @@ export const highlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - id: string - } + type Props = { + id: string } - export default function Collection({ params: { id } }: Params) { + export default function Collection({ id }: Props) { const [loading, setLoading] = useState(true) const [collection, setCollection] = useState< HttpTypes.StoreCollection | undefined @@ -148,10 +145,9 @@ export const handleFetchHighlights = [ export const handleHighlights = [ - ["13", "{ params: { handle } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["25"], ["26"], ["27"], ["28"], - ["29"], ["30"], ["31"], ["32"], ["33"], ["34"], ["35"], ["36"], - ["37"], ["38"], ["39"] + ["23"], ["24"], ["25"], ["26"], + ["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"], ["34"], + ["35"], ["36"], ["37"] ] ```tsx highlights={handleHighlights} @@ -160,14 +156,12 @@ export const handleHighlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - handle: string - } + type Props = { + handle: string } export default function Collection( - { params: { handle } }: Params + { handle }: Props ) { const [loading, setLoading] = useState(true) const [collection, setCollection] = useState< diff --git a/www/apps/resources/app/storefront-development/products/inventory/page.mdx b/www/apps/resources/app/storefront-development/products/inventory/page.mdx index c51ecf46d74fc..319157096624e 100644 --- a/www/apps/resources/app/storefront-development/products/inventory/page.mdx +++ b/www/apps/resources/app/storefront-development/products/inventory/page.mdx @@ -66,11 +66,10 @@ A variant is in stock if: ## Full React Example export const reactHighlights = [ - ["12", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["25", "fields", "Pass `+variants.inventory_quantity` in the fields to retrieve."], - ["31", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve the inventory quantity based on the associated sales channels' stock locations."], - ["55", "isInStock", "Consider the selected variant in stock either if its `manage_inventory` property is disabled, or the `inventory_quantity` is greater than `0`."], - ["96", "isInStock", "Show whether the selected variant is in stock."] + ["23", "fields", "Pass `+variants.inventory_quantity` in the fields to retrieve."], + ["29", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve the inventory quantity based on the associated sales channels' stock locations."], + ["53", "isInStock", "Consider the selected variant in stock either if its `manage_inventory` property is disabled, or the `inventory_quantity` is greater than `0`."], + ["94", "isInStock", "Show whether the selected variant is in stock."] ] ```tsx title="React Storefront" highlights={reactHighlights} @@ -79,13 +78,11 @@ export const reactHighlights = [ import { useEffect, useMemo, useState } from "react" import { HttpTypes } from "@medusajs/types" -type Params = { - params: { - id: string - } +type Props = { + id: string } -export default function Product({ params: { id } }: Params) { +export default function Product({ id }: Props) { const [loading, setLoading] = useState(true) const [product, setProduct] = useState< HttpTypes.StoreProduct | undefined diff --git a/www/apps/resources/app/storefront-development/products/price/examples/sale-price/page.mdx b/www/apps/resources/app/storefront-development/products/price/examples/sale-price/page.mdx index 389634eb0b844..dc25df1ec0dc7 100644 --- a/www/apps/resources/app/storefront-development/products/price/examples/sale-price/page.mdx +++ b/www/apps/resources/app/storefront-development/products/price/examples/sale-price/page.mdx @@ -31,6 +31,12 @@ Where `selectedVariantPrice` is either the variant the customer selected or the If the price is a sale price, the original price is in the variant's `calculated_price.original_amount` field: + + +Find the implementation of the `formatPrice` function in [this guide](../show-price/page.mdx#price-formatting). + + + ```ts const salePrice = formatPrice(selectedVariantPrice.calculated_price.calculated_amount) const originalPrice = formatPrice(selectedVariantPrice.calculated_price.original_amount) @@ -42,12 +48,6 @@ const discountedAmount = formatPrice( You can use the original price either to display it or calculate and display the discounted amount. - - -Learn more about the `formatPrice` function in [this guide](../show-price/page.mdx#price-formatting) - - - --- ## Full React Example @@ -62,11 +62,10 @@ The example only passes the `region_id` query parameter for pricing. Learn how t export const saleHighlights = [ ["5", "useRegion", "The `useRegion` hook is implemented in the Region React Context guide."], - ["13", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["19", "region", "Access the region using the `useRegion` hook."], - ["88", "isSale", "Determine whether the price is a sale price based on the value of the variant's `calculated_price.calculated_price.price_list_type` field."], - ["97", "originalPrice", "Retrieve the original price from the variant's `calculated_price.original_amount` field if the price is a sale price."], - ["143", "", "If the price is a sale price, show that to the customer along with the original price."] + ["17", "region", "Access the region using the `useRegion` hook."], + ["86", "isSale", "Determine whether the price is a sale price based on the value of the variant's `calculated_price.calculated_price.price_list_type` field."], + ["95", "originalPrice", "Retrieve the original price from the variant's `calculated_price.original_amount` field if the price is a sale price."], + ["141", "", "If the price is a sale price, show that to the customer along with the original price."] ] ```tsx highlights={saleHighlights} @@ -76,13 +75,11 @@ import { useEffect, useMemo, useState } from "react" import { HttpTypes } from "@medusajs/types" import { useRegion } from "../providers/region" -type Params = { - params: { - id: string - } +type Props = { + id: string } -export default function Product({ params: { id } }: Params) { +export default function Product({ id }: Props) { const [loading, setLoading] = useState(true) const [product, setProduct] = useState< HttpTypes.StoreProduct | undefined diff --git a/www/apps/resources/app/storefront-development/products/price/examples/show-price/page.mdx b/www/apps/resources/app/storefront-development/products/price/examples/show-price/page.mdx index 71f26afa653b0..c63decc150c11 100644 --- a/www/apps/resources/app/storefront-development/products/price/examples/show-price/page.mdx +++ b/www/apps/resources/app/storefront-development/products/price/examples/show-price/page.mdx @@ -15,20 +15,6 @@ export const metadata = { In this document, you'll learn how to display a product variant's price with a full React example. -## Display Selected Variant Price - -Once the customer selects a variant, use its `calculated_price.calculated_amount` property to display its price: - -```ts -const price = formatPrice( - selectedVariantPrice.calculated_price.calculated_amount -) -``` - -You'll learn about the `formatPrice` function in the next section. - ---- - ## Price Formatting To format the price, use JavaScript's [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) utility. You pass it the amount and the currency code (which you retrieve from the selected region): @@ -45,6 +31,20 @@ const formatPrice = (amount: number): string => { --- +## Display Selected Variant Price + +Once the customer selects a variant, use its `calculated_price.calculated_amount` property to display its price: + +```ts +const price = formatPrice( + selectedVariantPrice.calculated_price.calculated_amount +) +``` + +You'll learn about the `formatPrice` function in the next section. + +--- + ## Full React Example The following React-based storefront example retrieves the product's price based on the selected variant: @@ -57,17 +57,16 @@ The example only passes the `region_id` query parameter for pricing. Learn how t export const priceHighlights = [ ["5", "useRegion", "The `useRegion` hook is implemented in the Region React Context guide."], - ["13", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["19", "region", "Access the region using the `useRegion` hook."], - ["26", "queryParams", "Build the pricing query parameters."], - ["58", "formatPrice", "A utility function to format an amount with its currency."], - ["59", `"en-US"`, "If you use a different locale change it here."], - ["66", "selectedVariantPrice", "Assign the variant to compute its price, which is either the selected or cheapest variant."], - ["68", "selectedVariant", "Use the selected variant for pricing."], - ["71", "", "If there isn't a selected variant, retrieve the variant with the cheapest price."], - ["79", "price", "Compute the price of the selected or cheapest variant."], - ["123", "", "If there's a computed price but no selected variant, show a `From` prefix to the price."], - ["124", "price", "Display the computed price."] + ["17", "region", "Access the region using the `useRegion` hook."], + ["24", "queryParams", "Build the pricing query parameters."], + ["56", "formatPrice", "A utility function to format an amount with its currency."], + ["57", `"en-US"`, "If you use a different locale change it here."], + ["64", "selectedVariantPrice", "Assign the variant to compute its price, which is either the selected or cheapest variant."], + ["66", "selectedVariant", "Use the selected variant for pricing."], + ["69", "", "If there isn't a selected variant, retrieve the variant with the cheapest price."], + ["77", "price", "Compute the price of the selected or cheapest variant."], + ["121", "", "If there's a computed price but no selected variant, show a `From` prefix to the price."], + ["122", "price", "Display the computed price."] ] ```tsx highlights={priceHighlights} @@ -77,13 +76,11 @@ import { useEffect, useMemo, useState } from "react" import { HttpTypes } from "@medusajs/types" import { useRegion } from "../providers/region" -type Params = { - params: { - id: string - } +type Props = { + id: string } -export default function Product({ params: { id } }: Params) { +export default function Product({ id }: Props) { const [loading, setLoading] = useState(true) const [product, setProduct] = useState< HttpTypes.StoreProduct | undefined diff --git a/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx b/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx index 9845cb76eb526..db8c8864efb0f 100644 --- a/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx +++ b/www/apps/resources/app/storefront-development/products/price/examples/tax-price/page.mdx @@ -60,18 +60,18 @@ You can instead allow the customer to choose their country. After passing the `region_id` and `country_code` as query parameters when retrieving the product, each variant's price object will have a `calculated_amount_with_tax` property to indicate the price taxes applied: + + +Find the implementation of the `formatPrice` function in [this guide](../show-price/page.mdx#price-formatting). + + + ```ts const price = formatPrice(selectedVariantPrice.calculated_price.calculated_amount_with_tax) ``` Where `selectedVariantPrice` is either the variant the customer selected or the cheapest variant. - - -Learn more about the `formatPrice` function in [this guide](../show-price/page.mdx#price-formatting) - - - --- ## Tax Price Properties @@ -95,20 +95,19 @@ The example passes the `region_id` query parameter for pricing. Learn how to sto export const taxHighlight = [ ["5", "useRegion", "The `useRegion` hook is implemented in the Region React Context guide."], - ["13", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["19", "region", "Access the region using the `useRegion` hook."], - ["28", "region_id", "Pass the region ID as a query parameter."], - ["29", "country_code", "Pass the ISO 2 country code as a parameter."], - ["29", "region.countries[0].iso_2", "You can instead allow the customer to select a specific country."], - ["59", "formatPrice", "A utility function to format an amount with its currency."], - ["60", `"en-US"`, "If you use a different locale change it here."], - ["67", "selectedVariantPrice", "Assign the variant to compute its price, which is either the selected or cheapest variant."], - ["69", "selectedVariant", "Use the selected variant for pricing."], - ["72", "", "If there isn't a selected variant, retrieve the variant with the cheapest price."], - ["80", "price", "Compute the price of the selected or cheapest variant."], - ["87", "calculated_amount_with_tax", "Use the variant price's `calculated_amount_with_tax` property to display the price."], - ["126", "", "If there's a computed price but no selected variant, show a `From` prefix to the price."], - ["127", "price", "Display the computed price."] + ["17", "region", "Access the region using the `useRegion` hook."], + ["26", "region_id", "Pass the region ID as a query parameter."], + ["27", "country_code", "Pass the ISO 2 country code as a parameter."], + ["27", "region.countries[0].iso_2", "You can instead allow the customer to select a specific country."], + ["57", "formatPrice", "A utility function to format an amount with its currency."], + ["58", `"en-US"`, "If you use a different locale change it here."], + ["65", "selectedVariantPrice", "Assign the variant to compute its price, which is either the selected or cheapest variant."], + ["67", "selectedVariant", "Use the selected variant for pricing."], + ["70", "", "If there isn't a selected variant, retrieve the variant with the cheapest price."], + ["78", "price", "Compute the price of the selected or cheapest variant."], + ["85", "calculated_amount_with_tax", "Use the variant price's `calculated_amount_with_tax` property to display the price."], + ["124", "", "If there's a computed price but no selected variant, show a `From` prefix to the price."], + ["125", "price", "Display the computed price."] ] ```tsx highlights={taxHighlight} @@ -118,13 +117,11 @@ import { useEffect, useMemo, useState } from "react" import { HttpTypes } from "@medusajs/types" import { useRegion } from "../providers/region" -type Params = { - params: { - id: string - } +type Props = { + id: string } -export default function Product({ params: { id } }: Params) { +export default function Product({ id }: Props) { const [loading, setLoading] = useState(true) const [product, setProduct] = useState< HttpTypes.StoreProduct | undefined diff --git a/www/apps/resources/app/storefront-development/products/retrieve/page.mdx b/www/apps/resources/app/storefront-development/products/retrieve/page.mdx index e4605b4868249..91c06946a855a 100644 --- a/www/apps/resources/app/storefront-development/products/retrieve/page.mdx +++ b/www/apps/resources/app/storefront-development/products/retrieve/page.mdx @@ -49,10 +49,9 @@ export const fetchHighlights = [ export const highlights = [ - ["12", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."] - ["23"], ["24"], ["25"], - ["26", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], - ["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"] + ["21"], ["22"], ["23"], + ["24", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], + ["25"], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"] ] ```tsx highlights={highlights} @@ -61,13 +60,11 @@ export const highlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - id: string - } + type Props = { + id: string } - export default function Product({ params: { id } }: Params) { + export default function Product({ id }: Props) { const [loading, setLoading] = useState(true) const [product, setProduct] = useState< HttpTypes.StoreProduct | undefined @@ -164,10 +161,9 @@ export const handleFetchHighlights = [ export const handleHighlights = [ - ["12", "{ params: { handle } }: Params", "This is based on Next.js which passes the path parameters as a prop."] - ["23"], ["24"], ["25"], - ["26", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], - ["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"], ["34"], ["35"] + ["21"], ["22"], ["23"], + ["24", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to retrieve products of associated sales channel(s)."], + ["25"], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"] ] ```tsx highlights={handleHighlights} @@ -176,13 +172,11 @@ export const handleHighlights = [ import { useEffect, useState } from "react" import { HttpTypes } from "@medusajs/types" - type Params = { - params: { - handle: string - } + type Props = { + handle: string } - export default function Product({ params: { handle } }: Params) { + export default function Product({ handle }: Props) { const [loading, setLoading] = useState(true) const [product, setProduct] = useState< HttpTypes.StoreProduct | undefined diff --git a/www/apps/resources/app/storefront-development/products/variants/page.mdx b/www/apps/resources/app/storefront-development/products/variants/page.mdx index 613e28d842bb5..accf664c23d64 100644 --- a/www/apps/resources/app/storefront-development/products/variants/page.mdx +++ b/www/apps/resources/app/storefront-development/products/variants/page.mdx @@ -27,11 +27,10 @@ Since a variant is a combination of the product options' values (for example, si For example, in a React-based storefront: export const highlights = [ - ["12", "{ params: { id } }: Params", "This is based on Next.js which passes the path parameters as a prop."], - ["17", "selectedOptions", "Store the options the customer selects."], - ["37", "selectedVariant", "Compute the selected variant based on the chosen option values combinations."], - ["66", "setSelectedOptions", "When an option's value is selected, add it to the selected options, which re-computes the selected variant."], - ["81", "selectedVariant", "Show the selected variant's ID, if computed."] + ["15", "selectedOptions", "Store the options the customer selects."], + ["35", "selectedVariant", "Compute the selected variant based on the chosen option values combinations."], + ["64", "setSelectedOptions", "When an option's value is selected, add it to the selected options, which re-computes the selected variant."], + ["79", "selectedVariant", "Show the selected variant's ID, if computed."] ] ```tsx highlights={highlights} @@ -40,13 +39,11 @@ export const highlights = [ import { useEffect, useMemo, useState } from "react" import { HttpTypes } from "@medusajs/types" -type Params = { - params: { - id: string - } +type Props = { + id: string } -export default function Product({ params: { id } }: Params) { +export default function Product({ id }: Props) { const [loading, setLoading] = useState(true) const [product, setProduct] = useState< HttpTypes.StoreProduct | undefined diff --git a/www/apps/resources/app/storefront-development/regions/list/page.mdx b/www/apps/resources/app/storefront-development/regions/list/page.mdx index 8698eecce0fe8..cf02b20a1b4f6 100644 --- a/www/apps/resources/app/storefront-development/regions/list/page.mdx +++ b/www/apps/resources/app/storefront-development/regions/list/page.mdx @@ -88,6 +88,4 @@ export const highlights = [ -{/* TODO add a link to regions object in API reference (once available). */} - -The response has a `regions` field, which is an array of regions. +The response has a `regions` field, which is an array of [regions](!api!/store#regions_region_schema). diff --git a/www/apps/resources/generated/edit-dates.mjs b/www/apps/resources/generated/edit-dates.mjs index ee62f95338b5f..1b15160d89386 100644 --- a/www/apps/resources/generated/edit-dates.mjs +++ b/www/apps/resources/generated/edit-dates.mjs @@ -136,46 +136,46 @@ export const generatedEditDates = { "app/service-factory-reference/methods/update/page.mdx": "2024-07-31T17:01:33+03:00", "app/service-factory-reference/tips/filtering/page.mdx": "2024-07-31T17:01:33+03:00", "app/service-factory-reference/page.mdx": "2024-07-26T14:40:56+00:00", - "app/storefront-development/cart/context/page.mdx": "2024-12-19T16:27:53.821Z", - "app/storefront-development/cart/create/page.mdx": "2024-12-19T16:27:55.753Z", + "app/storefront-development/cart/context/page.mdx": "2025-01-06T16:00:34.296Z", + "app/storefront-development/cart/create/page.mdx": "2025-01-06T15:57:04.923Z", "app/storefront-development/cart/manage-items/page.mdx": "2024-12-26T15:59:48.445Z", - "app/storefront-development/cart/retrieve/page.mdx": "2024-12-19T16:27:57.486Z", - "app/storefront-development/cart/update/page.mdx": "2024-12-19T16:28:05.574Z", + "app/storefront-development/cart/retrieve/page.mdx": "2025-01-06T15:58:13.885Z", + "app/storefront-development/cart/update/page.mdx": "2025-01-06T16:01:33.752Z", "app/storefront-development/cart/page.mdx": "2024-06-11T11:56:37+03:00", - "app/storefront-development/checkout/address/page.mdx": "2024-12-19T16:30:41.978Z", + "app/storefront-development/checkout/address/page.mdx": "2025-01-06T16:02:20.872Z", "app/storefront-development/checkout/complete-cart/page.mdx": "2024-12-19T16:30:41.019Z", "app/storefront-development/checkout/email/page.mdx": "2024-12-19T16:30:40.122Z", "app/storefront-development/checkout/payment/stripe/page.mdx": "2024-12-19T16:30:39.173Z", "app/storefront-development/checkout/payment/page.mdx": "2025-01-02T08:47:20.531Z", "app/storefront-development/checkout/shipping/page.mdx": "2024-12-26T15:34:51.431Z", "app/storefront-development/checkout/page.mdx": "2024-06-12T19:46:06+02:00", - "app/storefront-development/customers/addresses/page.mdx": "2024-12-19T16:38:44.847Z", + "app/storefront-development/customers/addresses/page.mdx": "2025-01-06T16:59:53.878Z", "app/storefront-development/customers/context/page.mdx": "2024-12-19T16:38:43.703Z", "app/storefront-development/customers/log-out/page.mdx": "2024-12-19T16:31:28.347Z", "app/storefront-development/customers/login/page.mdx": "2024-12-19T16:31:34.194Z", "app/storefront-development/customers/profile/page.mdx": "2024-12-19T16:31:43.978Z", "app/storefront-development/customers/register/page.mdx": "2024-12-19T16:31:49.314Z", - "app/storefront-development/customers/retrieve/page.mdx": "2024-12-19T16:32:34.302Z", + "app/storefront-development/customers/retrieve/page.mdx": "2025-01-06T16:07:12.542Z", "app/storefront-development/customers/page.mdx": "2024-06-13T12:21:54+03:00", "app/storefront-development/products/categories/list/page.mdx": "2024-12-19T16:33:06.547Z", - "app/storefront-development/products/categories/nested-categories/page.mdx": "2024-12-19T16:33:20.197Z", - "app/storefront-development/products/categories/products/page.mdx": "2024-12-19T16:33:23.566Z", - "app/storefront-development/products/categories/retrieve/page.mdx": "2024-12-19T16:33:31.498Z", + "app/storefront-development/products/categories/nested-categories/page.mdx": "2025-01-06T15:50:56.324Z", + "app/storefront-development/products/categories/products/page.mdx": "2025-01-06T15:46:26.562Z", + "app/storefront-development/products/categories/retrieve/page.mdx": "2025-01-06T15:44:45.608Z", "app/storefront-development/products/categories/page.mdx": "2024-06-11T19:55:56+02:00", "app/storefront-development/products/collections/list/page.mdx": "2024-12-19T16:33:43.902Z", - "app/storefront-development/products/collections/products/page.mdx": "2024-12-19T16:33:54.473Z", - "app/storefront-development/products/collections/retrieve/page.mdx": "2024-12-19T16:34:02.301Z", + "app/storefront-development/products/collections/products/page.mdx": "2025-01-06T15:55:34.444Z", + "app/storefront-development/products/collections/retrieve/page.mdx": "2025-01-06T15:53:54.960Z", "app/storefront-development/products/collections/page.mdx": "2024-06-11T19:55:56+02:00", "app/storefront-development/products/list/page.mdx": "2024-12-19T16:34:23.521Z", - "app/storefront-development/products/price/examples/sale-price/page.mdx": "2024-12-19T16:34:46.886Z", - "app/storefront-development/products/price/examples/show-price/page.mdx": "2024-12-19T16:34:56.493Z", - "app/storefront-development/products/price/examples/tax-price/page.mdx": "2024-12-19T16:35:05.493Z", + "app/storefront-development/products/price/examples/sale-price/page.mdx": "2025-01-06T15:39:33.475Z", + "app/storefront-development/products/price/examples/show-price/page.mdx": "2025-01-06T15:37:57.350Z", + "app/storefront-development/products/price/examples/tax-price/page.mdx": "2025-01-06T15:40:56.854Z", "app/storefront-development/products/price/page.mdx": "2024-12-19T16:35:19.471Z", - "app/storefront-development/products/retrieve/page.mdx": "2024-12-26T15:58:41.305Z", - "app/storefront-development/products/variants/page.mdx": "2024-12-19T16:35:41.278Z", + "app/storefront-development/products/retrieve/page.mdx": "2025-01-06T15:35:38.192Z", + "app/storefront-development/products/variants/page.mdx": "2025-01-06T15:36:41.374Z", "app/storefront-development/products/page.mdx": "2024-06-11T19:55:56+02:00", "app/storefront-development/regions/context/page.mdx": "2024-12-19T16:36:07.406Z", - "app/storefront-development/regions/list/page.mdx": "2024-12-19T16:36:17.364Z", + "app/storefront-development/regions/list/page.mdx": "2025-01-06T15:23:05.744Z", "app/storefront-development/regions/store-retrieve-region/page.mdx": "2024-12-19T16:36:22.800Z", "app/storefront-development/regions/page.mdx": "2024-06-09T15:19:09+02:00", "app/storefront-development/tips/page.mdx": "2024-12-19T16:36:32.938Z", @@ -864,7 +864,7 @@ export const generatedEditDates = { "references/types/interfaces/types.BaseClaim/page.mdx": "2024-12-23T12:30:28.267Z", "app/commerce-modules/auth/auth-providers/github/page.mdx": "2024-10-08T07:37:27.882Z", "app/commerce-modules/auth/auth-providers/google/page.mdx": "2024-10-08T07:37:06.517Z", - "app/storefront-development/customers/third-party-login/page.mdx": "2024-12-19T16:32:43.550Z", + "app/storefront-development/customers/third-party-login/page.mdx": "2025-01-06T16:05:41.159Z", "references/types/HttpTypes/types/types.HttpTypes.AdminWorkflowRunResponse/page.mdx": "2024-12-09T13:21:34.761Z", "references/types/HttpTypes/types/types.HttpTypes.BatchResponse/page.mdx": "2024-12-09T13:21:33.549Z", "references/types/WorkflowsSdkTypes/types/types.WorkflowsSdkTypes.Acknowledgement/page.mdx": "2024-12-09T13:21:35.873Z", @@ -910,7 +910,7 @@ export const generatedEditDates = { "references/promotion/interfaces/promotion.IPromotionModuleService/page.mdx": "2024-11-25T17:49:58.612Z", "references/types/EventBusTypes/interfaces/types.EventBusTypes.IEventBusService/page.mdx": "2024-12-09T13:21:33.073Z", "references/types/TransactionBaseTypes/interfaces/types.TransactionBaseTypes.ITransactionBaseService/page.mdx": "2024-09-06T00:11:08.494Z", - "app/storefront-development/products/inventory/page.mdx": "2024-12-19T16:34:10.122Z", + "app/storefront-development/products/inventory/page.mdx": "2025-01-06T15:42:09.252Z", "references/auth/IAuthModuleService/methods/auth.IAuthModuleService.updateAuthIdentities/page.mdx": "2024-12-09T13:21:36.269Z", "references/auth/IAuthModuleService/methods/auth.IAuthModuleService.updateProvider/page.mdx": "2024-12-09T13:21:36.245Z", "references/auth/IAuthModuleService/methods/auth.IAuthModuleService.updateProviderIdentities/page.mdx": "2024-12-09T13:21:36.289Z", diff --git a/www/apps/resources/generated/sidebar.mjs b/www/apps/resources/generated/sidebar.mjs index 9d9a0479727ef..7037f20c9e248 100644 --- a/www/apps/resources/generated/sidebar.mjs +++ b/www/apps/resources/generated/sidebar.mjs @@ -14764,14 +14764,6 @@ export const generatedSidebar = [ "type": "category", "title": "Carts", "children": [ - { - "loaded": true, - "isPathHref": true, - "type": "link", - "path": "/storefront-development/cart", - "title": "Overview", - "children": [] - }, { "loaded": true, "isPathHref": true, @@ -14885,14 +14877,6 @@ export const generatedSidebar = [ "type": "category", "title": "Customers", "children": [ - { - "loaded": true, - "isPathHref": true, - "type": "link", - "path": "/storefront-development/customers", - "title": "Overview", - "children": [] - }, { "loaded": true, "isPathHref": true, diff --git a/www/apps/resources/next.config.mjs b/www/apps/resources/next.config.mjs index b50427ba39b9b..6b286b814e1a2 100644 --- a/www/apps/resources/next.config.mjs +++ b/www/apps/resources/next.config.mjs @@ -1,4 +1,3 @@ -import mdx from "@next/mdx" import { brokenLinkCheckerPlugin, localLinksRehypePlugin, @@ -6,7 +5,9 @@ import { typeListLinkFixerPlugin, workflowDiagramLinkFixerPlugin, } from "remark-rehype-plugins" + import bundleAnalyzer from "@next/bundle-analyzer" +import mdx from "@next/mdx" import mdxPluginOptions from "./mdx-options.mjs" import path from "node:path" diff --git a/www/apps/resources/sidebars/storefront.mjs b/www/apps/resources/sidebars/storefront.mjs index 17737bf4b649a..8e8983de96cf7 100644 --- a/www/apps/resources/sidebars/storefront.mjs +++ b/www/apps/resources/sidebars/storefront.mjs @@ -125,11 +125,6 @@ export const storefrontGuidesSidebar = [ type: "category", title: "Carts", children: [ - { - type: "link", - path: "/storefront-development/cart", - title: "Overview", - }, { type: "link", path: "/storefront-development/cart/create", @@ -204,11 +199,6 @@ export const storefrontGuidesSidebar = [ type: "category", title: "Customers", children: [ - { - type: "link", - path: "/storefront-development/customers", - title: "Overview", - }, { type: "link", path: "/storefront-development/customers/register",