fix: resolve issue #17 - Product page: Implement Breadcrumb

src/modules/categories/templates/index.tsx

@@ -6,7 +6,7 @@ import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-g
 import RefinementList from "@modules/store/components/refinement-list"
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 import PaginatedProducts from "@modules/store/templates/paginated-products"
-import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import Breadcrumb from "@modules/common/components/breadcrumb"
 import { HttpTypes } from "@medusajs/types"
 
 export default function CategoryTemplate({
@@ -36,6 +36,15 @@ export default function CategoryTemplate({
 
   getParents(category)
 
+  const crumbs = [
+    { label: "Home", href: "/" },
+    ...parents.reverse().map((parent) => ({
+      label: parent.name,
+      href: `/categories/${parent.handle}`,
+    })),
+    { label: category.name },
+  ]
+
   return (
     <div
       className="flex flex-col small:flex-row small:items-start py-6 content-container"
@@ -43,20 +52,8 @@ export default function CategoryTemplate({
     >
       <RefinementList sortBy={sort} data-testid="sort-by-container" />
       <div className="w-full">
+        <Breadcrumb crumbs={crumbs} />
         <div className="flex flex-row mb-8 text-2xl-semi gap-4">
-          {parents &&
-            parents.map((parent) => (
-              <span key={parent.id} className="text-ui-fg-subtle">
-                <LocalizedClientLink
-                  className="mr-4 hover:text-black"
-                  href={`/categories/${parent.handle}`}
-                  data-testid="sort-by-link"
-                >
-                  {parent.name}
-                </LocalizedClientLink>
-                /
-              </span>
-            ))}
           <h1 data-testid="category-page-title">{category.name}</h1>
         </div>
         {category.description && (

src/modules/common/components/breadcrumb/index.tsx

@@ -0,0 +1,55 @@
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import React from "react"
+
+type Crumb = {
+  label: string
+  href?: string
+}
+
+type BreadcrumbProps = {
+  crumbs: Crumb[]
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({ crumbs }) => {
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: crumbs.map((crumb, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: crumb.label,
+      ...(crumb.href ? { item: crumb.href } : {}),
+    })),
+  }
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <nav
+        className="flex items-center gap-x-2 text-small-regular text-ui-fg-subtle mb-4"
+        aria-label="Breadcrumb"
+      >
+        {crumbs.map((crumb, index) => (
+          <React.Fragment key={index}>
+            {index > 0 && <span>/</span>}
+            {crumb.href ? (
+              <LocalizedClientLink
+                href={crumb.href}
+                className="hover:text-ui-fg-base transition-colors"
+              >
+                {crumb.label}
+              </LocalizedClientLink>
+            ) : (
+              <span className="text-ui-fg-base">{crumb.label}</span>
+            )}
+          </React.Fragment>
+        ))}
+      </nav>
+    </>
+  )
+}
+
+export default Breadcrumb

src/modules/products/templates/index.tsx

@@ -10,6 +10,7 @@ import SkeletonRelatedProducts from "@modules/skeletons/templates/skeleton-relat
 import { notFound } from "next/navigation"
 import ProductActionsWrapper from "./product-actions-wrapper"
 import { HttpTypes } from "@medusajs/types"
+import Breadcrumb from "@modules/common/components/breadcrumb"
 
 type ProductTemplateProps = {
   product: HttpTypes.StoreProduct
@@ -26,8 +27,24 @@ const ProductTemplate: React.FC<ProductTemplateProps> = ({
     return notFound()
   }
 
+  const category = product.categories?.[0]
+  const crumbs = [
+    { label: "Home", href: "/" },
+    { label: "Store", href: "/store" },
+    ...(category
+      ? [{ label: category.name, href: `/categories/${category.handle}` }]
+      : []),
+    { label: product.title },
+  ]
+
   return (
     <>
+      <div
+        className="content-container py-4"
+        data-testid="product-breadcrumb"
+      >
+        <Breadcrumb crumbs={crumbs} />
+      </div>
       <div
         className="content-container flex flex-col small:flex-row small:items-start py-6 relative"
         data-testid="product-container"