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_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﻿ 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 */
        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>
 <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>
﻿
﻿
Local Storage Key	Description
klv_limits_productList	The main product result array
klv_limits_contentList	The CMS content result array
Updated 25 Oct 2024
Did this page help you?
Infinite Scroll Results
Magento B2B MSI