Instant Search

Usage

Use the following code for every keystroke shoppers perform in a searchbox. The callback function will contain the relevant searches, products and categories matching the shopper term:

Example

window.FastSimonSDK.instantSearch({
    query: "shirt",
    callback: (response) => {
        // handle search results
    },
    articlesCallback: (response) => {
        // handle article results
    }
}); 

Options

Option	Type	Description
query	string (required)	the query you want results for
withAttributes	boolean	include product attributes
withBadges	boolean	when true, appends a badges array to each product with the matched site badges. Automatically enables withAttributes.
withProductVariants	boolean	include product variants
withCategories	boolean	include categories
withProductTypes	boolean	include Product Types
callback	(Response) => void (required)	callback to handle the search results
articlesCallback	(ArticlesResponse) => void	callback to handle article results (requires is_content)

Response

Typescript Typing

interface Response {
  action: "instantSearch"
  payload: {
    totalResults: number,
    categories?: AutocompleteCategory[],
    products: AutocompleteProduct[]
    turbolinks: AutocompleteTurbolinks[]
    popularSearches: PopularSearch[]
    query: string
    }
}

interface ArticlesResponse {
  action: "instantSearchArticles"
  payload: {
    articles: ArticleResponse[]
    query: string
  }
}

interface ArticleResponse {
  l: string  // label/title of the article
  u: string  // URL of the article
  t: string  // type of the article
}

Reporting Implementation (must for analytics)

Please follow the guideline to report shopper behaviour on the recommendation widget in order to get accurate Analytics in the Fast Simon dashboard as well as greater personalized accuracy

1. Autocomplete Events