TargetedBlock container

The TargetedBlock container wraps the conditional content.

Configurations

The TargetedBlock container provides the following configuration options:

Options	Type	Req?	Description
slots	{Content: SlotProps}	Yes	The slot that provides the content to be displayed conditionally.
personalizationData	PersonalizationData	Yes	The customer groups, segments, and cart price rules that must be active for the block to render.
type	string	No	Specify 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:

function prepareIds(providedIds) {
  return providedIds.split(',').map((num) => btoa(num.trim()));
}

export default async function decorate(block) {
  const blockConfig = readBlockConfig(block);

  const {
    fragment,
    type,
    'customer-segments': customerSegments,
    'customer-groups': customerGroups,
    'cart-rules': rules,
  } = blockConfig;

  const content = (blockConfig.fragment !== undefined)
    ? await loadFragment(fragment)
    : block.children[block.children.length - 1];

  const segments = customerSegments !== undefined ? prepareIds(customerSegments) : [];
  const groups = customerGroups !== undefined ? prepareIds(customerGroups) : [];
  const cartRules = rules !== undefined ? prepareIds(rules) : [];

  render.render(TargetedBlock, {
    type,
    personalizationData: {
      segments,
      groups,
      cartRules,
    },
    slots: {
      Content: (ctx) => {
        const container = document.createElement('div');
        container.append(content);
        ctx.replaceWith(container);
      },
    },
  })(block);
}