Display product metafields as Properties on PDP

[Cichorek]

Changes

• Added ProductMetafields component to render product metafields as a "Properties" section on the product details page

  • Supports multiple metafield types: Boolean, Json, RichText, and string values
  • Normalizes type names by extracting the last segment after :: delimiter
  • Renders metafield name and value in a definition list layout

• Updated ProductDetailsWrapper to expand the metafields relation when fetching product data

• Integrated metafields display into ProductDetails component, positioned before the "Details" section

Features

• Type-aware rendering with custom handling for Boolean (Yes/No), Json, and RichText values
• Graceful fallback when no metafields are present
• Styled consistently with existing product detail sections

Summary by CodeRabbit

• New Features
  • Added a "Properties" (Metafields) section to product pages showing product metadata and custom attributes in a readable layout.
  • Product pages now include additional product metadata so the new Properties section is populated when available.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cc00695e-cd45-461e-b950-a01817b876c5

📥 Commits

Reviewing files that changed from the base of the PR and between e3b3bbd and a553050.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

• src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx
• src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx
• src/components/products/ProductMetafields.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx

---

Walkthrough

Adds a new ProductMetafields component and integrates it into the product details page; the product fetch now requests metafields so the UI can render a “Properties” section with type-specific formatting.

Changes

Cohort / File(s)	Summary
Metafields Display Component src/components/products/ProductMetafields.tsx	New exported component that renders product metafields as a definition list when present. Formats values by normalized type (Boolean → "Yes"/"No", Json, RichText via dangerouslySetInnerHTML, fallback to string).
Product Page Integration src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx, src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx	ProductDetailsWrapper adds "metafields" to the expand array when fetching the product. ProductDetails imports and renders ProductMetafields, inserting the metafields section between Description and Details.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through fields of hidden lore,
Metafields shining by the store,
Booleans, rich text, JSON bright,
I nibbled values into sight —
Hooray for properties, and more!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding a new component to display product metafields as a Properties section on the product details page (PDP).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch PDP-Metafields

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/products/ProductMetafields.tsx`:
- Around line 11-26: Add explicit TypeScript return types: declare renderValue
to return React.ReactNode (or string | JSX.Element), declare normalizeType to
return string, and give ProductMetafields an explicit
React.FC<ProductMetafieldsProps> (or function component returning JSX.Element)
return type. Update signatures for renderValue(metafield: Metafield,
normalizedType: string): React.ReactNode, normalizeType(...): string, and
ProductMetafields({ metafields }: ProductMetafieldsProps): JSX.Element (or
React.FC<ProductMetafieldsProps>) so the component and helpers have strict,
explicit return contracts and avoid implicit any.
- Around line 19-20: The RichText branch in renderValue is injecting
metafield.value via dangerouslySetInnerHTML without sanitization and renderValue
lacks an explicit TypeScript return type; fix by adding HTML sanitization before
DOM injection (install and import a sanitizer like isomorphic-dompurify or call
a shared sanitizeHtml helper) and use the sanitized string in the <span
dangerouslySetInnerHTML={{ __html: sanitizedValue }} />; alternatively, if you
opt to rely on backend guarantees, add a clear comment and type-level assertion
to document that guarantee. Also add an explicit return type to renderValue
(e.g., React.ReactNode) and audit ProductDetails.tsx where product.description
is similarly injected to apply the same sanitization or documentation pattern.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1ad973e2-9da6-4f70-8275-a07aa591bca9

📥 Commits

Reviewing files that changed from the base of the PR and between bbaaa8d and e3b3bbd.

📒 Files selected for processing (3)

• src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx
• src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx
• src/components/products/ProductMetafields.tsx