CODE

Previous / Next Item Links from Detail View

Add links to the previous and next module items from an items detail page.

v1.0.0

  1. Encourage user exploration and time-on-site by providing ‘Previous’ and ‘Next’ links to related/sequential items when a single item is being viewed, such as blog posts, products, events and more.

    The sort order from your module component will determine the sequence of items to progress to. So, this can be controlled by the sortBy and sortOrder parameters.

    Any item data can be rendered for the previous and next items simply by using and respectively.

    <!-- Treehouse CODE v1.0.0 -->
{% component source: "Your Module Name", layout: "", sortBy: "ReleaseDate", sortOrder: "DESC", limit: "100", enablePagination: "true", collectionVariable: "itemList", type: "module" %}

{% for i in itemList.items %}
{% if request.request_url.path == i.url %}
    {% assign listIndex = forloop.index0 %}
    {% assign listIndexPrev = listIndex | minus: 1 %}
    {% assign listIndexNext = listIndex | plus: 1 %}
    {% break %}
{% endif %}
{% endfor %}

{% if listIndexPrev >= 0 %}
    <a href="{{itemList.items[listIndexPrev].url}}">{{itemList.items[listIndexPrev].name}}</a>
{% endif %}
{% if listIndexNext < itemList.Pagination.TotalItemsCount %}
    <a href="{{itemList.items[listIndexNext].url}}">{{itemList.items[listIndexNext].name}}</a>
{% endif %}

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