feat(pdp): add product detail page block by dylandepass · Pull Request #1 · aemsites/catused

dylandepass · 2026-09-17T01:32:56Z

Fix #

Renders the PDP from product-pipeline markup and the JSON-LD custom payload, covering the gallery, purchase card, specifications, condition report and similar listings at both breakpoints.

The hero image is flipped to eager with a media-scoped preload and then moved rather than cloned into the gallery, so the LCP candidate is fetched exactly once and the painted node is the one already in flight. The pipeline emits every image as loading="lazy", including the first, so without this nothing fetches the LCP candidate at all.

Also scopes header { height } to body > header. The bare selector matched any <header> a block renders inside <main>, clamping it to the nav height and clipping its content. Clears the remaining stylelint debt so npm run lint passes repo-wide.

Test URLs:

Before: https://main--catused--aemsites.aem.live/
After: https://pdp--catused--aemsites.aem.live/

Product pages only render on the pipeline origin, so the PDP itself is best reviewed at:

https://pdp--catused--aemsites.aem.network/products/cat-314elcr-10000810

Notes for review

scripts.js — prioritizeHeroImage() runs from the first line of loadEager before any await. buildPDPBlock() identity-checks the document's own <main>, because loadFragment also runs decorateMain over nav and footer fragments.
Mocked data is marked MOCK: in source: protections, attachments, spec groups, stats bar, similar listings, and per-item condition detail for 11 of 12 categories. Real: title, price, year, hours, serial, dealer, location, accessories, condition grades, undercarriage wear.
Known gap: prices render as USD regardless of priceCurrency, and this listing is SGD. widgets/equipment-search/currencies.json landed on main in parallel and is probably the shared source of truth to wire in.

Renders the PDP from product-pipeline markup and the JSON-LD custom payload, covering the gallery, purchase card, specifications, condition report and similar listings at both breakpoints. The hero image is flipped to eager with a media-scoped preload and then moved rather than cloned into the gallery, so the LCP candidate is fetched once and the painted node is the one already in flight.

A bare `header { height }` selector also matched any <header> a block renders inside <main>, clamping it to the nav height and clipping its content; scoping it to `body > header` fixes that class of bug for every block. Also drops a redundant deprecated `clip` fallback and annotates the carousel's no-descending-specificity warnings, which all compare selectors with disjoint ancestor chains, so `npm run lint` passes repo-wide.

aem-code-sync · 2026-09-17T01:33:00Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run all PSI checks
Re-run failed PSI checks
Re-sync branch

Commits

3e25e9a ✅ (latest)
0867c07 ✅
783a066 ✅

aem-code-sync · 2026-09-17T01:33:20Z

	Page	Scores	Audits	Google
📱	/
🖥️	/
📱	/products/cat-314elcr-10000810
🖥️	/products/cat-314elcr-10000810

Replaces the pointer-delta swipe with a CSS scroll-snap track, so dragging, momentum, rubber-banding and snapping all come from the browser and stay on the compositor; the hero picture is still moved rather than cloned into the first slide, keeping the LCP element stable and fetched once. The sticky purchase bar now stays hidden while the inline Contact Dealer button is still reachable and only appears once it scrolls above the viewport, since direction-aware hiding would withdraw the call to action from exactly the engaged readers most likely to act on it.