How To
Infinite Scroll Results

2min
﻿
By default Klevu Template JS contains elements for pagination and number of records per page.
This can easily be replaced with an Infinite Scroll using the Configuration﻿ option to enable the resultInfiniteScroll module.
JavaScript
<!-- Add the following below the klevu.js core script include -->
<script type="text/javascript">
klevu({
      theme: {
        modules: {
         resultInfiniteScroll: {
           quickSearch: {
             enable: true
           },
           searchResultsPage: {
             enable: true
           },
           categoryPage: {
             enable: true
           }
         }
       }
     }
})
</script>
<!-- Add the following below the klevu.js core script include -->
<script type="text/javascript">
klevu({
      theme: {
        modules: {
         resultInfiniteScroll: {
           quickSearch: {
             enable: true
           },
           searchResultsPage: {
             enable: true
           },
           categoryPage: {
             enable: true
           }
         }
       }
     }
})
</script>
﻿
See : An in-action example and the source code on the Klevu CodeSandbox﻿
﻿
Disabling Automated Scroll-To-Top
The Infinite Scroll activation loads the additional records to Template JS using Ajax style response. In some website themes, the newly loaded array will shift the user to the top of the page.
The same effect can be witnessed using the Template JS default pagination if the user is in mid-page view and selects an alternate pagination value.
The following  example will disable the scrollToTop behavior in these instances for both landing and catnav scope.
Please see :  After Template Render﻿ section for details on this method of Klevu JS overriding
TypeScript
<!-- Add the following below the klevu.js core script include -->
<script type="text/javascript">
klevu.afterTemplateRender("landing,catnav", function(data, scope){

    document.body.style.minHeight = '0';
    const currentDocumentHeight = document.documentElement.scrollHeight;
    document.body.style.minHeight = '${currentDocumentHeight}px';

    scope.kScope.chains.events.keyUp.remove({name: "scrollToTop"});

});
</script>
<!-- Add the following below the klevu.js core script include -->
<script type="text/javascript">
klevu.afterTemplateRender("landing,catnav", function(data, scope){

    document.body.style.minHeight = '0';
    const currentDocumentHeight = document.documentElement.scrollHeight;
    document.body.style.minHeight = '${currentDocumentHeight}px';

    scope.kScope.chains.events.keyUp.remove({name: "scrollToTop"});

});
</script>
﻿
﻿
﻿
﻿
﻿
﻿
Updated 30 May 2024
Did this page help you?
Facet Show/Hide
Items Per Page