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.
Announcement
Collapse
No announcement yet.
Infinite scrolling of category pages
Collapse
X
-
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.Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
-
I have... and it's not terribly difficult to accomplish. You can see an example here:
https://www.christmastraditions.com/...c-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/20...-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!
Comment
Comment