feat(core): localized product URLs, breadcrumbs PDP and PLPs#3402
Draft
hellofanny wants to merge 1 commit into
Draft
feat(core): localized product URLs, breadcrumbs PDP and PLPs#3402hellofanny wants to merge 1 commit into
hellofanny wants to merge 1 commit into
Conversation
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
…3352) ## Summary Implements localized product links for FastStore stores with localization.enabled: true (PDP only — PLP localized slugs are handled separately). **it-IT** <img width="1907" height="1001" alt="image" src="https://github.com/user-attachments/assets/b78831db-edbd-4db3-96bb-0c67b4b6c20b" /> **pt-BR** <img width="1918" height="992" alt="image" src="https://github.com/user-attachments/assets/f357c607-a37d-41e2-b13a-abf25de2629d" /> ### Problem FastStore stores with localization enabled had three major issues on the PDP: 1. Localized product URLs (e.g. `/it-IT/adidas-polo-uomo-65/p`) returned 404 because the `Query.product` resolver's `startsWith` guard rejected slugs whose prefix didn't match the Intelligent Search `linkText` (always in the default locale). 2. Breadcrumb items were rendered as non-clickable `<span>` elements and `BreadcrumbJsonLd` was suppressed entirely. 3. The `LocalizationSelector` had no localized product URL to navigate to when the shopper switched locale. 4. After landing on a 404 from a locale switch, the LocalizationSelector lost the product context and couldn't recover the correct localized URL — and the 404 page showed the bare asPath instead of the full locale-prefixed URL. ### Changes @faststore/api - New clients/catalog/ client — uses the public catalog-dataplane/product/{id} endpoint (Accept-Language header, no AppKey/AppToken required) to fetch localized product data (linkId, category.fullPathUriName) per locale - Query.product resolver: when startsWith fails and localization is enabled, validates the slug prefix against the - - Catalog Dataplane linkId for the current locale before rejecting - New StoreProduct.otherLocales: [StoreProductLocale!] field — fires Promise.all over all configured locales to build localized slug entries; zero overhead for non-localized stores - StoreProduct.breadcrumbList resolver: now async; uses category.fullPathUriName from the Catalog Dataplane for localized category URL paths and linkId for the product URL; falls back to slugify(IS name) when no translation exists - productTranslationsCache in GraphqlContext.storage — request-scoped cache keyed by productId:locale shared across all three resolvers to avoid duplicate API calls @faststore/core - New `LocalizedProductContext` — React context that provides otherLocales from the PDP GraphQL response to - any component in the tree (including global components like LocalizationButton) - `useLocalizedProduct_unstable` exported from experimental/index.ts for store customization - `LocalizationButton` / `useBindingSelector`: uses otherLocales to redirect to the correct localized product URL on locale switch; falls back to the defaultLocale slug when no translation exists for the target locale - `useBindingSelector`: persists otherLocales to sessionStorage keyed by SKU id (fs:otherLocales:{skuId}) so the locale selector can recover the correct product URL even after the user lands on a 404 (where the page no longer provides otherLocales) - `Breadcrumb.tsx`: removed localization.enabled workaround — always renders <Link> now that localized URLs are available -`p.tsx`: restored BreadcrumbJsonLd for all locales + added hreflang alternate tags via NextSeo.additionalLinkTags (including x-default pointing to the root store URL) - `EmptyState`: the fromUrl shown on the 404 page now includes the active Next.js locale prefix (e.g. /it-IT/...) so shoppers see the full URL they attempted to visit ### Architecture note The Catalog Dataplane is called once per product+locale combination. For otherLocales (all locales) and breadcrumbList (current locale only), results are shared via productTranslationsCache. A future optimization — replacing the Promise.all with a single "all-locales" endpoint from the Catalog team — would be a contained 2-file change with no behavior impact. The sessionStorage persistence in `useBindingSelector` uses a fs:otherLocales:{skuId} key and is intentionally session-scoped (cleared on tab close). It is a best-effort fallback; the locale selector always prefers live otherLocales from context when available. ## Test plan try using `brandless` acc - [ ] Visit a localized PDP (e.g. `/it-IT/{localized-slug}-{skuId}/p`) — page renders correctly eg. /adidas-mens-performance-polo-blast-blue-65/p -> switch to it-IT locale! You will be able to see the slug localized. - [ ] Visit a non-localized locale PDP (e.g. `/pt-BR/{default-slug}-{skuId}/p`) — page renders correctly (fallback path) eg. select en-CA - [ ] PDP breadcrumb items are clickable `<Link>` elements with localized category URLs - [ ] 2-level category hierarchy breadcrumb builds correct intermediate paths - [ ] `LocalizationSelector` navigates to the correct localized product URL for each locale - [ ] `LocalizationSelector` falls back to the default locale slug for locales without a translation - [ ] `hreflang` tags appear in `<head>` for all configured locales + `x-default` (lists only the `availableLinkIds`) <img width="1086" height="181" alt="Screenshot 2026-06-11 at 16 33 23" src="https://github.com/user-attachments/assets/e1dc0ed0-3332-492b-9a1d-84a33c3a1eb4" /> <img width="498" height="178" alt="Screenshot 2026-06-11 at 16 37 36" src="https://github.com/user-attachments/assets/6f52bb39-9211-4ece-8462-14e0841d6115" /> - [ ] `BreadcrumbJsonLd` appears in page source for all locales - [ ] Non-localized stores (`localization.enabled: false`) — no regression, no extra API calls - [ ] Switch locale on a PDP → land on a 404 → LocalizationSelector still shows/navigates to correct localized URLs for all locales - [ ] 404 page fromUrl displays the full locale-prefixed path (e.g. /it-IT/some-product/p) [Spec file for more information](vtex/faststore-dx-spec-kit#15) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Product pages now expose `otherLocales` via a dedicated localization context/provider. * Product pages generate multi-locale SEO `hreflang` alternate links. * Added localized VTEX catalog support to fetch locale-specific product/category details. * **Improvements** * Breadcrumbs now use localized category/product path segments when available and consistently render as links. * Locale-aware product slug validation and PDP redirects that use cached or persisted `otherLocales`. * Added request-scoped caching for localized product lookups. * **Tests** * Expanded coverage for PDP locale parsing plus `otherLocales` persistence/recovery behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
hellofanny
force-pushed
the
feat/localized-slugs-links
branch
from
92bc71f to
ae5b6fe
Compare
@faststore/api
@faststore/cli
@faststore/components
@faststore/core
@faststore/diagnostics
@faststore/lighthouse
@faststore/sdk
@faststore/ui
commit: |
|
hellofanny
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Localized Slugs Links Feature
PDP localized slugs feat(core): localized product URLs, breadcrumbs and hreflang for PDP #3352
PLP localized slugs feat: replace pagetype with by-linkid cascade + localized PLP/collection pages #3401