From d2c4323299762c792971f58c9ba54b9d1e127ffe Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 10 Mar 2025 14:20:29 +0200 Subject: [PATCH] add storefront development sidebar --- .../app/storefront-development/page.mdx | 2 +- .../generated/generated-resources-sidebar.mjs | 442 ----------------- ...nerated-storefront-development-sidebar.mjs | 467 ++++++++++++++++++ www/apps/resources/sidebar.mjs | 8 +- www/apps/resources/sidebars/storefront.mjs | 433 ++++++++-------- .../resources/utils/get-sidebar-for-path.ts | 7 + .../src/hooks/use-child-docs/index.tsx | 65 +-- 7 files changed, 742 insertions(+), 682 deletions(-) create mode 100644 www/apps/resources/generated/generated-storefront-development-sidebar.mjs 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 && (