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
Default Options
﻿
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_productListFallback
The fallback array if the productList query contained no results
klv_limits_contentList
The CMS content result array
﻿
Setting Defaults
The default count can be set directly into the Local Storage using the Dictionary Engine﻿ parameter for limits.
For example: Setting the default count to 36 for each query type can be accomplished using the following method
      /* set default product limits */
      var klevu_newObject = klevu.dictionary("limits");
      klevu_newObject.setStorage("local");
      klevu_newObject.mergeFromGlobal();
      klevu_newObject.addElement("productList", 36);
      klevu_newObject.addElement("productListFallback", 36);
      klevu_newObject.addElement("contentList", 36);
      klevu_newObject.mergeToGlobal();
﻿
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
JS
 <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 */
      var klevu_newObject = klevu.dictionary("limits");
      klevu_newObject.setStorage("local");
      klevu_newObject.mergeFromGlobal();
      klevu_newObject.addElement("productList", 5);
      klevu_newObject.addElement("productListFallback", 5);
      klevu_newObject.addElement("contentList", 5);
      klevu_newObject.mergeToGlobal();
      
</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>
 <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 */
      var klevu_newObject = klevu.dictionary("limits");
      klevu_newObject.setStorage("local");
      klevu_newObject.mergeFromGlobal();
      klevu_newObject.addElement("productList", 5);
      klevu_newObject.addElement("productListFallback", 5);
      klevu_newObject.addElement("contentList", 5);
      klevu_newObject.mergeToGlobal();
      
</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>
﻿
﻿
Updated 30 Oct 2023
Did this page help you?
Infinite Scroll Results
Magento B2B MSI
Docs powered by Archbee
TABLE OF CONTENTS
Setting Defaults
Changing Selectable Options
Local Storage Key	Description
klv_limits_productList	The main product result array
klv_limits_productListFallback	The fallback array if the productList query contained no results
klv_limits_contentList	The CMS content result array