Configuring UI Options

var options = {
uiOptions: {
/*
* Groups are filters that pertain to a category that a product belongs to
* (i.e. Apple in Fruits). Selecting or deselecting a group will cause an
* 'update.request' event.
*/
groups: {
selector: "#groups",
renderGroup: (props) => {},
renderGroupParent: (props = {}),
renderGroupHeader: (props) => {},
},
/*
* Facets are filters that usually relate to a product's brand, size, color,
* etc. Selecting or deselecting a facet will cause an 'update.request' event.
*/
facets: {
selector: "#facets",
renderFacetHeader: (props) => {},
renderFacetOption: (props) => {},
renderFacetOptionsExpander: (props) => {},
optionsPerFacet: 10,
},
/*
* Selected facets are filters that are currently selected. Clicking
* on a selected facet will cause an 'update.request' event and remove
* it from the current filter list.
*/
selectedFacets: {
selector: "#applied-facets",
renderSelectedFacetOption,
},
/*
* Clear facets allows the user to clear all selected facets.
* Clicking on a clear facets element will cause an 'update.request' event.
*/
clearFacets: {
selector: "#clear-facets",
renderClearFacets,
},
/*
* Pager allows the user to choose how many results are displayed.
* Selecting a new number of results per page will cause an 'update.request' event.
*/
pager: {
selector: "#pager",
resultsPerPageOptions: [20, 40, 60],
renderPager: (props) => {},
renderPagerLabel: (props) => {},
renderPagerBefore: () => null,
renderPagerAfter: () => null,
},
/*
* Pagination displays page navigation. Selecting a new page will cause
* an 'update.request' event.
*/
pagination: {
selector: "#paginator",
renderPreviousPage: (props) => {},
renderFirstPage: (props) => {},
renderPage: (props) => {},
renderPageSpacer: (props) => {},
renderLastPage: (props) => {},
renderNextPage: (props) => {},
},
/*
* Pagination header displays the current page and number of results shown
*/
paginationHeader: {
selector: "#pagination-header",
renderPaginationHeader: (props) => {},
},
/*
* Header displays the term and number of results returned for the
* current search query
*/
header: {
selector: "#results-header",
renderHeader: (props) => {},
},
/*
* Setting infinite scroll to true will display more results when the user
* scrolls to the bottom of the page. If this happens it will cause a
* 'received.results' event.
*/
infiniteScroll: false,
/*
* Results displays the actual search results. Each search result is
* rendered individually by the rendering function. Clicking anywhere on a
* result will cause a 'clicked.result' event.
*/
results: {
selector: "#results-list",
renderResult: (props) => {},
},
/*
* Zero Results displays when there are no results for a search query after
* the client receives a response from the server
*/
zeroResults: {
selector: "#zero-results",
renderZeroResults: (props) => {},
},
/*
* Sections gives customers the opportunity to display data from additional
* sections ingested by Constructor.io, such as displaying product
* categories related to a term in addition to products. Clicking
* anywhere on a section result will cause a 'clicked.sectionResult' event.
*/
sections: {
categories: {
maxResults: 8,
sectionName: "Categories",
selector: "#category-results",
renderSectionHeader: (props) => {},
renderSectionResult: (props) => {},
},
},
/*
* Sort Options allows users to choose which order the search results are displayed in.
* Selecting a new sort option will cause an 'update.request' event.
*/
sortingOptions: {
selector: "#sorting",
renderSortingOption: (props) => {},
renderSortingOptionsLabel: (props) => {},
renderSortingOptionsBefore: () => {},
renderSortingOptionsAfter: () => {},
},
/*
* Voice Search allows users to search by voice input (if available in browser)
* Searching by voice will cause an 'update.request' event.
*/
voiceSearch: {
trigger: "#search-mic",
selector: "#voice-modal",
renderVoiceModal: (props) => {},
},
/*
* Loading displays when the client is fetching results from the server
*/
loading: {
selector: "#search-loader",
renderLoading: (props) => {},
},
/*
* Error displays when the client has not been able to fetch results
* from the server for any reason.
*/
error: {
selector: "#error",
renderError: (props) => {},
},
},
};
/*
* Create the client with new options
*/
var search = new ConstructorioSearch.default(options);

There are many options for the search client. Most of the options involve instructing the search client to render a specific component inside of a designated HTML element on the search page. Every option is optional. If an option is missing then the search client does not render that component. On the right is a comprehensive list of the current options we support.

Note that all rendering functions must return either a React Component or an HTML string. If a renderer returns an HTML string it will be run through a sanitizer before rendering for security reasons.

Additionally, all rendering functions take a single argument, props, of type object. The individual keys on that object vary by rendering function.

If any option is incorrectly configured for the client, a warning will show up in the JavaScript console and that option will be ignored.

Below is an example of rendered components on a page.

Search Example