Next-page button for the Gbook module

  Previous article

Next-page button for the Gbook module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.4
  Last updated: 29-11-2017
  Comments: 0
  http://cms.ms/mLV4

The Gbook module for CMS Made Simple shows guestbook replies in a paginated view. I wanted to show the replies all under each other and with "endless scrolling".

  How to use

First you create a new "summary view" Gbook template and load the default template content.
The code related to pagination can be removed, so you will end up with something like:

<div class="gbook">
{foreach from=$gbook_entries item='gbook_entry'}
  <div class="gbook_entry">
    <div class="gbook_entry_date">{$gbook_entry->create_date|date_format:'%x %R'}</div>
    <div class="gbook_entry_name">{$gbook_entry->name}</div>
    <div class="gbook_entry_title">{$gbook_entry->title}</div>
    <div class="gbook_entry_message">{$gbook_entry->message}</div>
      {if $gbook_entry->rating && $gbook_props.allow_rating}
        <div class="gbook_entry_rating">
          {for $i=1 to 5}
            {if $i <= $gbook_entry->rating}
            <img src="modules/Gbook/images/star_full.png" alt="{$i}" />
            {else}
            <img src="modules/Gbook/images/star_empty.png" alt="{$i}" />
            {/if}
          {/for}
        </div>
      {/if}
  </div>
{/foreach}
</div>

Now you add at the top of the template the line:

<div class="jscroll-content">

And at the bottom:

{if $gbook_pagelinks|@count > 1}
<div>
  {foreach from=$gbook_pagelinks key='pagenumber' item='pagelink'}
    {if $pagenumber == $gbook_currentpage+1}
      <a href="{$pagelink}" class="jscroll-link" rel="nofollow">Load More &raquo;</a>
    {/if}
  {/foreach}
</div>
{/if}

</div> {* +++ end .jscroll-content +++ *}

Set the new template as the default one! At this moment opening the guestbook page will show you the first page of replies. Clicking at the Load More link will open the next page with replies.

Lazy loading/Endless scrolling

The Load More link contains the jscroll-link class. This class can be used to automate the loading of new replies. Read more about how to create this at: https://www.cmscanbesimple.org/blog/cmsms-modules-and-endless-scrolling »

Note: change in this tutorial the required jQuery code the contentSelector from .jscroll to .jscroll-content !!

A2 Webhosting CMS Made Simple

  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 ]


  0 Comments

No comments yet...

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

Next-page button for the Gbook module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.4
  Last updated: 29-11-2017
  Comments: 0
  http://cms.ms/mLV4

A2 Webhosting CMS Made Simple