Step 1: Generate Types for Search Verticals

Navigate to the src folder of your project and run the following command

yext types generate search --experienceKey YOUR-EXPERIENCE-KEY

The example below shows the structure that is generated for a search experience with a faqs, locations, product category, and products vertical.

types
 ┣ faqs.ts
 ┣ locations.ts
 ┣ product_category.ts
 ┗ products.ts

The rest of this guide will focus on the products vertical. This vertical includes the built-in product entity. The actual type generated contains dozens of fields along with a series of other interfaces and enums that are needed to represent the built-in entity. Below is a condensed version of products.ts :

// src/types/products.ts

export enum Condition {
  NEW = "New",
  REFURBISHED = "Refurbished",
  USED = "Used",
}

// ...other enums such as CurrencyCode

export interface Price {
  value?: number;
  currencyCode: CurrencyCode;
}

export interface EntityReference {
  entityId: string;
  name: string;
}

export interface ImageThumbnail {
  url: string;
  width: number;
  height: number;
}

export interface Image {
  url: string;
  width: number;
  height: number;
  thumbnails?: ImageThumbnail[];
  alternateText?: string;
}

export interface ComplexImage {
  image: Image;
  details?: string;
  description?: string;
  clickthroughUrl?: string;
}

// ...other interfaces such as StockStatus and ShippingHeight

export interface Product {
  condition?: Condition;
  price?: Price;
  name: string;
  photoGallery?: ComplexImage[];
  id: string;
  // ...other fields such as color and shippingHeight
}

You can see that each enum and interface is automatically exported by the file.

<% elem.innerText %>