CMSMS modules and 'endless scrolling'

  Previous article Next article  

CMSMS modules and 'endless scrolling'

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 14-06-2017
  Comments: 4

'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:

<div class="main-main util-clearfix">
  <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 type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="{uploads_url}/template/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.

loadingHtml: '<i class="fa fa-cog fa-spin fa-3x"></i>'
A2 Webhosting CMS Made Simple

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':

{foreach from=$items item=entry}
  <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.

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}

Optional

If you want to make it really 'endless' you can use this 'quick and dirty' code to let scroll happen from start again. Note that if for example you use 'pagelimit=3' and have 10 items. The 'last round' only one item will be loaded and the next time it will start with items 1-3 etc.

{foreach from=$items item=entry}
  ...
{/foreach}

<a href="{if $pagenumber < $pagecount}{$nexturl}{else}{$prevurl|regex_replace:'/pagenumber=\d+/':'pagenumber=1'}{/if}&showtemplate=false" class="jscroll-link" rel="nofollow">load more</a>

News items

Obviously to show off this feature you need to have some published news items. Create more items than the number you're gonna use for the 'pagelimit' parameter.

News page

So now we need to create the page to show all this.
Create a new page.
Select the page template you created earlier (NCleanBlue_News in this example)
Give it a title and a Menu text
In the Content 'block' labeled 'The News tag' type (choose a pagelimit number that suits your needs):

{news summarytemplate='endless_scroll' pagelimit=2}

Optionally fill in other fields and submit the page.

Time to test!

  Working example



A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  4 Comments

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

CMSMS modules and 'endless scrolling'

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 14-06-2017
  Comments: 4

A2 Webhosting CMS Made Simple