CODE

Previous / Next Only Pagination

This snippet displays a simplified “Next and Prev” style pagination for any module.

v1.0.0
  1. With Treepl's built-in pagination there is a “Next and Prev” link included. However, there is no blank 'previous' link on the first page, or blank 'next' link on the final page. So there would be nothing to style as “inactive” in those 2 cases.

    These “Next and Prev” pagination links can be added to any module (Blog Posts, Products, Custom Modules...). Just be sure to have pagination enable and the pagination display disabled (which they both are by default) and configure your items per page and add a collectionVariable as shown below:

    <!--Treehouse CODE v1.0.0-->
    {% component source: "<YOUR MODULE>", layout: "<YOUR LIST LAYOUT>", limit: "6", collectionVariable: "itemList", type: "module" %}
  2. Directly under your module component tag add the following Liquid.

    The last 4 lines contain the “Next and Prev” links which you can adjust accordingly.

    <!--Treehouse CODE v1.0.0-->
    {% assign pageData = itemList.Pagination %}
    {% assign mid = itemList.items[0].Module_ID %}
    
    {% if pageData.CurrentPage == 1 %}
    
    	{% assign previousPageUrl = null %}
    	{% assign nextPageUrl = "?page={{pageData.CurrentPage | plus: 1}}&prop_ModuleId={{mid}}" %}
    
    {% elsif pageData.CurrentPage > 1 and pageData.CurrentPage != pageData.NumberOfPages %}
    
    	{% assign previousPageUrl = "?page={{pageData.CurrentPage | minus: 1}}&prop_ModuleId={{mid}}" %}
    	{% assign nextPageUrl = "?page={{pageData.CurrentPage | plus: 1}}&prop_ModuleId={{mid}}" %}
    
    {% elsif pageData.CurrentPage == pageData.NumberOfPages %}
    
    	{% assign previousPageUrl = "?page={{pageData.CurrentPage | minus: 1}}&prop_ModuleId={{mid}}" %}
    	{% assign nextPageUrl = null %}
    
    {% endif %}
    
    <div class="pag-nav">
        <a class="button{% if previousPageUrl == null %} pag-inactive"{% else %}" href="{{previousPageUrl}}"{% endif %}>&lt; Previous</a>
        <a class="button{% if nextPageUrl == null %} pag-inactive"{% else %}" href="{{nextPageUrl}}"{% endif %}>Next &gt;</a>
    </div>
  3. OPTIONAL:
    Below is some suggested CSS to style these links which you can add to your main CSS file or directly onto the page:

    <!--Treehouse CODE v1.0.0-->
    <style>
        .pag-nav {
           text-align: center;
        }
        .pag-nav .pag-inactive {
            text-decoration: none;
            cursor: default;
            opacity: 0.6;
        }
    </style>

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.