From 59bfdbc3abb990e85364265421452dee30318052 Mon Sep 17 00:00:00 2001 From: Claude Code Bot Date: Mon, 30 Mar 2026 11:13:31 +0000 Subject: [PATCH] fix: resolve issue #17 - Product page: Implement Breadcrumb --- package-lock.json | 39 +++ src/modules/categories/templates/index.tsx | 25 +- .../common/components/breadcrumb/index.tsx | 55 ++++ src/modules/products/templates/index.tsx | 17 ++ yarn.lock | 289 ++---------------- 5 files changed, 145 insertions(+), 280 deletions(-) create mode 100644 src/modules/common/components/breadcrumb/index.tsx diff --git a/package-lock.json b/package-lock.json index 84474d0..9fbb67a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,8 @@ "@radix-ui/react-accordion": "^1.2.1", "@stripe/react-stripe-js": "^1.7.2", "@stripe/stripe-js": "^1.29.0", + "embla-carousel-autoplay": "^8.6.0", + "embla-carousel-react": "^8.6.0", "lodash": "^4.17.21", "next": "^15.3.1", "pg": "^8.11.3", @@ -10937,6 +10939,43 @@ "integrity": "sha512-icUt1NvfhGLar5lSWH3tHNzablaA5js3HVHacQimfP8ViEBOQv+L7DKEuHdbTZ0SKCO1ogTJTIL1Gwk9S6Qvcg==", "license": "ISC" }, + "node_modules/embla-carousel": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", + "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", + "license": "MIT" + }, + "node_modules/embla-carousel-autoplay": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.6.0.tgz", + "integrity": "sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==", + "license": "MIT", + "peerDependencies": { + "embla-carousel": "8.6.0" + } + }, + "node_modules/embla-carousel-react": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz", + "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==", + "license": "MIT", + "dependencies": { + "embla-carousel": "8.6.0", + "embla-carousel-reactive-utils": "8.6.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz", + "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==", + "license": "MIT", + "peerDependencies": { + "embla-carousel": "8.6.0" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/src/modules/categories/templates/index.tsx b/src/modules/categories/templates/index.tsx index 14b6f04..0ff86be 100644 --- a/src/modules/categories/templates/index.tsx +++ b/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 (
+
- {parents && - parents.map((parent) => ( - - - {parent.name} - - / - - ))}

{category.name}

{category.description && ( diff --git a/src/modules/common/components/breadcrumb/index.tsx b/src/modules/common/components/breadcrumb/index.tsx new file mode 100644 index 0000000..25779f2 --- /dev/null +++ b/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 = ({ 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 ( + <> +