How To
Items Per Page
4min
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 / set default product limits / window klvready= window klvready|| \[]; window klvready push(function(){ var itemsperpage = 36 ; localstorage setitem('klv limits productlist', itemsperpage); localstorage setitem('klv limits contentlist', itemsperpage); }); 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 docid 6yvx9naw6ax68wygucob7 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 \[ { 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>