website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
API Docs
Template JS
Headless SDK
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Overrides
Recommendations Webhooks
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Infinite Scroll Results
Magento B2B MSI
Ratings / Reviews
SortBy Options
Docs powered by archbee 
8min

JS Library

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
});


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);
        });
    }
});




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;
    }
});


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);
        }
    }
});




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?
Yes
No
UP NEXT
Events
Docs powered by archbee 
TABLE OF CONTENTS
Overview
Build
Attach
Chains
Library Example