close

Filter

loading table of contents...

Personalization Hub Manual / Version 2301

Table Of Contents

4.3.5 P13N Variant Rendering of Experiences and Segments

  1. Create a new fileP13N.tsunder models/Banner. It contains a single function which returns the p13n variant that depends on the experience state.

    export const getP13NTargets = (self: P13NExperience): Array<CmTeasable> => {
      const { previewP13NExperiences } = usePreviewContextState();
      const previewP13Variants = previewP13NExperiences && previewP13NExperiences.variants;
      // previewP13Variants can be set to 'baseline' (preview 'eye' usecase)
      const p13nVariants = self && self.variants && self.variants.slice();
      const baseline = self && (self.baseline as CmTeasable);
      if (baseline) {
        p13nVariants?.push({ id: "baseline", target: baseline });
      }
      let p13nTargets = baseline && [baseline];
      if (previewP13Variants && p13nVariants) {
        p13nTargets = p13nVariants
          .filter((p13nVariant) => previewP13Variants.indexOf(p13nVariant.id) >= 0)
          .map((p13nVariant) => p13nVariant.target as CmTeasable);
      }
      //again when there are no variants left fallback to baseline
      if (p13nTargets.length === 0) {
        p13nTargets = baseline && [baseline];
      }
      return p13nTargets;
    };
  2. Create a container preview of the p13n experience document P13NExperience.asContainerPreview.tsx under components/FragmentPreview/views/:

    const getContainer = (items: Array<Dispatchable>, rootSegment: string): Slot => {
      return {
        items: items.map((item) => initializeBannerFor(item, rootSegment)).filter(notEmpty),
      };
    };
    
    const P13NExperienceAsContainerPreview: React.FC<IncludeProps<P13NExperience>> = ({ self, params }) => {
      const { rootSegment } = useSiteContextState();
      const Container = slotByName(params?.containerView as string);
      const p13NTargets = self && getP13NTargets(self);
      return <>{p13NTargets && <Container {...getContainer(p13NTargets, rootSegment)} />}</>;
    };
    export default P13NExperienceAsContainerPreview;

    This view uses the function getP13NTargets to render the chosen variant.

  3. Modify the function initializeBannerFor in models/Banner/Banner.ts

    ...
        } else if (type && type.indexOf("P13NExperience") >= 0) {
        const p13NTargets = getP13NTargets(self as P13NExperience);
        return initializeBanner(p13NTargets.at(0) as CmTeasableFragment, rootSegment);
        }
  4. Add the newly created container preview to the viewDispatcher in components/FragmentPreview/FragmentPreview.tsx

    viewDispatcher.addViewComponent(P13NExperienceAsContainerPreview, "P13NExperience", "asContainerPreview");

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.