Constructor.io Search Client Documentation

/*
* Initialize the custom client with all of the preconfigured options
*/
var search = new ConstructorioSearch.default({});
/*
* Perform a search on initial page load
*/
window.addEventListener("load", function () {
search.requestResults();
});

The Constructor.io JavaScript search client renders a user interface for displaying, navigating, and filtering search results.

The search client renders specific UI components into designated HTML elements on your search page. The search client also provides event handlers for you to respond to user actions.

Every Constructor.io customer gets their own customized version of the search client with preconfigured UI options to match their existing search page (these options can be overridden). The simplest integration on a search page therefore looks like the code on the right.

Adding the search client script to your search page will automatically inject a minimal set of styles onto your page. These styles will only reference those areas of the search page that the search client renders.

Browsing Products#

/*
* Create a Browse client
*/
var browse = ConstructorioSearch.browse(options);

To search within a group of products without a term, use the browse client. The browse client is different from the search client in that it assumes a different page URL structure and different UI options.

The browse client is instantiated in a similar way to the original search client and also accepts the same set of UI options.

Please refer to the dispose() method below when using multiple client instances in a single page application.

Disposing a Client#

/*
* Dispose of the client and clean up all event listeners
*/
search.dispose();

When using multiple client instances in a single page application and switching between them, we'll need to do some clean up so we don't pollute the event listeners. On each URL change, you can dipose of the old client and instantiate a new one that is relevant to the page. This will prevent any conflicts between the clients.

Debugging#

/*
* Get configuration information
*/
search.help();

The search client uses the React Framework. One easy way to debug it is to use the React Developer Tools. You may also use the help() function, which will output useful information about the client's configuration to the browser console.