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>

Takeover Search Input Widget

Next - Fundamentals

Pipelines

Last modified 14d ago

Copy link

Outline