Guide
JS Library

8min
Overview
Build
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.
JS
|
klevu.coreEvent.build({
    name: "klevuExampleEvent",
    fire: function () {
        if (
            klevu.isUndefined(klevu.search.extraSearchBox)
            || (klevu.search.extraSearchBox.length == 0)
        ) {
            return false;
        } else {
            return true;
        }
    },
    maxCount: 500,
    delay: 30
});
klevu.coreEvent.build({
    name: "klevuExampleEvent",
    fire: function () {
        if (
            klevu.isUndefined(klevu.search.extraSearchBox)
            || (klevu.search.extraSearchBox.length == 0)
        ) {
            return false;
        } else {
            return true;
        }
    },
    maxCount: 500,
    delay: 30
});
﻿
When the conditions of this event have been satisfied any listeners attached to this event will fire. 
﻿
Attach
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
JS
|
klevu.coreEvent.attach("klevuExampleEvent", {
    fire: function () {
        klevu.each(klevu.search.extraSearchBox, function (key, box) {
            box.getScope().template.setTemplate(klevu.dom.helpers.getHTML("#KlevuTemplateAutoSuggestion"), "klevuAutoSuggestTarget", true);
        });
    }
});
klevu.coreEvent.attach("klevuExampleEvent", {
    fire: function () {
        klevu.each(klevu.search.extraSearchBox, function (key, box) {
            box.getScope().template.setTemplate(klevu.dom.helpers.getHTML("#KlevuTemplateAutoSuggestion"), "klevuAutoSuggestTarget", true);
        });
    }
});
﻿
﻿
Chains
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.
JS
|
box.getScope().chains.request.build.add({
    fire: function (data, scope) {
        var parameterMap = klevu.getSetting(scope.kScope.settings, "settings.search.map", false);
        var suggestion = klevu.extend(true, {}, parameterMap.suggestions);

        suggestion.id = "autosuggestion";
        suggestion.query = data.context.term;
        suggestion.typeOfRequest = "AUTO_SUGGESTIONS";
        suggestion.limit = 5; 

        data.request.current.suggestions.push(suggestion);
        data.context.doSearch = true;
    }
});
box.getScope().chains.request.build.add({
    fire: function (data, scope) {
        var parameterMap = klevu.getSetting(scope.kScope.settings, "settings.search.map", false);
        var suggestion = klevu.extend(true, {}, parameterMap.suggestions);

        suggestion.id = "autosuggestion";
        suggestion.query = data.context.term;
        suggestion.typeOfRequest = "AUTO_SUGGESTIONS";
        suggestion.limit = 5; 

        data.request.current.suggestions.push(suggestion);
        data.context.doSearch = true;
    }
});
﻿
The next example adds to the template.render chain, to populate the page with our klevuAutoSuggestTarget template when the result contains autosuggestion data.
JS
|
box.getScope().chains.template.render.add({
    fire: function (data, scope) {
        if (data.context.isSuccess) {
            scope.kScope.template.setData(data.template);
            var targetBox = "klevuAutoSuggestTarget";
            var element = scope.kScope.template.convertTemplate(scope.kScope.template.render(targetBox));
            var target = klevu.getSetting(scope.kScope.settings, "settings.search.searchBoxTarget");
            target.innerHTML = '';
            
            scope.kScope.element.kData = data.template;
            scope.kScope.template.insertTemplate(target, element);
        }
    }
});
box.getScope().chains.template.render.add({
    fire: function (data, scope) {
        if (data.context.isSuccess) {
            scope.kScope.template.setData(data.template);
            var targetBox = "klevuAutoSuggestTarget";
            var element = scope.kScope.template.convertTemplate(scope.kScope.template.render(targetBox));
            var target = klevu.getSetting(scope.kScope.settings, "settings.search.searchBoxTarget");
            target.innerHTML = '';
            
            scope.kScope.element.kData = data.template;
            scope.kScope.template.insertTemplate(target, element);
        }
    }
});
﻿
﻿
Library Example
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﻿
Updated 03 Mar 2023
Did this page help you?
TABLE OF CONTENTS