Configuration Objects

Variables

The Variables is a simple key -> value pair object used for every search request. The proprties will vary based on your pipeline configuration but the most common implementations will use the following:

Value types can be string | string[] | number | boolean.

Name	Type	Default	Description
q	string	_	The search query.
q.override	string	_
q.suggestions	string	_	The autocomplete options for the search query.
filter	string	'_id != ""'	Default filter to apply.
resultsPerPage	number	15	How many results to display per page.
page	number	1	Which page to display.
maxSuggestions	number	10	How many autocomplete suggestions per search.

Config

The Config object defines mapping between key/value pair params to be sent with each and every request.

Name	Type	Default	Description
qParam	string	'q'	The key that includes a search query.
qOverrideParam	string	'q.override'
qSuggestionsParam	string	'q.suggestions'	The key that includes autocomplete options for the search query.
resultsPerPageParam	string	'resultsPerPage'	The key for how many results to display per page.
pageParam	string	'page'	The key for which page to display.
maxSuggestions	number	'maxSuggestions'	The key for how many autocomplete suggestions per search.

FieldDictionary

The FieldDictionary object is used to map fields in your data to the required fields to display in the UI. By default, the fields for a website search collection are used.

Name	Type	Default	Description
id	string	'_id'	Unique identifier for the record.
url	string	'url'	URL for the record, required for links in results.
title	string	'title'	The main title for the result.
subtitle	string	'url'	The subtitle. Often a brand, category, or the URL.
description	string	'description'	A description to display beneath the title and subtitle.
image	string	'image'	An image, if applicable.
price	string	'price'	A price, if applicable.
originalPrice	string	'originalPrice'	An original price, if applicable. If the value is more than price (or it's index if price & originalPrice are both arrays) then the original price will be displayed (with strikethrough) and the current price highlighted in red.
rating	string	'rating'	A rating, if applicable.

Theme

The Theme object is used to set basic color options for the UI. Currently this is only for the primary actions.

Name	Type	Default	Description
colors	{primary: {base: string, text: string, active: string}}	_	Set colors for primary actions.

Custom Class Names

The customClassNames property allows for adding CSS class names to components, enabling you to write custom styles to change the look and feel of the layout.

A list of components and available class names is available in the React Documentation.

To add custom classes, pass a configuration object with the class names to the customClassNames property.

<div data-widget="search-input">
  <script type="application/json">
    {
      "account": "1594153711901724220",
      "collection": "bestbuy",
      "pipeline": "query",
      "customClassNames": {
        "results": {
          "container": "custom-container-class",
          "item": "custom-item-class"
        }
      },
    }
  </script>
</div>
<script async src="https://cdn.search.io/embed/1/loader.js"></script>