CMSMS modules and 'endless scrolling'
Previous article Next article'Endless scrolling', 'lazy loading', 'endless pages', 'infinite scrolling', is a feature that only downloads extra content when you reach the end of the current content. Perhaps the most famous example is Facebook. You can scroll down your 'wall' and it will (probably) never end.
As Facebook doesn't want you to download all that content at once 'it waits' for you to reach the end of the current content and then starts loading the next few items.
This article is about the same feature for the CMSMS™ News module. It could however be used for other modules like CGBlog, Products and many others too. If the module has some kind of 'summary view' and supports pagination you're probably good to go.
How to use
What do we need
- CMS Made Simple™ installation
- News module
- jQuery library (used version: 1.11.2)
- jScroll jQuery plugin http://jscroll.com (used version: 2.3.2)
If you want to display some fancy progress spinner you can probably find one using Google image search (or just steal it from the example on this blog)
How does it work
Most of the magic is done by the jScroll plugin. We only need to take care of a way to display one (or more) News items and provide a link to the next one (or more) item(s). If you think about that, we just need to use the 'pagination' feature that comes with the News module. Note that pagination and displaying multiple items only works for the summary view/action.
The jScroll plugin (almost) automatically finds the link to the next set of items. When the time is there it uses that link to load that set using ajax. This means that the next news items are loaded 'in the background' without reloading the whole web page. Therefore it only needs the bare minimum; just the News items part without the rest of the web page. CMSMS provides a way to only load the part of the web page that comes from the default content block {content}. Append ?showtemplate=false to the URL and you will see what I mean. (If the URL already has some parameters use a ampersand in stead of question mark.
E.g: http://www.website.com/?page=home&showtemplate=false). Note that the output isn't a valid web page, it's just a part of it.
The new items are appended to the existing items. jScroll automatically finds the new 'pagination link' (if any) and it starts observing 'page scroll' again. If you scroll to the end of the news items, things start over again until the last item is loaded.
Page template
For this example I made a new page template. I made a copy of the NCleanBlue template and named it NCleanBlue_News. Search for the default content block {content} and make it something like this:
<h1 class="title">{title}</h1>
<div class="jscroll">{content}</div>
</div>
Of course you're free to make it look something else but be sure to use the DEFAULT content block {content WITHOUT block-parameter} to provide the {news ...} tag. And for convenience put that content block inside an easy selectable div (<div class="jscroll"></div> in this example)
As we're making a dedicated template for this feature anyway, we can put our JavaScript and custom style in it. So in the <head> section we paste:
<script src="{uploads_url}/assets/themes/theme-name/scripts/jquery.jscroll.min.js"></script>
<script>
$(function() {
$('div.jscroll').jscroll( {
nextSelector: 'a.jscroll-link:last',
autoTrigger: true,
loadingHtml: '<img src="{uploads_url}/template/spinner.gif" alt="Loading..." />'
} );
} );
</script>
<style type="text/css">
.jscroll-loading {
height: 36px;
text-align: center;
padding-top: 5px;
opacity: 0.7;
}
</style>
Note: for this example I've placed the jquery.jscroll.min.js and spinner.gif files in the /uploads/template/... folders.
Alternative for the spinner image, if you already use Font Awesome at your site.
News module summary template
Loading a few News items and using pagination is available in the default action of the News module (summary action). So we need to make a News summary template that:
a. shows a detailed view of the news items
b. supplies a pagination link to the next (set of) items.
(Note that we're using the summary action and you probably don't want to supply links to the detail view of the news items)
I ended up with the following News summary template named 'endless_scroll':
<div class="NewsSummary">
<div class="NewsSummaryTitle">
{$entry->title|cms_escape}
</div>
<div class="NewsSummarySummary">
{$entry->summary}
</div>
<div class="NewsSummaryContent">
{$entry->content}
</div>
</div>
{/foreach}
{if $pagenumber < $pagecount}
<a href="{$nexturl}&showtemplate=false" class="jscroll-link" rel="nofollow">load more</a>
{/if}
Things are pretty standard except for the last three lines. Remember we're using pagination. So if the current 'page' is not the last one, we're provide a link to the next set. Note the '&showtemplate=false' parameter appended to the 'next-url'. The class name 'jscroll-link' is important too as we used that class in the jScroll 'nextSelector' option earlier. We also added the 'rel="nofollow"' to tell search engines not to follow nor index the links as they won't give wanted results.
LISE module summary template
Change the last three lines according to the LISE module tags:
{if $pagenumber < $pagecount}
<a href="{$nexturl}&showtemplate=false" class="jscroll-link" rel="nofollow">load more</a>
{/if}
Uploads module summary template
Change the last three lines according to the Uploads module tags:
{if $pagenum < $numpages}
<a href="{$nextpage_url}&showtemplate=false" class="jscroll-link" rel="nofollow">load more</a>
{/if}
Working example
- CGBlog module at CMSMS Themes website
- CGBlog module at the CMSMS showcase
- Uploads module with photo's
Comment Form
ReviewManager
ReviewManager
5 Comments
I am use cgblog but not all articles show, only start and end articles to show...why ??
Hi Rolf,
thx for your nice work!
As I wanted to have endless scroll SEO-friendly (according to google the consecutive pages should be found without java script and identyfied with "rel=next" ) , I found another way to feed content instead of News or Blog-modul, maybe this can be a solution too:
I use the cms_selflink dir="next" to generate the scroll-Link.
load more
It has to be at the end of each content page.
To have the title in the content too and not in the template (as showtemplate=false only gives the content)
at the beginning I removed the title-attribut from the template and put it in the content.
{title}
This way, you could put the whole page into one endless scrolling one.
To only feed some pages, that are not shown then in the regular menue, I organized them as subpages to the entrance page:
-home
- - home1scroll
- - home2scroll
....
Interesting: the subpages have to set on "show in menue" to have the selflink work.
Therefor I set the mainpage to "not show in menue" and made it visible in the menue with an internal link.
Works great only autoTrigger is not working on my site when I set it on true. Any idea what this can be
Hi Max,
I used autoTrigger: true for that.
Grtz. Rolf
I notice on your example your endless scroll does not need to click on the load more button - the spinner gif just appears - can you explain how you did that.
Thanks!! Great site btw :)
CMSMS modules and 'endless scrolling'
Article optimized for CMSMS 2.x
Author: Velden, RolfLast tested in: CMSMS 2.2.19
Last updated: 15-09-2021
Comments: 5
http://cms.ms/zl3w
