MENU

Next-page button for the Gbook module

  Previous article Next article  

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 !!

  Working example




  Comment Form

Click here to open the form


  0 Comments

No comments yet...

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Next-page button for the Gbook module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.7
  Last updated: 23-06-2018
  Comments: 0
  http://cms.ms/mLV4

Advertisement



Ads help me to help you! Thanks!

Ads help me to help you! Thanks!

Ads help me to help you! Thanks!