Autosuggest client-side configuration - Bloomreach Experience - Open Source CMS
Hippo CMS

Autosuggest client-side configuration

Configuring Autosuggest

Define the following variable in render.js with the appropriate configurations for Autosuggest:

Variable in render.js

var autosuggestConfig = {
    accountId: <Bloomreach Provided Account ID>,
    authKey: '',
    domainKey: 'merchant_com',
    environment: 'staging',
    resultContainer: '.brm-autosuggest-menu',
    searchButton: '#search-button',
    clearButton: '#brm-clear-btn',
    render: false,
    responseCallback: function(items) {
    }
    searchCallback: function(searchUrl, searchData) {
    }
};

Autosuggest provides several types of suggestions

Autosuggest can include query suggestions, query associated category filters, or product suggestions.

Irrespective of the set of features enabled, the set of library methods are the same. The client-side library internally handles the difference in responses.

 

Autosuggest configuration parameters

This table provides a list of each parameter and a description. Use these parameters to configure your client-side integration.

Parameter Name

Required

Type

Description

Example
accountId Required integer

The ID of the account sending the request. Your Bloomreach integration team provides this ID to you.

 8422
authKey Required string The authentication key for the account sending the request. You must pass this parameter, but you can send it empty for client-side integration. Your Bloomreach integration team provides this key to you. 3c641ab5b543cb3a642da
domainKey Required string The ID of the domain receiving the request. Your Bloomreach integration team provides this key to you. debshops_com
environment Required string (enum)

The string that determines which server to retrieve data from. Use one of the following values:

  • 'staging' is your test environment.
  • 'prod' is your production environment. It's not a good idea to move new code to 'prod' without first testing it on 'staging'.

Don't forget to use the single quotes ( ' ) around the string; they aren't optional.

 'staging'

titlelength

(In Pilot Phase)

 Optional integer

Determines the length of the product title displayed in the suggestion. Titles that exceed this value are truncated with an ellipsis appended to the end.

Example before truncating: Elie Tahari York Sleeveless Watercolor Maxi Dress, Multi Colors

Example after truncating at 30 characters: Elie Tahari York Sleeveless Wa...

 30
delay Optional integer

The number of milliseconds between a keystroke and a suggestion request. Multiple keystrokes within the delay cause Autosuggest to wait until the last keystroke before requesting suggestions.

 500
maxSuggestResults Optional integer The maximum number of suggestions for Autosuggest to display. The default value is 10. 10
minLength Optional integer The minimum number of characters users must type before Autosuggest requests suggestions. The default value is 1. 1
render Optional boolean

A flag to enable and disable rendering by the Autosuggest plugin. If you disable rendering, then you need to use the responseCallback parameter to handle suggestions with your own functions. Set the value to true to enable rendering or false to disable rendering. The default value is true.

 true
responseCallback Optional function

Specifies a function to trigger when suggestions are received from the data source. Autosuggest calls this function before rendering suggestions.

  
resultContainer Optional  

The CSS selector that identifies the element where the suggestions menu is rendered. If render is set to false, the resultContainer has no effect. If render is set to true, but the resultContainerparameter doesn't match any elements, then the plugin appends the default container to the DOM.

The default value is '.brm-autosuggest-menu'.

 '.brm-autosuggest-menu'
searchButton Optional  

The CSS selector that identifies the element that listens for click events. When your customers select a suggestion, the plugin submits a search for the query that's in the Autosuggest field.

  
clearButton Optional  

A CSS selector that identifies the element to listen for click events. If your customers reject suggestions, then the plugin clears the Search box text and closes the Autosuggest field.

If provided and found, then the plugin will clear the search box text and close the autosuggest field

  
searchCallback Required function

A function that the plugin calls when your customer submits a search from the Autosuggest field, menu, or button. The function is called with two arguments: the hash fragment used by the Bloomreach Commerce Search Plug-in to perform the search, and a data object describing the search in the search data format.

  
onFocusCallback Required function

A function that the plugin calls when your customer focuses on search input. The function is called with one argument: the event object. This callback is useful to adjust the scroll position on focus. If this option is not set, then the default behavior scrolls the search input to the top of the screen. Setting the onFocusCallbackfunction overwrites the default behavior.

  

 

Detailed information

responseCallback parameter

Specifies a function to trigger when suggestions are received from the data source. Autosuggest calls this function before rendering suggestions. Here's the workflow:

  1. The Autosuggest plugin and br-mob.js call the Autosuggest API to retrieve suggestions for your customer.
  2. The Autosuggest plugin receives a response from the Autosuggest API with data to show your customer.
  3. If configured, then the Autosuggest plugin calls the responseCallback function. If not configured, then the plugin ignores the responseCallback function. 
Disclaimer for items marked, "In Pilot Phase" 

Please note that this product or feature is in pre-release “pilot phase” and is made available to select participants from time to time for the purpose of providing feedback on the quality and usability of the “pilot phase” product or feature (the “Pilot Products”). Pilot Products are still undergoing final testing and evaluation and ARE PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITHOUT ANY WARRANTIES, WHETHER EXPRESS OR IMPLIED, AS TO THE QUALITY, SUITABILITY, USABILITY MERCHANTABILITY, NON-INFRINGEMENT, ACCURACY, COMPLETENESS, PERFORMANCE AND FITNESS FOR A PARTICULAR PURPOSE OF THE PRODUCT OR FEATURE AND WILL NOT BE LIABLE FOR ANY LOSS, WHETHER SUCH LOSS IS DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL, SUFFERED BY ANY PARTY AS A RESULT OF THEIR USE OF THE PRODUCT OR FEATURE. Bloomreach is not obligated to offer any maintenance, technical or other support on the Pilot Products, continue to offer any Pilot Products, or announce or make available a commercial version of the Pilot Products to anyone in the future. Should a commercial version be made available, it may have features or functionality that are different from those found in the Pilot Products.

Should you encounter any bugs, glitches, lack of functionality or other problems with respect to the Pilot Products, please let us know immediately so we can rectify these accordingly. Your help in this regard is greatly appreciated.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?