Configuration Objects
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. |
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. |
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. |
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. |
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.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>
Last modified 7mo ago