close

Filter

loading table of contents...

Personalization Hub Manual / Version 2307

Table Of Contents

4.3.4 Integrate p13n Experience into the Preview Context

  1. Incorporate the p13n experience as part of the preview context. To that end, expand first the interface PreviewContext in PreviewContextProvider.tsx:

    interface PreviewContext {
      previewDate?: string;
      previewP13NExperiences?: PreviewP13NExperiences;
      setExperience?: Function;
    }
    
    export interface PreviewP13NExperiences {
      variants?: string[];
    }
    
  2. Expand PreviewContextProvider to provide the experience context. Notice that the experience context is used as state. Later you will use the setExperience function to change the variant chosen by the experience or segment, which in turn will trigger a new rendering of the experience or segment content items.

    interface Props {
      previewDate?: string;
      previewP13NExperiences?: PreviewP13NExperiences;
    }
    
    export const PreviewContextProvider: React.FC<Props> = ({ children, previewDate, previewP13NExperiences }) => {
      const [exp, setExp] = useState(previewP13NExperiences);
      const previewContextValue: PreviewContext = {
        previewDate: previewDate,
        previewP13NExperiences: exp,
        setExperience: setExp,
      };
      return <previewDataContext.Provider value={previewContextValue}>{children}</previewDataContext.Provider>;
    };
    

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

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