Skip to main content Link Search Menu Expand Document (external link)

Received event types and values

When e.type is product_guide_step, you get the following value in e:

type EventValue = {
  /* -- This is translations that get autofilled with the default language if you are missing translations for something in the selected language -- */
  generalLocalizations: {
    /* -- These are labels for the products, you need to calculate where to show them  -- */
    bestDeal?: string;
    bestMatch?: string;
    lowestPrice?: string;

    /* -- This has to do with the products -- */
    loadMore?: string;
    productCta?: string;
    secondaryTitle?: string;

    /* -- Some buttons --*/
    restartButton?: string;
    skipButton?: string;
    submitButton?: string;
  };

  /* -- Some genral settings */
  setting: {
    /* -- The default language -- */
    fallbackLang: string;

    /* -- Should show load more products -- */
    loadMore: boolean;

    /* -- Should show progressbar -- */
    progressbar: boolean;

    /* -- Settings that are for the products -- */
    products: {
      productLayout: 'focus' | 'full' | 'grid';
      productDisplayVariant: 'single' | 'bundle' | 'grid' | 'best_match' | 'advanced';
    };
  };

  /* -- Some status of where you are in the guide -- */
  status: {
    /* -- The index for where you are in the guide -- */
    currentStep: number;
    /* -- The total number of steps in the guide -- */
    totalSteps: number;

    /* -- An array of all the the steps containing if they are visited or not. -- */
    steps: {id: string; name?: string; visited: boolean}[];
  };

  /* -- The information inside the step -- */
  step: DtProductGuideStep;

  /* -- The products, you wont get it everytime depnding on you settings in the builder -- */
  products?: {
    productItems: DtProductGuideProduct[];
    secondary?: Omit<DtProductGuideProduct, 'secondary'>[];

    canLoadMore: boolean;

    /* -- Has  in it that you can replace with. -- */
    currencyExpr: string;
  };
  
};

type DtProductGuideOption = {
  disabled: boolean;
  subtitle: string;
  title: string;
  uuid: string;
  metaData: Record<string, any>;
  image?: {
    name: string;
    source: string;
    thumbnail?: string;
  };
};
type DtStepType = 'options' | 'form' | 'result';
type DtFormInputType = 'string' | 'number';
type DtFormInput<T extends DtFormInputType = DtFormInputType> = {
  uuid: string;
  placeholder: string;
  title: string;
  subtitle: string;
  settings: {
    inputType: T;
  };
} & (
  | { settings: { 
        inputType: 'string';
        variant: 'field' | 'textarea'; 
        validation?: 'phone' | 'email' | 'none';
        allowedValues?: string[];
      } 
    }
  | { settings: { inputType: 'number' } }
);
type DtProductGuideStep<T extends DtStepType = DtStepType> = {
  uuid: string;
  type: 'step';
  disabled?: boolean;

  /* -- -- */
  name: string;
  image?: {
    name: string;
    source: string;
    thumbnail?: string;
  };
  title: string;
  subtitle: string;

  /* -- What type of step it is (form or options) -- */
  variant: T;

  required: boolean;

  /* -- How the image should look inside the options -- */
  imageType: 'image' | 'icon';

  last: boolean;

  /* -- This tells you if this step should show products or not -- */
  displayProducts: boolean;

  /* -- Some metadata that you can enter inside the builder, this can be whatever you want -- */
  metaData?: { [key: string]: string | number | boolean };

} & (T extends 'form'
  ? { variant: 'form'; userInputs: DtFormInput[] }
  : T extends 'result'
  ? { variant: 'result' }
  : {
      variant: 'options';
      options: DtProductGuideOption[];
      choice: 'single' | 'multiple';
      layout: 'two-columns' | 'three-columns' | 'four-columns' | 'compact';
    });

type DtProductGuideProduct = {
  name: string;
  id: string;
  image: string;
  url: string;
  price: number;
  salePrice?: number;
  description?: string;
  groupId?: string;
  brand?: string;

  /* -- Secondary products that match with this products. -- */
  secondary?: Omit<DtProductGuideProduct, 'secondary'>[];

  /* -- What it matched on, name is the translation for the key in the feed, matching is all the values it matched on for that key, values are all the values for that key -- */
  matchingTags?: { matching: string[]; name: string; values: string[] }[];

  distinct?: string;
}

If e.type is product_guide_products, you only get the product’s object without the secondary products. You will get this event when you load more. Read more about what you can send to us here!