Custom Overrides

15min

﻿IMPORTANT : The methods within this article are being replaced!

Please review the following updated guides for efficient customization:
﻿Set Template﻿﻿
Modify Request : Overview﻿﻿
Modify Response: Overview﻿﻿
Modify Recommendations: Overview﻿ 
﻿
﻿
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 Overview﻿ 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>
<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 21 Jun 2023

Did this page help you?

TABLE OF CONTENTS

Defer initialization

Define a new custom event

Listen for the new custom event

Fire the custom function

Activate initialization

Example

Scope	Description
quick	QuickSearch module
landing	SRLP module
catnav	Category module

Array name	Field Name	Description	Default value
powerUp	quick	QuickSearch module	true
powerUp	landing	SRLP module	true
powerUp	catnav	Category module	true

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

Name	Description
setRemoteConfigQuick.build	QuickSearch configuration is ready
setRemoteConfigLanding.build	Landing page configuration is ready
setRemoteConfigCatnav.build	Category Page configuration is ready