Enriching drop-in components
This topic introduces you to the concept of enriching commerce blocks in the commerce boilerplate. You will learn how to add content blocks above or below a commerce block (or any other block). You will also learn how to add content to slots in a drop-in component using the slots API functions.
Big picture
Drop-in components can be enriched in the following ways:
- Add content blocks: Add new content blocks above or below the commerce block in the Word or Google document.
- Add enrichment blocks: Add an enrichment block below the commerce block in the Word or Google document.
- Add content to slots: Add content above or below slots in the drop-in component using the slots API functions.
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 PDP drop-in, as well as custom components like product recommendations and other commerce-related information on a webpage.
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.
Slot API functions
The slots API provides several functions to add content within a drop-in component by specifying a slot name and a position. The slot API provides functions to add content to specific positions above and below the slot, such as prepend and append. See the full list of slot API functions here: Understanding slots
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.
Add content to slots
The following steps show you how to enrich a commerce block drop-in by using the slots API functions to add content inside the drop-in component of a commerce block.
Open the commerce block JavaScript file
In your storefront’s GitHub project, open the JavaScript file for the commerce block’s drop-in component you want to change. For example, open the product-details.js file in the blocks/product-details folder.
Add content using the slots API functions
The slots for product details are defined in the ProductDetailsProps interface. Each slot comes with a set of primitive functions you can use to add content programmatically. For example, you can add a decoration to the product title and a ratings element using the Title slot as shown here:
return productRenderer.render(ProductDetails, { sku: getSkuFromUrl(), slots: { Title: (ctx) => { // title decoration const tagline = document.createElement('div'); tagline.classList.add('title-decoration'); tagline.innerHTML = 'WKND Essentials'; ctx.prependSibling(tagline);
const rating = document.createElement('div'); rating.classList.add('ratings'); rating.innerHTML = '⭐️⭐️⭐️⭐️⭐️'; ctx.appendSibling(rating); }, },});Summary
In this topic, you learned how to enrich drop-in components by adding content blocks above or below commerce blocks (powered by drop-in components) in a content document, adding enrichment blocks to commerce blocks, and adding content to slots using the slots API functions. You can now enrich your drop-in components with additional content to enhance the user experience on your webpage.