diff --git a/www/apps/resources/app/storefront-development/page.mdx b/www/apps/resources/app/storefront-development/page.mdx
index 3d781174e6..e9ececfded 100644
--- a/www/apps/resources/app/storefront-development/page.mdx
+++ b/www/apps/resources/app/storefront-development/page.mdx
@@ -20,4 +20,4 @@ You can build your storefront from scratch, or built it on top of the [Next.js S
---
-
+
diff --git a/www/apps/resources/generated/generated-resources-sidebar.mjs b/www/apps/resources/generated/generated-resources-sidebar.mjs
index 5e8605f9e6..0069c8942c 100644
--- a/www/apps/resources/generated/generated-resources-sidebar.mjs
+++ b/www/apps/resources/generated/generated-resources-sidebar.mjs
@@ -17161,448 +17161,6 @@ const generatedgeneratedResourcesSidebarSidebar = {
}
]
},
- {
- "loaded": true,
- "isPathHref": true,
- "type": "sidebar",
- "sidebar_id": "storefront-development",
- "title": "Storefront Development",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development",
- "title": "Overview",
- "children": []
- },
- {
- "type": "separator"
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "General",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/tips",
- "title": "Tips",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/publishable-api-keys",
- "title": "Publishable API Key",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Examples",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/guides/express-checkout",
- "title": "Express Checkout Storefront",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Regions",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/regions",
- "title": "Overview",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/regions/list",
- "title": "List Regions",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/regions/store-retrieve-region",
- "title": "Store and Retrieve Regions",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/regions/context",
- "title": "Region React Context",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Products",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/list",
- "title": "List Products",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/retrieve",
- "title": "Retrieve a Product",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/variants",
- "title": "Select a Variant",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/price",
- "title": "Retrieve Variant Prices",
- "autogenerate_path": "storefront-development/products/price/examples",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/price/examples/show-price",
- "title": "Example: Show Variant's Price",
- "description": "",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/price/examples/sale-price",
- "title": "Example: Show Sale Price",
- "description": "",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/price/examples/tax-price",
- "title": "Example: Show Price with Taxes",
- "description": "",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/inventory",
- "title": "Retrieve Variant Inventory",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Product Categories",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/categories/list",
- "title": "List Categories",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/categories/retrieve",
- "title": "Retrieve a Category",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/categories/products",
- "title": "Retrieve a Category's Products",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/categories/nested-categories",
- "title": "Retrieve Nested Categories",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Product Collections",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/collections/list",
- "title": "List Collections",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/collections/retrieve",
- "title": "Retrieve a Collection",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/products/collections/products",
- "title": "Retrieve a Collection's Products",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Carts",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/cart/create",
- "title": "Create Cart",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/cart/retrieve",
- "title": "Retrieve Cart",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/cart/context",
- "title": "Cart React Context",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/cart/update",
- "title": "Update Cart",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/cart/manage-items",
- "title": "Manage Line Items",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Checkout",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/checkout",
- "title": "Overview",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/checkout/email",
- "title": "1. Enter Email",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/checkout/address",
- "title": "2. Set Address",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/checkout/shipping",
- "title": "3. Choose Shipping Method",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/checkout/payment",
- "title": "4. Choose Payment Provider",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/checkout/payment/stripe",
- "title": "Example: Stripe",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/checkout/complete-cart",
- "title": "5. Complete Cart",
- "children": []
- }
- ]
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "category",
- "title": "Customers",
- "children": [
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/register",
- "title": "Register Customer",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/login",
- "title": "Login Customer",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/third-party-login",
- "title": "Third-Party (Social) Login",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/reset-password",
- "title": "Reset Password",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/retrieve",
- "title": "Retrieve Customer",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/context",
- "title": "Customer React Context",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/profile",
- "title": "Edit Customer Profile",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/addresses",
- "title": "Manage Customer Addresses",
- "children": []
- },
- {
- "loaded": true,
- "isPathHref": true,
- "type": "link",
- "path": "/storefront-development/customers/log-out",
- "title": "Log-out Customer",
- "children": []
- }
- ]
- }
- ]
- },
{
"type": "separator"
},
diff --git a/www/apps/resources/generated/generated-storefront-development-sidebar.mjs b/www/apps/resources/generated/generated-storefront-development-sidebar.mjs
new file mode 100644
index 0000000000..814d0dd918
--- /dev/null
+++ b/www/apps/resources/generated/generated-storefront-development-sidebar.mjs
@@ -0,0 +1,467 @@
+const generatedgeneratedStorefrontDevelopmentSidebarSidebar = {
+ "sidebar_id": "storefront-development",
+ "title": "Storefront Development",
+ "items": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development",
+ "title": "Overview",
+ "children": []
+ },
+ {
+ "type": "separator"
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "General",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/tips",
+ "title": "Tips",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/publishable-api-keys",
+ "title": "Publishable API Key",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Tutorials",
+ "description": "The following tutorials guide you to build a storefront for different kinds of use cases.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/guides/express-checkout",
+ "title": "Express Checkout Storefront",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Regions",
+ "description": "Regions are different areas you sell products in. Learn how to use regions in your storefront.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/regions",
+ "title": "Overview",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/regions/list",
+ "title": "List Regions",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/regions/store-retrieve-region",
+ "title": "Store and Retrieve Regions",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/regions/context",
+ "title": "Region React Context",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Products",
+ "description": "Learn how to show products and related data in your storefront.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/list",
+ "title": "List Products",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/retrieve",
+ "title": "Retrieve a Product",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/variants",
+ "title": "Select a Variant",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/price",
+ "title": "Retrieve Variant Prices",
+ "autogenerate_path": "storefront-development/products/price/examples",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/price/examples/show-price",
+ "title": "Example: Show Variant's Price",
+ "description": "",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/price/examples/sale-price",
+ "title": "Example: Show Sale Price",
+ "description": "",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/price/examples/tax-price",
+ "title": "Example: Show Price with Taxes",
+ "description": "",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/inventory",
+ "title": "Retrieve Variant Inventory",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Product Categories",
+ "description": "Learn how to show product categories in your storefront.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/categories/list",
+ "title": "List Categories",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/categories/retrieve",
+ "title": "Retrieve a Category",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/categories/products",
+ "title": "Retrieve a Category's Products",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/categories/nested-categories",
+ "title": "Retrieve Nested Categories",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Product Collections",
+ "description": "Learn how to show product collections in your storefront.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/collections/list",
+ "title": "List Collections",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/collections/retrieve",
+ "title": "Retrieve a Collection",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/products/collections/products",
+ "title": "Retrieve a Collection's Products",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Carts",
+ "description": "Learn how to manage carts in your storefront. These carts are later used to implement the checkout flow.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/cart/create",
+ "title": "Create Cart",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/cart/retrieve",
+ "title": "Retrieve Cart",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/cart/context",
+ "title": "Cart React Context",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/cart/update",
+ "title": "Update Cart",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/cart/manage-items",
+ "title": "Manage Line Items",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Checkout",
+ "description": "Learn how to implement the different steps of the checkout flow in your storefront. By following the checkout flow, customers can complete their purchase.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/checkout",
+ "title": "Overview",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/checkout/email",
+ "title": "1. Enter Email",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/checkout/address",
+ "title": "2. Set Address",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/checkout/shipping",
+ "title": "3. Choose Shipping Method",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/checkout/payment",
+ "title": "4. Choose Payment Provider",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/checkout/payment/stripe",
+ "title": "Example: Stripe",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/checkout/complete-cart",
+ "title": "5. Complete Cart",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "category",
+ "title": "Customers",
+ "description": "Learn how to allow customers to register, login, and manage their profile in your storefront.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "sub-category",
+ "title": "Authentication",
+ "description": "Learn how to authenticate customers in your storefront. This includes basic email-password authentication and third-party (social) login.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/register",
+ "title": "Register Customer",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/login",
+ "title": "Login Customer",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/third-party-login",
+ "title": "Third-Party (Social) Login",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/reset-password",
+ "title": "Reset Password",
+ "children": []
+ }
+ ]
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "sub-category",
+ "title": "Profile",
+ "description": "Learn how to retrieve a customer, manage their customer profile, and log them out in your storefront.",
+ "children": [
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/retrieve",
+ "title": "Retrieve Customer",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/context",
+ "title": "Customer React Context",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/profile",
+ "title": "Edit Customer Profile",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/addresses",
+ "title": "Manage Customer Addresses",
+ "children": []
+ },
+ {
+ "loaded": true,
+ "isPathHref": true,
+ "type": "link",
+ "path": "/storefront-development/customers/log-out",
+ "title": "Log-out Customer",
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
+
+export default generatedgeneratedStorefrontDevelopmentSidebarSidebar
\ No newline at end of file
diff --git a/www/apps/resources/sidebar.mjs b/www/apps/resources/sidebar.mjs
index b02ecaa43c..c35356073e 100644
--- a/www/apps/resources/sidebar.mjs
+++ b/www/apps/resources/sidebar.mjs
@@ -20,7 +20,7 @@ import { salesChannelSidebar } from "./sidebars/sales-channel.mjs"
import { sdkToolsSidebar } from "./sidebars/sdk-tools.mjs"
import { stockLocationSidebar } from "./sidebars/stock-location.mjs"
import { storeSidebar } from "./sidebars/store.mjs"
-import { storefrontGuidesSidebar } from "./sidebars/storefront.mjs"
+import { storefrontDevelopmentSidebar } from "./sidebars/storefront.mjs"
import { taxSidebar } from "./sidebars/tax.mjs"
import { troubleshootingSidebar } from "./sidebars/troubleshooting.mjs"
import { userSidebar } from "./sidebars/user.mjs"
@@ -71,7 +71,6 @@ export const sidebar = [
},
...architecturalModulesSidebar,
...pluginsSidebar,
- ...storefrontGuidesSidebar,
{
type: "separator",
},
@@ -134,4 +133,9 @@ export const sidebar = [
title: "Integrations",
items: integrationsSidebar,
},
+ {
+ sidebar_id: "storefront-development",
+ title: "Storefront Development",
+ items: storefrontDevelopmentSidebar,
+ },
]
diff --git a/www/apps/resources/sidebars/storefront.mjs b/www/apps/resources/sidebars/storefront.mjs
index e4f32f2ae2..3b88602d76 100644
--- a/www/apps/resources/sidebars/storefront.mjs
+++ b/www/apps/resources/sidebars/storefront.mjs
@@ -1,227 +1,242 @@
/** @type {import('types').Sidebar.SidebarItem[]} */
-export const storefrontGuidesSidebar = [
+export const storefrontDevelopmentSidebar = [
{
- type: "sidebar",
- sidebar_id: "storefront-development",
- title: "Storefront Development",
+ type: "link",
+ path: "/storefront-development",
+ title: "Overview",
+ },
+ {
+ type: "separator",
+ },
+ {
+ type: "category",
+ title: "General",
children: [
{
type: "link",
- path: "/storefront-development",
+ path: "/storefront-development/tips",
+ title: "Tips",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/publishable-api-keys",
+ title: "Publishable API Key",
+ },
+ ],
+ },
+ {
+ type: "category",
+ title: "Tutorials",
+ description:
+ "The following tutorials guide you to build a storefront for different kinds of use cases.",
+ children: [
+ {
+ type: "link",
+ path: "/storefront-development/guides/express-checkout",
+ title: "Express Checkout Storefront",
+ },
+ ],
+ },
+ {
+ type: "category",
+ title: "Regions",
+ description:
+ "Regions are different areas you sell products in. Learn how to use regions in your storefront.",
+ children: [
+ {
+ type: "link",
+ path: "/storefront-development/regions",
title: "Overview",
},
{
- type: "separator",
+ type: "link",
+ path: "/storefront-development/regions/list",
+ title: "List Regions",
},
{
- type: "category",
- title: "General",
+ type: "link",
+ path: "/storefront-development/regions/store-retrieve-region",
+ title: "Store and Retrieve Regions",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/regions/context",
+ title: "Region React Context",
+ },
+ ],
+ },
+ {
+ type: "category",
+ title: "Products",
+ description:
+ "Learn how to show products and related data in your storefront.",
+ children: [
+ {
+ type: "link",
+ path: "/storefront-development/products/list",
+ title: "List Products",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/retrieve",
+ title: "Retrieve a Product",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/variants",
+ title: "Select a Variant",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/price",
+ title: "Retrieve Variant Prices",
+ autogenerate_path: "storefront-development/products/price/examples",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/inventory",
+ title: "Retrieve Variant Inventory",
+ },
+ ],
+ },
+ {
+ type: "category",
+ title: "Product Categories",
+ description: "Learn how to show product categories in your storefront.",
+ children: [
+ {
+ type: "link",
+ path: "/storefront-development/products/categories/list",
+ title: "List Categories",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/categories/retrieve",
+ title: "Retrieve a Category",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/categories/products",
+ title: "Retrieve a Category's Products",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/categories/nested-categories",
+ title: "Retrieve Nested Categories",
+ },
+ ],
+ },
+ {
+ type: "category",
+ title: "Product Collections",
+ description: "Learn how to show product collections in your storefront.",
+ children: [
+ {
+ type: "link",
+ path: "/storefront-development/products/collections/list",
+ title: "List Collections",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/collections/retrieve",
+ title: "Retrieve a Collection",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/products/collections/products",
+ title: "Retrieve a Collection's Products",
+ },
+ ],
+ },
+ {
+ type: "category",
+ title: "Carts",
+ description:
+ "Learn how to manage carts in your storefront. These carts are later used to implement the checkout flow.",
+ children: [
+ {
+ type: "link",
+ path: "/storefront-development/cart/create",
+ title: "Create Cart",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/cart/retrieve",
+ title: "Retrieve Cart",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/cart/context",
+ title: "Cart React Context",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/cart/update",
+ title: "Update Cart",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/cart/manage-items",
+ title: "Manage Line Items",
+ },
+ ],
+ },
+ {
+ type: "category",
+ title: "Checkout",
+ description:
+ "Learn how to implement the different steps of the checkout flow in your storefront. By following the checkout flow, customers can complete their purchase.",
+ children: [
+ {
+ type: "link",
+ path: "/storefront-development/checkout",
+ title: "Overview",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/checkout/email",
+ title: "1. Enter Email",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/checkout/address",
+ title: "2. Set Address",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/checkout/shipping",
+ title: "3. Choose Shipping Method",
+ },
+ {
+ type: "link",
+ path: "/storefront-development/checkout/payment",
+ title: "4. Choose Payment Provider",
children: [
{
type: "link",
- path: "/storefront-development/tips",
- title: "Tips",
- },
- {
- type: "link",
- path: "/storefront-development/publishable-api-keys",
- title: "Publishable API Key",
+ path: "/storefront-development/checkout/payment/stripe",
+ title: "Example: Stripe",
},
],
},
{
- type: "category",
- title: "Examples",
- children: [
- {
- type: "link",
- path: "/storefront-development/guides/express-checkout",
- title: "Express Checkout Storefront",
- },
- ],
+ type: "link",
+ path: "/storefront-development/checkout/complete-cart",
+ title: "5. Complete Cart",
},
+ ],
+ },
+ {
+ type: "category",
+ title: "Customers",
+ description:
+ "Learn how to allow customers to register, login, and manage their profile in your storefront.",
+ children: [
{
- type: "category",
- title: "Regions",
- children: [
- {
- type: "link",
- path: "/storefront-development/regions",
- title: "Overview",
- },
- {
- type: "link",
- path: "/storefront-development/regions/list",
- title: "List Regions",
- },
- {
- type: "link",
- path: "/storefront-development/regions/store-retrieve-region",
- title: "Store and Retrieve Regions",
- },
- {
- type: "link",
- path: "/storefront-development/regions/context",
- title: "Region React Context",
- },
- ],
- },
- {
- type: "category",
- title: "Products",
- children: [
- {
- type: "link",
- path: "/storefront-development/products/list",
- title: "List Products",
- },
- {
- type: "link",
- path: "/storefront-development/products/retrieve",
- title: "Retrieve a Product",
- },
- {
- type: "link",
- path: "/storefront-development/products/variants",
- title: "Select a Variant",
- },
- {
- type: "link",
- path: "/storefront-development/products/price",
- title: "Retrieve Variant Prices",
- autogenerate_path: "storefront-development/products/price/examples",
- },
- {
- type: "link",
- path: "/storefront-development/products/inventory",
- title: "Retrieve Variant Inventory",
- },
- ],
- },
- {
- type: "category",
- title: "Product Categories",
- children: [
- {
- type: "link",
- path: "/storefront-development/products/categories/list",
- title: "List Categories",
- },
- {
- type: "link",
- path: "/storefront-development/products/categories/retrieve",
- title: "Retrieve a Category",
- },
- {
- type: "link",
- path: "/storefront-development/products/categories/products",
- title: "Retrieve a Category's Products",
- },
- {
- type: "link",
- path: "/storefront-development/products/categories/nested-categories",
- title: "Retrieve Nested Categories",
- },
- ],
- },
- {
- type: "category",
- title: "Product Collections",
- children: [
- {
- type: "link",
- path: "/storefront-development/products/collections/list",
- title: "List Collections",
- },
- {
- type: "link",
- path: "/storefront-development/products/collections/retrieve",
- title: "Retrieve a Collection",
- },
- {
- type: "link",
- path: "/storefront-development/products/collections/products",
- title: "Retrieve a Collection's Products",
- },
- ],
- },
- {
- type: "category",
- title: "Carts",
- children: [
- {
- type: "link",
- path: "/storefront-development/cart/create",
- title: "Create Cart",
- },
- {
- type: "link",
- path: "/storefront-development/cart/retrieve",
- title: "Retrieve Cart",
- },
- {
- type: "link",
- path: "/storefront-development/cart/context",
- title: "Cart React Context",
- },
- {
- type: "link",
- path: "/storefront-development/cart/update",
- title: "Update Cart",
- },
- {
- type: "link",
- path: "/storefront-development/cart/manage-items",
- title: "Manage Line Items",
- },
- ],
- },
- {
- type: "category",
- title: "Checkout",
- children: [
- {
- type: "link",
- path: "/storefront-development/checkout",
- title: "Overview",
- },
- {
- type: "link",
- path: "/storefront-development/checkout/email",
- title: "1. Enter Email",
- },
- {
- type: "link",
- path: "/storefront-development/checkout/address",
- title: "2. Set Address",
- },
- {
- type: "link",
- path: "/storefront-development/checkout/shipping",
- title: "3. Choose Shipping Method",
- },
- {
- type: "link",
- path: "/storefront-development/checkout/payment",
- title: "4. Choose Payment Provider",
- children: [
- {
- type: "link",
- path: "/storefront-development/checkout/payment/stripe",
- title: "Example: Stripe",
- },
- ],
- },
- {
- type: "link",
- path: "/storefront-development/checkout/complete-cart",
- title: "5. Complete Cart",
- },
- ],
- },
- {
- type: "category",
- title: "Customers",
+ type: "sub-category",
+ title: "Authentication",
+ description:
+ "Learn how to authenticate customers in your storefront. This includes basic email-password authentication and third-party (social) login.",
children: [
{
type: "link",
@@ -243,6 +258,14 @@ export const storefrontGuidesSidebar = [
path: "/storefront-development/customers/reset-password",
title: "Reset Password",
},
+ ],
+ },
+ {
+ type: "sub-category",
+ title: "Profile",
+ description:
+ "Learn how to retrieve a customer, manage their customer profile, and log them out in your storefront.",
+ children: [
{
type: "link",
path: "/storefront-development/customers/retrieve",
diff --git a/www/apps/resources/utils/get-sidebar-for-path.ts b/www/apps/resources/utils/get-sidebar-for-path.ts
index 8b841192fb..6ba3f350f4 100644
--- a/www/apps/resources/utils/get-sidebar-for-path.ts
+++ b/www/apps/resources/utils/get-sidebar-for-path.ts
@@ -36,6 +36,13 @@ const sidebarMappings: {
}>,
paths: ["/integrations"],
},
+ {
+ module: async () =>
+ import(
+ "@/generated/generated-storefront-development-sidebar.mjs"
+ ) as Promise<{ default: Sidebar.Sidebar }>,
+ paths: ["/storefront-development"],
+ },
]
export async function getSidebarForPath(
currentPath: string
diff --git a/www/packages/docs-ui/src/hooks/use-child-docs/index.tsx b/www/packages/docs-ui/src/hooks/use-child-docs/index.tsx
index 8e3eae0d00..4b065c6ac9 100644
--- a/www/packages/docs-ui/src/hooks/use-child-docs/index.tsx
+++ b/www/packages/docs-ui/src/hooks/use-child-docs/index.tsx
@@ -305,9 +305,15 @@ export const useChildDocs = ({
const HeadingComponent = itemChildren?.length
? TitleHeaderComponent(headerLevel)
: undefined
- const isChildrenCategory = itemChildren?.every(
- (child) => child.type === "category" || child.type === "sub-category"
- )
+ const linkChildren =
+ itemChildren?.filter(
+ (item) => isSidebarItemLink(item) || item.type === "sidebar"
+ ) || []
+ const categoryChildren =
+ itemChildren?.filter(
+ (child) => child.type === "category" || child.type === "sub-category"
+ ) || []
+ const showLinkAsCard = !HeadingComponent && isSidebarItemLink(item)
return (
@@ -327,46 +333,41 @@ export const useChildDocs = ({
)}
)}
- {isChildrenCategory &&
- getAllLevelsElms({
- items: itemChildren,
- headerLevel: headerLevel + 1,
- currentLevel: currentLevel + 1,
- })}
- {!isChildrenCategory && (
+ {linkChildren.length > 0 && (
- isSidebarItemLink(item) || item.type === "sidebar"
- )
- .map((childItem) => {
- const href = isSidebarItemLink(childItem)
- ? childItem.path
- : getSidebarFirstLinkChild(
- childItem as Sidebar.SidebarItemSidebar
- )?.path
- return {
- title: childItem.title,
- href,
- text: childItem.description,
- rightIcon:
- childItem.type === "ref"
- ? ChevronDoubleRight
- : undefined,
- }
- }) || []
+ linkChildren.map((childItem) => {
+ const href = isSidebarItemLink(childItem)
+ ? childItem.path
+ : getSidebarFirstLinkChild(
+ childItem as Sidebar.SidebarItemSidebar
+ )?.path
+ return {
+ title: childItem.title,
+ href,
+ text: childItem.description,
+ rightIcon:
+ childItem.type === "ref"
+ ? ChevronDoubleRight
+ : undefined,
+ }
+ }) || []
}
itemsPerRow={itemsPerRow}
defaultItemsPerRow={defaultItemsPerRow}
className="mb-docs_1"
/>
)}
+ {categoryChildren.length > 0 &&
+ getAllLevelsElms({
+ items: categoryChildren,
+ headerLevel: headerLevel + 1,
+ currentLevel: currentLevel + 1,
+ })}
{key !== items.length - 1 && headerLevel === 2 &&
}
)}
- {!HeadingComponent && isSidebarItemLink(item) && (
+ {showLinkAsCard && (