JS Library

Events are defined using build. Each event will execute from the time of creation for maxCount times with an interval of delay or until the event evaluates to true via the fire function. This allows us to check that everything is ready before triggering the rest of our functionality, via event listeners or observers.

When the conditions of this event have been satisfied any listeners attached to this event will fire.



For example, the following event listener associates an HTML template with the search box, klevuAutoSuggestTarget.

Note that is is attached to the event defined as klevuExampleEvent



Another event listener will perform the more interesting parts, which is where we introduce the concept of chains in Klevu JavaScript Library to:

• specify some data to retrieve during the Klevu API request.
• specify what to do with that data when the response comes back.

For example, the below is an addition to the API request.build chain to include autosuggestions (with a count of 5) in the query response.

The next example adds to the template.render chain, to populate the page with our klevuAutoSuggestTarget template when the result contains autosuggestion data.



Putting all of the above concepts together, we have a simple HTML search box which will produce auto-suggestion terms, products, categories and CMS via the Klevu API when typing. We recommend doing this with the network tab open so you can see the API requests and responses.

Try it yourself by clicking here: https://jsfiddle.net/klevu/dhy8t6s0/29