Enrichment
This topic introduces you to the concept of enriching product pages in your storefront. You will learn how to add content blocks above or below a commerce block (or any other block).
Key concepts
Enrichment
Enrichment means to add content that strengthens the user experience of the drop-in on the webpage. When viewing a product’s details (via the product-details drop-in), the user experiences all the core features of the drop-in. However, all the other extra content on the page, like product recommendations, must be added in one of the ways described in this topic.
Content blocks
Content blocks are tables in a document that contain text, images, or other media. They are used to structure and organize content on a webpage. See Block collection for more information.
Commerce blocks
Commerce blocks are Edge Delivery Service blocks that contain drop-in components. Commerce blocks are used to add drop-in components like the product-details block that features a specific product.
Enrichment blocks
Enrichment blocks are specialized content blocks to dynamically display content above or below commerce blocks based on various conditions, including but not limited to product SKUs and category numbers.
Content positioning
Content positioning is the placement of content and enrichment blocks on a webpage. It includes the arrangement of content blocks above or below a commerce blocks. Positioning content inside a drop-in component is also possible using the slot API functions. The webpage structure is within a Word or Google docs file. This file includes tables that define content blocks, commerce blocks, and other HTML elements.
Add content blocks
The following steps show you how to enrich a commerce block by placing content blocks above or below it. The following example shows the default product-details document with a simple product recommendation block below it.
Open a commerce block document
Open the document that contains the commerce block you want to enrich. In the boilerplate starter content, open the products/default.docx to see an example of a product recommendation block below the product details block.
Add normal content or content blocks
Add a normal headings, text, images or content blocks above or below the commerce block in the document. You can copy content blocks (tables) from the AEM Sidekick Library and paste them into the document.
Preview and publish changes
Use AEM Sidekick to preview and publish the changes to see the content above or below the commerce block.
Add enrichment blocks
Enrichment blocks are used to add content above or below commerce blocks based on product and category numbers. The following steps show you how to enrich a commerce block by placing an enrichment block above or below it.
Create enrichment content
In Google Docs or SharePoint, add a new document to the enrichment folder. You can duplicate the product-banner document and rename it. Then add the content you want to display below the commerce block. For example, you can show a sale on watches for a specific product SKU as shown here:
Change the metadata values
Change the metadata values for the enrichment content to match the product SKUs or product categories for which you want your content to appear.
Preview and publish changes
Use AEM Sidekick to preview and publish the changes to see the content above or below the commerce block.
Summary
In this topic, you learned how to enrich drop-in components by adding Edge Delivery Services content and enrichment blocks above and below commerce blocks (powered by drop-in components).