Shopify Question posted in
The Shopify help center can be found here.

Previous / Next button for a linklist – not working as expected – Shopify

I’m attempting to build a “Next / Previous” page navigation system for pages in a linklist.

The code below works as expected… except on the first and last page on the linklist. I want the “Previous” button to not show on the first page, and the “Next” button to not show on the last page.

On the first page, the “Previous” button shows, and points to the last page.

On the last page, the “Next” button shows, but points nowhere.

Where am I going wrong? The only thing I can think is that I’m not giving the variables the correct types (I’m relatively new to Liquid).

  {% comment %}
    Get the linklist being passed, and the size of the linklist.
  {% endcomment %}

  {% assign thislinklist = __page-navigation-arrows %}
  {% assign thislinklistSize = linklists[thislinklist].links | plus: 0 %}

  {% comment %}
    Finds the index of the current page in the linklist array, and saves it to compare to find previous and next pages.
  {% endcomment %}

  {% for link in linklists[thislinklist].links %}
    {% if page.handle == link.handle %}
      {% assign thisindex = forloop.index0 | plus: 0 %}
    {% endif %}
  {% endfor %}

  {% comment %}
    Saves details of the current page, and indexes of the previous and nex pages.
  {% endcomment %}

  {% assign thisname = page.title %}
  {% assign thislink = page.url %}

  {% assign thisindex = thisindex | plus: 0 %}
  {% assign previndex = thisindex | minus: 1 %}
  {% assign nextindex = thisindex | plus: 1 %}

  {% comment %}
    If it's not the last page in the linklist, save details of the next page. If not, assign a blank string (used later to hide the button).
  {% endcomment %}

  {% if previndex | plus: 0 > 0 %}
    {% assign prevname = linklists[thislinklist].links[previndex].title %}
    {% assign prevlink = linklists[thislinklist].links[previndex].url %}
  {% else %}
    {% assign prevname = '' %}
    {% assign prevlink = '' %}
  {% endif %}

  {% comment %}
    If it's not the first page in the linklist, save details of the previous page. If not, assign a blank string (used later to hide the button).
  {% endcomment %}

  {% if nextindex | plus: 0 < thislinklistSize | minus: 1 %}
    {% assign nextname = linklists[thislinklist].links[nextindex].title %}
    {% assign nextlink = linklists[thislinklist].links[nextindex].url %}
  {% else %}
    {% assign nextname = '' %}
    {% assign nextlink = '' %}
  {% endif %}


  {% comment %}
    Display the navigation.
  {% endcomment %}

  <div class="page-navigation-arrows">

    {% comment %} Hide "Previous" if it's the first page {% endcomment %}
    {% if prevlink != '' or blank %}
      <a class="page-navigation-arrows__prev page-navigation-arrows__arrow" href="{{ prevlink }}" title="{{ prevname }}">
        <img src="{{ 'page-navigation-prev.svg' | asset_url }}" alt="Previous Page">
      </a>
    {% endif %}

    {% comment %} Hide "Next" if it's the last page {% endcomment %}
    {% if nextlink != '' or blank %}
      <a class="page-navigation-arrows__next page-navigation-arrows__arrow" href="{{ nextlink }}" title="{{ nextname }}">
        <img src="{{ 'page-navigation-next.svg' | asset_url }}" alt="Next Page">
      </a>
    {% endif %}

  </div>
Tags:

2

Answers


  1. 0

    No time to test this, but I will believe you that the code works.

    But there a few things:

    {% if nextlink != '' or blank %}

    This is not a valid if condition. It should be:

    {% if nextlink != '' or nextlink == blank %}

    This is not a valid if statement as well:

    {% if previndex | plus: 0 > 0 %}

    it always returns true. It should become:

    {% assign previndex = previndex | plus: 0 %}
{% if previndex > 0 %}
    ...
{% endif %}

    Once you fix these issues it should be working properly.

    Login or Signup to reply.
  2. 0

    There is a simple way to achieve this:

    {% unless forloop.first %}
    Your code for previous link
    {% endunless %}

    {% unless forloop.last %}
    Your code for next link
    {% endunless %}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search