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:
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:
- The Autosuggest plugin and br-mob.js call the Autosuggest API to retrieve suggestions for your customer.
- The Autosuggest plugin receives a response from the Autosuggest API with data to show your customer.
- If configured, then the Autosuggest plugin calls the responseCallback function. If not configured, then the plugin ignores the responseCallback function.
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.