Infinite scrolling of category pages

[mikel]

As the title suggests... has anyone implemented this into their Miva store? Is there any reason this couldn't be done? If you have it implemented, please post a link.

[Matt Zimmermann]

The only reason you might not want to do this is if you have a very large catalog; i.e. many many categories with hundreds of products. The basic way to make categories infinite would be to set the number of products to display to a large maximum, disable pagination, and implement a JavaScript based lazy-loading function.

[RTHOMASDESIGN]

I have... and it's not terribly difficult to accomplish. You can see an example here:

https://www.christmastraditions.com/category/patriotic-figures.html

I used "Infinite Scroll" which you can find here: https://infinite-scroll.com/ (you'll probably need a license)

There are a few things that you have to keep in mind if you want your category pages to remain SEO friendly. Even without infinite scroll, your category page templates should contain the following (this'll tell the search engines that there are additional pages):
<mvt:if expr="l.settings:category_listing:page_links:curre nt_page NE 1">
<link rel="prev" href="&mvte:category_listing:page_links:prev_link; " />
</mvt:if>
<mvt:if expr="l.settings:category_listing:page_links:curre nt_page NE l.settings:category_listing:page_links:last_page">
<link rel="next" href="&mvte:category_listing:page_links:next_link; " /><mvt:else>
</mvt:if>


Read more about Infinite scroll and search-friendly recommendations here:

https://webmasters.googleblog.com/2014/02/infinite-scroll-search-friendly.html

This is the code I used... note that you'll have to update the classes etc. within the script to match your template.
<!-- Infinite Scroll -->
<mvt:if expr="l.settings:category_listing:page_links:last_ page GT 1">
<script src="/js/infinite-scroll.pkgd.min.js"></script>
<script>
var mivaPages = [
<mvt:if expr="l.settings:category_listing:page_links:last_ page GT 1">
<mvt:if expr="NOT l.settings:category_listing:page_links:contains_fi rst">
'&mvte:category_listing:page_links:first_link_para ms;',
</mvt:if>
<mvt:foreach iterator="pages" array="category_listing:page_links:pages">
<mvt:if expr="l.settings:category_listing:page_links:curre nt_page EQ l.settings:pages:page_num">
<mvt:else>
'&mvte:pages:link_params;',
</mvt:if>
</mvt:foreach>
<mvt:if expr="NOT l.settings:category_listing:page_links:contains_la st">
'&mvt:category_listing:page_links:last_link_params ;',
</mvt:if>
</mvt:if>
];

function getMivaPath() {
var slug = mivaPages[ this.loadCount ];
if ( slug ) {
return '&mvt:category:link;?' + slug;
}
}

//-------------------------------------//
// init Infinite Scroll
var $container = $('#js-product-list').infiniteScroll({
path: getMivaPath,
append: '.category-product',
scrollThreshold: 800,
status: '.scroller-status',
history: 'replace',
hideNav: '.bottom-pagination',
});
// push pages to analytics
$container.on( 'history.infiniteScroll', function() {
ga( 'set', 'page', location.pathname );
ga( 'send', 'pageview' );
});

$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
// you can call additional scripts after items are appended
});
</script>
</mvt:if>

Hope this helps!

[mikel]

Thank you for the replies. Thanks for the example, RThomas Design.