Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

TargetedBlock container

The TargetedBlock container wraps the conditional content.

Configurations

The TargetedBlock container provides the following configuration options:

OptionsTypeReq?Description
slots{Content: SlotProps}YesThe slot that provides the content to be displayed conditionally.
personalizationDataPersonalizationDataYesThe customer groups, segments, and cart rules that must be active for the block to render.
typestringNoSpecify this value when you want only the first Targeted Block of this type that matches the conditions to be displayed on the page.

Example

The following example demonstrates how to integrate the TargetedBlock container:

export default async function decorate(block) {
const blockConfig = readBlockConfig(block);
const {
fragment,
type,
segments,
groups,
cartRules,
} = blockConfig;
const content = (blockConfig.fragment !== undefined)
? await loadFragment(fragment)
: block.children[block.children.length - 1];
render.render(TargetedBlock, {
type,
personalizationData: {
segments,
groups,
cartRules,
},
slots: {
Content: (ctx) => {
const container = document.createElement('div');
container.append(content);
ctx.replaceWith(container);
},
},
})(block);
}