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 
15min

Custom Overrides



There may be a use-case or business requirement in which a modification to the Search query or display template is needed.

Once you have established the prerequisite code for overrides, you are free to focus on the custom action(s) necessary for your application within the Klevu scope, including Modify Display Markup and Modify Search Query parameters.

This guide will familiarize with the actions involved in preparing for Template JS overrides

  • Defer initialization (powerUp) of the Klevu component
  • Define a new custom event
  • Listen for the new custom event
  • Fire the custom function, action, or override an API parameter
  • Activate initialization (powerUp)

Note that each action requires definition within the corresponding scope of the override. We will note these where applicable below.

Scope

Description

quick

QuickSearch module

landing

SRLP module

catnav

Category module

For Klevu Recommendations there are a series of convenient Recommendations Webhooks that can be utilized in place of these steps.





Defer initialization

First we need to tell Klevu not to power up the appropriate module until we integrate the overrides. This flag will be updated at a later step.

powerUp: { landing: false }

You can place it as an additional options element.

klevu({ powerUp: { landing: false } });

Note the scope of the deferred powerUp in this example is set to landing.

Array name

Field Name

Description

Default value

powerUp

quick

QuickSearch module

true

powerUp

landing

SRLP module

true

powerUp

catnav

Category module

true



Define a new custom event

Next we will create a new custom build event which will fire once Klevu has completed its initial setup.

The name we have chosen for this example is myLandingPageOverride but you can name this whatever you like. We will use this name to attach it to the event lister in a later step.

Important: Use unique name value for each event to avoid conflicts!

klevu.coreEvent.build({ name: "myLandingPageOverride", fire: function () { if (klevu.getGlobalSetting("flags.setRemoteConfigLanding.build", false)) { return true; } return false; }, maxCount: 150, delay: 100 });

Name

Description

name

Unique value used to attach it to the event lister

fire

function and logic

maxCount

Asynchronously retry X times

delay

Wait X milliseconds between each retry

This event will loop using the maxCount and delay values.

When the Klevu internal flag setRemoteConfigLanding.build to be set as TRUE, any attached events will fire.

Note that this internal settings.flag being checked is in the landing scope. A separate build event check is required for each scope in each context of the override.

Name

Description

setRemoteConfigQuick.build

QuickSearch configuration is ready

setRemoteConfigLanding.build

Landing page configuration is ready

setRemoteConfigCatnav.build

Category Page configuration is ready



Listen for the new custom event

We will now establish an event listener that is attached to the build event defined as myLandingPageOverride in the previous step.

klevu.coreEvent.attach("myLandingPageOverride", { name: "attachToMyLandingPageOverride", fire: function () { // DO SOMETHING klevu({ powerUp: { landing: true } }); } });



Fire the custom function

Upon the myLandingPageOverride build event, we can trigger any applicable javascript within the fire function.

Please reference the applicable documentation sections for more detail on how to Modify Display Markup or Modify Search Query parameters.

klevu.coreEvent.attach("myLandingPageOverride", { name: "attachToMyLandingPageOverride", fire: function () { // DO SOMETHING klevu({ powerUp: { landing: true } }); } });



Activate initialization

Finally, now that we have completed our overrides, we can tell Klevu that we are done and allow it to power up.

klevu.coreEvent.attach("myLandingPageOverride", { name: "attachToMyLandingPageOverride", fire: function () { // DO SOMETHING klevu({ powerUp: { landing: true } }); } });







Example

Landing page search query overrides the default limit for filter options in the result set

JavaScript
|
<script type="text/javascript">

    // Defer initialization (powerUp) of the Klevu component
    klevu({
        powerUp: {
            landing: false
        }
    });
    

    // Define a new custom event, which will fire after SRLP has initialised
    klevu.coreEvent.build({
        name: "myLandingPageOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigLanding.build", false)) {
                 return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen for the new custom event
    klevu.coreEvent.attach("myLandingPageOverride", {
        name: "attachToMyLandingPageOverride",
        fire: function () {
            // Fire the custom javascript action or override an API parameter

            // DO SOMETHING
            klevu.search.landing.getScope().chains.request.control.addAfter("initRequest", {
                name: "modifyLandingQuery",
                fire: function (data, scope) {
                    // SET max filter options to retrieve
                    klevu.setObjectPath( data , "localOverrides.query.productList.filters.filtersToReturn.options.limit", 20);
                }
            });
 
            // Activate initialization (powerUp)
            klevu({
                powerUp: {
                    landing: true
                }
            });
        }
    });
</script>


















.

Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Modify Search Query
Docs powered by archbee 
TABLE OF CONTENTS
Defer initialization
Define a new custom event
Listen for the new custom event
Fire the custom function
Activate initialization
Example