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