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



Buy Me A Coffee


  Comment Form

ReviewManager

Click here to open the form

ReviewManager

  0 Comments

No comments yet...

Buy Me A Coffee

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.11
  Last updated: 09-09-2019
  Comments: 0
  http://cms.ms/mLV4


Buy Me A Coffee




Advertisement


Ads help me to help you! Thanks!

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