store: consume catalog v2 — price-led product cards and detail page #36

New issue

Closed

opened 2026-08-24 08:27:40 +00:00 by yuris · 0 comments

yuris commented

2026-08-24 08:27:40 +00:00

Owner

Consume catalog v2 in apps/store, using the CSS classes the design-foundation step defined and writing no new CSS beyond token-based additions. Add lib/format.ts with formatIdr built on Intl.NumberFormat("id-ID") plus a test asserting the real output (Intl emits a non-breaking space after Rp). Reorder ProductCard to price-led — image, category, name, price (Hubungi kami when null), stock badge — dropping the description that makes the current grid so airy. On the product detail page add price, stock badge, brand, and part number, plus a Product JSON-LD block whose Offer is emitted only when price !== null, and switch related from matching type to matching category. Derive ProductBrowser's filters from the distinct catalog categories instead of three hardcoded buttons, and extend its search haystack with brand and partNumber. Export findService and the Service type from lib/services.ts so an unknown slug renders nothing rather than a dead link, and give each service page a capped "Sparepart yang dipakai" list.

Acceptance: pnpm --filter garage-store test and pnpm --filter garage-store build pass against a v2 catalog; a product page shows a formatted price and a valid Product JSON-LD block.

Consume catalog v2 in `apps/store`, using the CSS classes the design-foundation step defined and writing no new CSS beyond token-based additions. Add `lib/format.ts` with `formatIdr` built on `Intl.NumberFormat("id-ID")` plus a test asserting the real output (`Intl` emits a non-breaking space after `Rp`). Reorder `ProductCard` to price-led — image, category, name, price (`Hubungi kami` when null), stock badge — dropping the description that makes the current grid so airy. On the product detail page add price, stock badge, brand, and part number, plus a `Product` JSON-LD block whose `Offer` is emitted only when `price !== null`, and switch `related` from matching `type` to matching `category`. Derive `ProductBrowser`'s filters from the distinct catalog categories instead of three hardcoded buttons, and extend its search haystack with `brand` and `partNumber`. Export `findService` and the `Service` type from `lib/services.ts` so an unknown slug renders nothing rather than a dead link, and give each service page a capped "Sparepart yang dipakai" list. Acceptance: `pnpm --filter garage-store test` and `pnpm --filter garage-store build` pass against a v2 catalog; a product page shows a formatted price and a valid `Product` JSON-LD block.

yuris closed this issue

2026-08-24 10:14:35 +00:00

yuris referenced this issue from a commit

2026-08-24 10:34:16 +00:00

feat(store): consume catalog v2 — price-led product cards and detail page (#36)

yuris referenced this issue

2026-08-24 10:34:37 +00:00

feat(store): overhaul into a shop that can also install — design tokens, catalog v2, cart with WhatsApp checkout #39