Items Per Page
The Klevu Template JS Search and Category result display has a built in default product per-page limit of 12.
The default selectable Items Per Page product limit options are divisible by 12.
- 12
- 24
- 36
When a visitor selects the desired item count value from the Template JS dropdown, the value is stored in the browser's Local Storage corresponding to the query-type/id.
Local Storage Key | Description |
|---|---|
klv_limits_productList | The main product result array |
klv_limits_contentList | The CMS content result array |
Setting Defaults
The default count can be set directly into the Local Storage using parameter for klv_limits_[REQUEST ID].
For example: Setting the default count to 36 for each query type can be accomplished using the following method
If you are using Infinite Scroll or Load More, the settings above will not be applied and you must modify the search request to Klevu in order to change the limit.
We used 15 as an example, but change your limit as needed. This limit controls the items per page to display.
window._klvReady = window._klvReady || [];
window._klvReady.push(function(){
klevu.beforeActivation('landing,catnav', function(data, scope){
klevu.each(data.request.current.recordQueries, function (key, query) {
const queryID = klevu.getObjectPath(query, "id");
if (queryID === "productList" || queryID === "contentList") {
// change this to your desired limit
klevu.setObjectPath(query, "settings.limit", 15);
}
});
});
});Changing Selectable Options
To change the selectable options within the Klevu Template UI, the block for klevuLandingTempalteLimit > limit will need to be overridden to include the new values.
For example : The below snippet uses a Custom Set Template override to modify the selectable limits available in the interface as 5/10/15 with a default value of 5
<script type="text/javascript">
/* Assign new templates to Klevu Options */
klevu({
theme: {
setTemplates: {
myCustomLimit: {
scope: "full_page", // impacted scope
selector: "#myCustom_klevuLandingTemplateLimit", // new markup block ID
name: "limit" // template placement name
}
}
}
});
/* set default product limits */
window._klvReady= window._klvReady|| [];
window._klvReady.push(function(){
var itemsPerPage = 5;
localStorage.setItem('klv_limits_productList', itemsPerPage);
localStorage.setItem('klv_limits_contentList', itemsPerPage);
});
</script>
<!-- new limit selection template -->
<script type="template/klevu" id="myCustom_klevuLandingTemplateLimit">
<div class="kuDropdown kuDropItemsPerpage">
<div class="kuDropdownLabel"><%=helper.translate("Items per page : %s",helper.getLimit(dataLocal))%></div>
<div class="kuDropdownOptions">
<div class="kuDropOption kuLimit" data-value="5">5</div>
<div class="kuDropOption kuLimit" data-value="10">10</div>
<div class="kuDropOption kuLimit" data-value="15">15</div>
</div>
</div>
</script>