Implementation considerations

There are two different approaches when it comes to implementing the Suggest functionality into your architecture:

1. Front-end integration

This is where the user's browser/device interacts with the Attraqt Suggest API directly

2. Back-end integration

This is where your web application interacts with the Attraqt Suggest API and updates the user's browser/device 

 

When considering option 1 above, it is important to consider that cross-origin resource sharing (CORS) errors can cause problems with the integration. This is because the JSON responses will be delivered directly from the Attraqt endpoint, which is outside of the Customer domain. If there is a need to get the JSON response from a server running in different domain, then an approach known as JSONP can be considered. The idea is to add an additional parameter to the HTTP request named 'callback' with the name of the JavaScript function which will receive the JSON response (as a string) with the suggestions as an argument and will be executed automatically at the end of the HTTP request.

Using Fredhopper reference implementation

Fredhopper provides a sample Ajax module which is based on the popular JavaScript library Prototype. The source code of the module can be provided by your CSM or Technical Consultant contact. Alternatively, if for example there are conflicts with other libraries, you can implement your own custom Ajax module to use Fredhopper Suggest. 

When using the JSONP with the Fredhopper reference there are two minor differences:

• the name of the Javascript class is Fredhopper.JsonpAutocompleter
• the servlet mapping is by default at "/jscript"

var autocompleter = new Fredhopper.JsonpAutocompleter('search','searchupdate','http://query.published.live1.suggest.eu1.fredhopperservices.com/<customer-name>/jscript',

Using plain JavaScript without using JavaScript libraries

/**
 * This is the function that will be called automatically with the JSON result as an argument.
 *
 * @param String jsonResponse - the response returned from Fredhopper Suggest Search service
 */
var searchCallback = function(jsonResponse) {

   var responseAsObject = eval(jsonResponse);

   //
   // use 'responseAsObject' to render the suggestions
   //

   // remove the temporary '<script>' element used to deliver the response
   var jsonpScript = document.getElementById('jsonpScript');
   jsonpScript.parentNode.removeChild(jsonpScript);
}

/**
 * This function can be used to make a JSONP call searching for some term
 *
 * @param String term - the search term for which Fredhopper Suggest Search service will return
 * suggestions
 */
var search = function(term) {

  var jsonpScript = document.createElement('script');
  jsonpScript.id = 'jsonpScript';
  jsonpScript.src = 'https://query.published.live1.suggest.eu1.fredhopperservices.com/<customer-name>/jscript?scope=//catalog01/en_GB&callback=searchCallback&search=' + term;
  document.getElementsByTagName('head')[0].appendChild(jsonpScript);
}

The HTML snippet to use this functionality looks like:

<input name="suggest" value="" autocomplete="off" onkeyup="search(this.value)" />