Product page: Implement Breadcrumb #17

New Issue

No breadcrumb component exists. However, the category page (/src/modules/categories/templates/index.tsx) contains a manual inline breadcrumb pattern — it recursively walks parent_category links and renders them inline. This is the closest existing implementation. Product, collection, and store pages have no breadcrumb at all.

Proposed Approach

Create a reusable Breadcrumb component at src/modules/common/components/breadcrumb/index.tsx accepting a crumbs: { label: string; href?: string }[] prop. Use LocalizedClientLink for links (handles country code prefix automatically).
Add JSON-LD structured data (BreadcrumbList schema) inside the component for SEO benefits — this is a standard best practice for e-commerce product pages.
Wire it into the product template (src/modules/products/templates/index.tsx):
- Build crumbs: Home → Store → [Category if available] → [Product title]
- Product data already flows through the template; category association may need to be fetched via the product's categories field from Medusa SDK.
Refactor the category page to use the new shared component instead of its inline pattern.

Considerations

Product → Category association: Medusa products can belong to multiple categories. Need to decide which category path to display (e.g., first category, or none if ambiguous). May require expanding the product query to include categories with parent hierarchy.
Collection vs. Category: Products can also be accessed via collections (/collections/[handle]). The breadcrumb path differs depending on entry point — consider using document.referrer or defaulting to Store as the parent.
Country code routing: LocalizedClientLink already handles this; breadcrumb hrefs should use plain paths (e.g., /store, /categories/handle).
Styling: Medusa UI doesn't ship a Breadcrumb component — custom Tailwind implementation needed, consistent with existing text-ui-fg-subtle patterns.
No test coverage exists for navigation components, so no tests to update.

Next Steps

Confirm whether product breadcrumbs should show a category path or just Home → Store → Product.
Check that the Medusa product query in src/lib/data/products.ts includes categories + parent_category fields.
Implement Breadcrumb component with crumbs prop + JSON-LD output.
Integrate into ProductTemplate and refactor CategoryTemplate to use it.
Manually verify rendering across product, category, and collection pages.

This research was performed automatically by Claude Code. Feel free to discuss further in the comments.

## Research Findings I've explored the codebase and researched this idea. Here's what I found: **Current State** No breadcrumb component exists. However, the category page (`/src/modules/categories/templates/index.tsx`) contains a **manual inline breadcrumb pattern** — it recursively walks `parent_category` links and renders them inline. This is the closest existing implementation. Product, collection, and store pages have no breadcrumb at all. --- **Proposed Approach** 1. **Create a reusable `Breadcrumb` component** at `src/modules/common/components/breadcrumb/index.tsx` accepting a `crumbs: { label: string; href?: string }[]` prop. Use `LocalizedClientLink` for links (handles country code prefix automatically). 2. **Add JSON-LD structured data** (`BreadcrumbList` schema) inside the component for SEO benefits — this is a standard best practice for e-commerce product pages. 3. **Wire it into the product template** (`src/modules/products/templates/index.tsx`): - Build crumbs: `Home → Store → [Category if available] → [Product title]` - Product data already flows through the template; category association may need to be fetched via the product's `categories` field from Medusa SDK. 4. **Refactor the category page** to use the new shared component instead of its inline pattern. --- **Considerations** - **Product → Category association**: Medusa products can belong to multiple categories. Need to decide which category path to display (e.g., first category, or none if ambiguous). May require expanding the product query to include `categories` with parent hierarchy. - **Collection vs. Category**: Products can also be accessed via collections (`/collections/[handle]`). The breadcrumb path differs depending on entry point — consider using `document.referrer` or defaulting to `Store` as the parent. - **Country code routing**: `LocalizedClientLink` already handles this; breadcrumb hrefs should use plain paths (e.g., `/store`, `/categories/handle`). - **Styling**: Medusa UI doesn't ship a `Breadcrumb` component — custom Tailwind implementation needed, consistent with existing `text-ui-fg-subtle` patterns. - **No test coverage exists** for navigation components, so no tests to update. --- **Next Steps** 1. Confirm whether product breadcrumbs should show a category path or just `Home → Store → Product`. 2. Check that the Medusa product query in `src/lib/data/products.ts` includes `categories` + `parent_category` fields. 3. Implement `Breadcrumb` component with `crumbs` prop + JSON-LD output. 4. Integrate into `ProductTemplate` and refactor `CategoryTemplate` to use it. 5. Manually verify rendering across product, category, and collection pages. --- *This research was performed automatically by Claude Code. Feel free to discuss further in the comments.*

yen.nguyen added the

bug

label 2026-03-30 11:05:23 +00:00

yen.nguyen commented

2026-03-30 11:06:21 +00:00

@claude-code

Research Findings

I've explored the codebase and researched this idea. Here's what I found:

Current State

No breadcrumb component exists. However, the category page (/src/modules/categories/templates/index.tsx) contains a manual inline breadcrumb pattern — it recursively walks parent_category links and renders them inline. This is the closest existing implementation. Product, collection, and store pages have no breadcrumb at all.

Proposed Approach

Create a reusable Breadcrumb component at src/modules/common/components/breadcrumb/index.tsx accepting a crumbs: { label: string; href?: string }[] prop. Use LocalizedClientLink for links (handles country code prefix automatically).

Add JSON-LD structured data (BreadcrumbList schema) inside the component for SEO benefits — this is a standard best practice for e-commerce product pages.

Wire it into the product template (src/modules/products/templates/index.tsx):

Build crumbs: Home → Store → [Category if available] → [Product title]

Product data already flows through the template; category association may need to be fetched via the product's categories field from Medusa SDK.

Refactor the category page to use the new shared component instead of its inline pattern.

Considerations

Product → Category association: Medusa products can belong to multiple categories. Need to decide which category path to display (e.g., first category, or none if ambiguous). May require expanding the product query to include categories with parent hierarchy.

Collection vs. Category: Products can also be accessed via collections (/collections/[handle]). The breadcrumb path differs depending on entry point — consider using document.referrer or defaulting to Store as the parent.

Country code routing: LocalizedClientLink already handles this; breadcrumb hrefs should use plain paths (e.g., /store, /categories/handle).

Styling: Medusa UI doesn't ship a Breadcrumb component — custom Tailwind implementation needed, consistent with existing text-ui-fg-subtle patterns.

No test coverage exists for navigation components, so no tests to update.

Next Steps

Confirm whether product breadcrumbs should show a category path or just Home → Store → Product.

Check that the Medusa product query in src/lib/data/products.ts includes categories + parent_category fields.

Implement Breadcrumb component with crumbs prop + JSON-LD output.

Integrate into ProductTemplate and refactor CategoryTemplate to use it.

Manually verify rendering across product, category, and collection pages.

This research was performed automatically by Claude Code. Feel free to discuss further in the comments.

Implement due to aligned solution

@claude-code > ## Research Findings > > I've explored the codebase and researched this idea. Here's what I found: > > **Current State** > > No breadcrumb component exists. However, the category page (`/src/modules/categories/templates/index.tsx`) contains a **manual inline breadcrumb pattern** — it recursively walks `parent_category` links and renders them inline. This is the closest existing implementation. Product, collection, and store pages have no breadcrumb at all. > > --- > > **Proposed Approach** > > 1. **Create a reusable `Breadcrumb` component** at `src/modules/common/components/breadcrumb/index.tsx` accepting a `crumbs: { label: string; href?: string }[]` prop. Use `LocalizedClientLink` for links (handles country code prefix automatically). > > 2. **Add JSON-LD structured data** (`BreadcrumbList` schema) inside the component for SEO benefits — this is a standard best practice for e-commerce product pages. > > 3. **Wire it into the product template** (`src/modules/products/templates/index.tsx`): > - Build crumbs: `Home → Store → [Category if available] → [Product title]` > - Product data already flows through the template; category association may need to be fetched via the product's `categories` field from Medusa SDK. > > 4. **Refactor the category page** to use the new shared component instead of its inline pattern. > > --- > > **Considerations** > > - **Product → Category association**: Medusa products can belong to multiple categories. Need to decide which category path to display (e.g., first category, or none if ambiguous). May require expanding the product query to include `categories` with parent hierarchy. > - **Collection vs. Category**: Products can also be accessed via collections (`/collections/[handle]`). The breadcrumb path differs depending on entry point — consider using `document.referrer` or defaulting to `Store` as the parent. > - **Country code routing**: `LocalizedClientLink` already handles this; breadcrumb hrefs should use plain paths (e.g., `/store`, `/categories/handle`). > - **Styling**: Medusa UI doesn't ship a `Breadcrumb` component — custom Tailwind implementation needed, consistent with existing `text-ui-fg-subtle` patterns. > - **No test coverage exists** for navigation components, so no tests to update. > > --- > > **Next Steps** > > 1. Confirm whether product breadcrumbs should show a category path or just `Home → Store → Product`. > 2. Check that the Medusa product query in `src/lib/data/products.ts` includes `categories` + `parent_category` fields. > 3. Implement `Breadcrumb` component with `crumbs` prop + JSON-LD output. > 4. Integrate into `ProductTemplate` and refactor `CategoryTemplate` to use it. > 5. Manually verify rendering across product, category, and collection pages. > > --- > *This research was performed automatically by Claude Code. Feel free to discuss further in the comments.* Implement due to aligned solution

gitea-actions referenced a pull request that will close this issue

2026-03-30 11:13:33 +00:00

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

gitea-actions referenced this issue from a commit

2026-03-30 11:13:33 +00:00

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

gitea-actions commented

2026-03-30 11:13:33 +00:00

I've analyzed this bug and implemented a fix.

Pull Request: PR #38

Please review the changes and merge when ready. If the fix doesn't fully address the issue, feel free to leave a comment and I'll take another look.

I've analyzed this bug and implemented a fix. **Pull Request:** [PR #38](https://gitea.vibentec-it.io/Shop/Shop-Storefront/pulls/38) Please review the changes and merge when ready. If the fix doesn't fully address the issue, feel free to leave a comment and I'll take another look.

gitea-actions commented

2026-03-30 11:14:46 +00:00

Research Findings

I've explored the codebase and researched this idea. Here's what I found:

I need your approval to edit the file. The implementation is otherwise complete — here's a summary:

Current State

The breadcrumb feature is fully implemented on this branch:

src/modules/common/components/breadcrumb/index.tsx — reusable Breadcrumb component with crumbs prop, LocalizedClientLink, and JSON-LD BreadcrumbList structured data
src/modules/categories/templates/index.tsx — already uses Breadcrumb (walks parent_category chain)
src/modules/products/templates/index.tsx — already uses Breadcrumb (builds Home → Store → [Category] → Product)

One Gap Found

The product page route (src/app/[countryCode]/(main)/products/[handle]/page.tsx) fetches the product without including categories in the fields query. This means product.categories?.[0] is always undefined, so the category step is silently dropped from the breadcrumb.

Required Fix

Add +categories,+categories.parent_category to the fields string in the listProducts call at line 93–96 of the product page file. I have the edit ready — please approve it so I can apply it.

Proposed Approach

  const pricedProduct = await listProducts({
    countryCode: params.countryCode,
-   queryParams: { handle: params.handle },
+   queryParams: {
+     handle: params.handle,
+     fields:
+       "*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags,+categories,+categories.parent_category",
+   },
  }).then(({ response }) => response.products[0])

Considerations

Products with multiple categories: template uses categories?.[0] — first category wins. This is acceptable for now.
No test coverage to update.

Next Steps

Apply the fields fix above (one line change).
Manually verify: product with a category shows Home / Store / CategoryName / ProductTitle; product without category shows Home / Store / ProductTitle.
Merge fix/issue-17 into main.

This research was performed automatically by Claude Code. Feel free to discuss further in the comments.

## Research Findings I've explored the codebase and researched this idea. Here's what I found: I need your approval to edit the file. The implementation is otherwise complete — here's a summary: --- **Current State** The breadcrumb feature is fully implemented on this branch: - `src/modules/common/components/breadcrumb/index.tsx` — reusable `Breadcrumb` component with `crumbs` prop, `LocalizedClientLink`, and JSON-LD `BreadcrumbList` structured data - `src/modules/categories/templates/index.tsx` — already uses `Breadcrumb` (walks `parent_category` chain) - `src/modules/products/templates/index.tsx` — already uses `Breadcrumb` (builds `Home → Store → [Category] → Product`) **One Gap Found** The product page route (`src/app/[countryCode]/(main)/products/[handle]/page.tsx`) fetches the product without including `categories` in the fields query. This means `product.categories?.[0]` is always `undefined`, so the category step is silently dropped from the breadcrumb. **Required Fix** Add `+categories,+categories.parent_category` to the fields string in the `listProducts` call at line 93–96 of the product page file. I have the edit ready — please approve it so I can apply it. **Proposed Approach** ```diff const pricedProduct = await listProducts({ countryCode: params.countryCode, - queryParams: { handle: params.handle }, + queryParams: { + handle: params.handle, + fields: + "*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags,+categories,+categories.parent_category", + }, }).then(({ response }) => response.products[0]) ``` **Considerations** - Products with multiple categories: template uses `categories?.[0]` — first category wins. This is acceptable for now. - No test coverage to update. **Next Steps** 1. Apply the fields fix above (one line change). 2. Manually verify: product with a category shows `Home / Store / CategoryName / ProductTitle`; product without category shows `Home / Store / ProductTitle`. 3. Merge `fix/issue-17` into `main`. --- *This research was performed automatically by Claude Code. Feel free to discuss further in the comments.*

Sign in to join this conversation.