docs: redesign table of content (#12647)

* implement toc * added to projects * fixes and adapt for references * added product frontmatter * remove action menu from 404 pages
2025-05-30 16:55:36 +03:00
parent 490bd7647f
commit 009d00f27d
293 changed files with 1975 additions and 506 deletions
@@ -58,9 +58,9 @@ export default function RootLayout({
      gaId={process.env.NEXT_PUBLIC_GA_ID}
    >
      <WideLayout
-        showToc={false}
        showBreadcrumbs={false}
        ProvidersComponent={Providers}
+        showContentMenu={false}
      >
        {children}
      </WideLayout>
@@ -17,7 +17,7 @@ import ClientLibraries from "./client-libraries.mdx"

 <DividedMarkdownContent>

-<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction" hideLlmDropdown>Medusa V2 Admin API Reference</H1>
+<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction">Medusa V2 Admin API Reference</H1>

 This API reference includes Medusa v2's Admin APIs, which are REST APIs exposed by the Medusa application. They are used to perform admin functionalities or create an admin dashboard to access and manipulate your commerce store's data.

@@ -17,7 +17,7 @@ import ClientLibraries from "./client-libraries.mdx"

 <DividedMarkdownContent>

-<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction" hideLlmDropdown>Medusa V2 Store API Reference</H1>
+<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction">Medusa V2 Store API Reference</H1>

 This API reference includes Medusa v2's Store APIs, which are REST APIs exposed by the Medusa application. They are used to create a storefront for your commerce store, such as a webshop or a commerce mobile app.

@@ -1,3 +1,7 @@
+---
+hide_content_menu: true
+---
+
 import { CardList, H1 } from "docs-ui"
 import {
  BookOpen,
@@ -10,7 +14,7 @@ export const metadata = {
  title: `Page Not Found`,
 }

-<H1 hideLlmDropdown>{metadata.title}</H1>
+# {metadata.title}

 The page you were looking for isn't available.

@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"

 export const metadata = {
@@ -1,10 +1,9 @@
 import type { MDXComponents as MDXComponentsType } from "mdx/types"
-import { Link, MDXComponents as UiMdxComponents } from "docs-ui"
+import { MDXComponents as UiMdxComponents } from "docs-ui"
 import Feedback from "../Feedback"

 const MDXComponents: MDXComponentsType = {
  ...UiMdxComponents,
-  a: Link,
  Feedback,
 }

@@ -1,6 +1,7 @@
 import { DocsConfig, Sidebar } from "types"
 import { globalConfig } from "docs-ui"
 import { generatedSidebars } from "../generated/sidebar.mjs"
+import { basePathUrl } from "../utils/base-path-url"

 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"

@@ -23,4 +24,11 @@ export const config: DocsConfig = {
      },
    ],
  },
+  version: {
+    ...globalConfig.version,
+    bannerImage: {
+      light: basePathUrl("/images/get-started-card.png"),
+      dark: basePathUrl("/images/get-started-card-dark.png"),
+    },
+  },
 }
@@ -7,11 +7,15 @@ import {
  cloudinaryImgRehypePlugin,
  pageNumberRehypePlugin,
  crossProjectLinksPlugin,
+  recmaInjectMdxDataPlugin,
+  remarkAttachFrontmatterDataPlugin,
 } from "remark-rehype-plugins"
 import path from "path"
 import redirects from "./utils/redirects.mjs"
 import { generatedSidebars } from "./generated/sidebar.mjs"
 import { catchBadRedirects } from "build-scripts"
+import remarkFrontmatter from "remark-frontmatter"
+import withExtractedTableOfContents from "@stefanprobst/rehype-extract-toc"

 const withMDX = mdx({
  extension: /\.mdx?$/,
@@ -90,7 +94,10 @@ const withMDX = mdx({
          sidebar: generatedSidebars[0].items,
        },
      ],
+      [withExtractedTableOfContents],
    ],
+    remarkPlugins: [[remarkFrontmatter], [remarkAttachFrontmatterDataPlugin]],
+    recmaPlugins: [[recmaInjectMdxDataPlugin]],
    jsx: true,
  },
 })
@@ -18,6 +18,7 @@
    "@mdx-js/react": "^3.1.0",
    "@medusajs/icons": "2.8.3",
    "@next/mdx": "15.3.1",
+    "@stefanprobst/rehype-extract-toc": "^3.0.0",
    "clsx": "^2.1.0",
    "docs-ui": "*",
    "docs-utils": "*",
@@ -26,6 +27,7 @@
    "react-dom": "rc",
    "rehype-mdx-code-props": "^2.0.0",
    "rehype-slug": "^6.0.0",
+    "remark-frontmatter": "^5.0.0",
    "remark-rehype-plugins": "*"
  },
  "devDependencies": {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,14 @@
+---
+products:
+  - customer
+  - order
+  - payment
+  - product
+  - promotion
+  - region
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,5 +1,7 @@
 ---
 sidebar_label: "Promotions Adjustments"
+products:
+  - promotion
 ---

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - tax
+---
+
 export const metadata = {
  title: `Tax Lines in Cart Module`,
 }
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - payment
+  - cart
+  - order
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - order
+  - pricing
+  - product
+  - stock location
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -4,6 +4,9 @@ tags:
  - product
  - stock location
  - concept
+products:
+  - product
+  - stock location
 ---

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,15 @@
+---
+products:
+  - customer
+  - cart
+  - fulfillment
+  - payment
+  - product
+  - promotion
+  - region
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,5 +1,7 @@
 ---
 sidebar_label: "Promotions Adjustments"
+products:
+  - promotion
 ---

 export const metadata = {
@@ -1,5 +1,7 @@
 ---
 sidebar_label: "Tax Lines"
+products:
+  - tax
 ---

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - cart
+  - customer
+  - order
+  - region
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,9 @@
+---
+products:
+  - fulfillment
+  - product
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,13 @@
+---
+products:
+  - cart
+  - fulfillment
+  - inventory
+  - order
+  - pricing
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -3,6 +3,8 @@ sidebar_label: "Product Shipping Requirement"
 tags:
    - concept
    - fulfillment
+products:
+  - fulfillment
 ---

 import { Table } from "docs-ui"
@@ -5,6 +5,10 @@ tags:
    - inventory
    - stock location
    - sales channel
+products:
+  - inventory
+  - stock location
+  - sales channel
 ---

 export const metadata = {
@@ -1,3 +1,9 @@
+---
+products:
+  - cart
+  - order
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - cart
+  - order
+  - payment
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,12 @@
+---
+products:
+  - api key
+  - cart
+  - order
+  - product
+  - stock location
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - api key
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - fulfillment
+  - inventory
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - currency
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -5,6 +5,11 @@ tags:
    - pricing
    - server
    - tutorial
+    - product
+products:
+  - cart
+  - pricing
+  - product
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -5,6 +5,10 @@ tags:
    - order
    - server
    - tutorial
+products:
+  - cart
+  - order
+  - customer
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -6,6 +6,8 @@ tags:
    - server
    - tutorial
    - notification
+products:
+  - cart
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -11,6 +11,11 @@ tags:
      label: "Implement Loyalty Points"
    - name: promotion
      label: "Implement Loyalty Points"
+products:
+  - cart
+  - order
+  - customer
+  - promotion
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -7,6 +7,9 @@ tags:
      label: "Implement Phone Authentication"
    - server
    - tutorial
+products:
+  - customer
+  - auth
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -5,6 +5,9 @@ tags:
      label: "Implement Product Reviews"
    - server
    - tutorial
+products:
+  - product
+  - customer
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -5,6 +5,8 @@ tags:
      label: "Implement Re-Order"
    - server
    - tutorial
+products:
+  - order
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -11,6 +11,8 @@ keywords:
    - payment provider
    - checkout
    - nextjs
+products:
+  - payment
 ---

 import { Github, PlaySolid, EllipsisHorizontal } from "@medusajs/icons"
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
 import { Github, PlaySolid } from "@medusajs/icons"

@@ -5,6 +5,8 @@ tags:
    - name: product
      label: "Localization with Contentful"
    - tutorial
+products:
+  - product
 ---

 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Card, Prerequisites, WorkflowDiagram } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,8 @@
+---
+products:
+  - order
+---
+
 import { Card, Prerequisites, Details } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Card, Prerequisites, Details } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -4,6 +4,8 @@ tags:
    - server
    - tutorial
    - analytics
+products:
+  - order
 ---

 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
@@ -1,3 +1,10 @@
+---
+products:
+  - fulfillment
+  - cart
+  - order
+---
+
 import { Card, Prerequisites, Details } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { Table, Prerequisites, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -2,6 +2,8 @@
 tags:
  - storefront
  - payment
+products:
+  - payment
 ---

 import { Prerequisites } from "docs-ui"
@@ -1,3 +1,7 @@
+---
+hide_content_menu: true
+---
+
 import { CardList, H1 } from "docs-ui"
 import {
  BookOpen,
@@ -10,7 +14,7 @@ export const metadata = {
  title: `Page Not Found`,
 }

-<H1 hideLlmDropdown>{metadata.title}</H1>
+# {metadata.title}

 The page you were looking for isn't available.

@@ -4,6 +4,10 @@ tags:
    - product
    - tutorial
    - server
+products:
+  - product
+  - customer
+  - sales channel
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -1,3 +1,11 @@
+---
+products:
+  - product
+  - customer
+  - sales channel
+  - pricing
+---
+
 import { AcademicCapSolid, UsersSolid } from "@medusajs/icons"

 export const metadata = {
@@ -7,6 +7,9 @@ tags:
    - tutorial
    - name: product
      label: "Implement Bundled Products"
+products:
+  - cart
+  - product
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -1,5 +1,10 @@
+---
+products:
+  - product
+  - cart
+---
+
 import { AcademicCapSolid, PuzzleSolid } from "@medusajs/icons";
-import { ChildDocs } from "docs-ui"

 export const metadata = {
  title: `Bundled Products Recipe`,
@@ -1,3 +1,10 @@
+---
+products:
+  - product
+  - customer
+  - order
+---
+
 import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - product
+  - sales channel
+  - inventory
+---
+
 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,11 @@
+---
+products:
+  - product
+  - fulfillment
+  - cart
+  - order
+---
+
 import { Github, PlaySolid } from "@medusajs/icons"
 import { Prerequisites } from "docs-ui"

@@ -1,5 +1,10 @@
+---
+products:
+  - product
+  - order
+  - fulfillment
+---
 import { AcademicCapSolid, BoltSolid, PuzzleSolid } from "@medusajs/icons"
-import { ChildDocs } from "docs-ui"

 export const metadata = {
  title: `Digital Products Recipe`,
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites, WorkflowDiagram } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,12 @@
+---
+products:
+  - product
+  - pricing
+  - cart
+  - order
+  - inventory
+---
+
 import { Prerequisites } from "docs-ui"

 export const ogImage = "https://res.cloudinary.com/dza7lstvk/image/upload/v1740556002/Medusa%20Resources/erp-guide_sucmxz.jpg"
@@ -1,3 +1,12 @@
+---
+products:
+  - fulfillment
+  - order
+  - product
+  - cart
+  - auth
+---
+
 import { WorkflowDiagram, Prerequisites } from "docs-ui"
 import { Github, PlaySolid } from "@medusajs/icons"

@@ -1,3 +1,9 @@
+---
+products:
+  - product
+  - order
+---
+
 import { Github, PlaySolid } from "@medusajs/icons"
 import { Prerequisites, WorkflowDiagram } from "docs-ui"

@@ -1,3 +1,9 @@
+---
+products:
+  - product
+  - order
+---
+
 import { ChildDocs } from "docs-ui"
 import { AcademicCapSolid } from "@medusajs/icons"

@@ -1,3 +1,13 @@
+---
+products:
+  - region
+  - currency
+  - tax
+  - payment
+  - fulfillment
+  - pricing
+---
+
 import { AcademicCapSolid, UsersSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - sales channel
+---
+
 import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - order
+  - fulfillment
+  - inventory
+  - sales channel
+---
+
 import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"
 import { LearningPath } from "docs-ui"

@@ -1,3 +1,9 @@
+---
+products:
+  - product
+  - order
+---
+
 import { AcademicCapSolid, NextJs } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,12 @@
+---
+products:
+  - product
+  - inventory
+  - order
+  - sales channel
+  - payment
+---
+
 import { AcademicCapSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - order
+  - payment
+  - cart
+  - customer
+---
+
 import { Github, PlaySolid, EllipsisHorizontal } from "@medusajs/icons"
 import { Prerequisites, InlineIcon } from "docs-ui"

@@ -1,3 +1,9 @@
+---
+products:
+  - order
+  - payment
+---
+
 import { AcademicCapSolid, Github } from "@medusajs/icons"

 export const metadata = {
@@ -8,12 +8,14 @@ import {
  localLinksRehypePlugin,
  workflowDiagramLinkFixerPlugin,
  prerequisitesLinkFixerPlugin,
+  recmaInjectMdxDataPlugin,
 } from "remark-rehype-plugins"
 import MDXComponents from "@/components/MDXComponents"
 import mdxOptions from "../../../mdx-options.mjs"
 import { filesMap } from "../../../generated/files-map.mjs"
 import { Metadata } from "next"
-import { cache } from "react"
+import { cache, Suspense } from "react"
+import { Loading } from "docs-ui"

 type PageProps = {
  params: Promise<{
@@ -37,40 +39,50 @@ export default async function ReferencesPage(props: PageProps) {
  }

  return (
-    <MDXRemote
-      source={fileData.content}
-      components={MDXComponents}
-      options={{
-        mdxOptions: {
-          rehypePlugins: [
-            ...mdxOptions.options.rehypePlugins,
-            [
-              typeListLinkFixerPlugin,
-              {
-                ...pluginOptions,
-                checkLinksType: "md",
-              },
-            ],
-            [
-              workflowDiagramLinkFixerPlugin,
-              {
-                ...pluginOptions,
-                checkLinksType: "value",
-              },
-            ],
-            [
-              prerequisitesLinkFixerPlugin,
-              {
-                ...pluginOptions,
-                checkLinksType: "value",
-              },
-            ],
-            [localLinksRehypePlugin, pluginOptions],
-          ],
-          remarkPlugins: mdxOptions.options.remarkPlugins,
-        },
-      }}
-    />
+    <Suspense fallback={<Loading />}>
+      <div className="animate animate-fadeIn">
+        <MDXRemote
+          source={fileData.content}
+          components={MDXComponents}
+          options={{
+            mdxOptions: {
+              rehypePlugins: [
+                ...mdxOptions.options.rehypePlugins,
+                [
+                  typeListLinkFixerPlugin,
+                  {
+                    ...pluginOptions,
+                    checkLinksType: "md",
+                  },
+                ],
+                [
+                  workflowDiagramLinkFixerPlugin,
+                  {
+                    ...pluginOptions,
+                    checkLinksType: "value",
+                  },
+                ],
+                [
+                  prerequisitesLinkFixerPlugin,
+                  {
+                    ...pluginOptions,
+                    checkLinksType: "value",
+                  },
+                ],
+                [localLinksRehypePlugin, pluginOptions],
+              ],
+              remarkPlugins: [...mdxOptions.options.remarkPlugins],
+              recmaPlugins: [
+                [
+                  recmaInjectMdxDataPlugin,
+                  { isRemoteMdx: true, mode: process.env.NODE_ENV },
+                ],
+              ],
+            },
+          }}
+        />
+      </div>
+    </Suspense>
  )
 }

@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -1,3 +1,8 @@
+---
+products:
+  - cart
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab, Table } from "docs-ui"
@@ -2,6 +2,9 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
+  - customer
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
--- a/Show More
+++ b/Show More