Skip to content

Ability to change the layout of a PDP (modifying product-details block) - #1291

Draft
emipallares wants to merge 1 commit into
integrationfrom
USF-4109b
Draft

Ability to change the layout of a PDP (modifying product-details block)#1291
emipallares wants to merge 1 commit into
integrationfrom
USF-4109b

Conversation

@emipallares

@emipallares emipallares commented Jun 9, 2026

Copy link
Copy Markdown

What

Adds layout customization to the product-details block via a small in-block template registry. The block reads a template config and dispatches to a layout function defined alongside the block.

Ticket: https://jira.corp.adobe.com/browse/USF-4109
Wiki: https://wiki.corp.adobe.com/x/2hs_6Q

Related to #1290.

How

  • New template config property on the block selects which layout to apply.
  • After the static fragment is mounted (and before drop-ins render), the block looks up TEMPLATES[template] and calls apply(context) with references to the wrapper, columns and key DOM nodes (gallery, header, options, wishlist toggle, etc.) — the same context shape as the extension hook.
  • Each template lives in blocks/product-details/templates/<name>/ as a plain async (context) => void function plus a sibling CSS file. The block lazily injects a deduped <link rel="stylesheet"> for only the active template.

Included example templates

  • mirrored — swaps the buy-box and gallery columns on desktop.
  • editorial — reorders description/attributes and places the wishlist toggle next to the header.
image image

Notes

  • If template is missing or unknown, no custom layout is applied and the block renders with its default markup — identical fallback behavior to the extension solution.
  • Adding a new template = drop a <name>/<name>-template.{js,css} pair under templates/ and register it in templates/index.js.

How to test

  1. Open a PDP and confirm the default layout still renders unchanged.
  2. Set template: mirrored in the block config → buy-box on the left, gallery on the right (desktop).
  3. Set template: editorial → description and attributes appear under the header, and the wishlist toggle sits next to the title.

Test URLs:

…youts

- Introduced new templates for product details: editorial and mirrored.
- Implemented corresponding CSS styles for both templates.
- Enhanced the product-details.js to load and apply templates based on configuration.
- Added functionality to dynamically load template styles and structure product details accordingly.
@aem-code-sync

aem-code-sync Bot commented Jun 9, 2026

Copy link
Copy Markdown

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

@aem-code-sync

aem-code-sync Bot commented Jun 9, 2026

Copy link
Copy Markdown
Page Scores Audits Google
📱 / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant