---
title: Custom Overrides
slug: template-js/custom-overrides
docTags:
createdAt: 2022-06-03T20:02:53.000Z
---
:::hint{type="warning"}
**IMPORTANT**** : The methods within this article are being replaced!**
Please review the following **updated** guides for efficient customization:
- [Set Template](docId:6YVX9naw6AX68WYguCOB7)
- Modify Request : [Overview](docId:_ndrEPmgAUhYltIlXkG-o)
- Modify Response: [Overview](docId\:k-USIa-fv-m380BqcAw7P)
- Modify Recommendations: [Overview](docId\:O03QERB3F-sY0BHba64Af)
:::
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](docId:2wQzwKVdYeg1iPkBZuzv2) and [Modify Search Query](docId\:EiwwS8IBYZIcIU7fZEPrH) 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 |
:::hint{type="info"}
For Klevu Recommendations there are a series of convenient [Overview](docId\:O03QERB3F-sY0BHba64Af) 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.
:::BlockQuote
powerUp: \{ **landing: false** }
:::
You can place it as an additional `options` element.
:::BlockQuote
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.
:::hint{type="warning"}
**Important:** Use unique `name` value for each event to avoid conflicts!
:::
:::BlockQuote
**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.
:::BlockQuote
**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](docId:2wQzwKVdYeg1iPkBZuzv2) or [Modify Search Query](docId\:EiwwS8IBYZIcIU7fZEPrH) parameters.
:::BlockQuote
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.
:::BlockQuote
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
:::CodeblockTabs
JavaScript
```typescript
```
:::
****
.