MENU

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:

<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 src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<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.

loadingHtml: '<i class="fa fa-cog fa-spin fa-3x"></i>'

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.

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



Buy Me A Coffee


  Comment Form

ReviewManager

Click here to open the form

ReviewManager

  5 Comments

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

CMSMS modules and 'endless scrolling'

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.19
  Last updated: 15-09-2021
  Comments: 5
  http://cms.ms/zl3w


Buy Me A Coffee




Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!