Previous / Next Button For A Linklist - Not Working As Expected
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" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="{{ nextlink }}" title="{{ nextname }}">
<img src="{{ 'page-navigation-next.svg' | asset_url }}" alt="Next Page">
</a>
{% endif %}
</div>
Answer
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.
Related Questions
- → Does anyone know how to solve IP canonicalization with shopify platform?
- → How can I add a featured image from a blog post to my homepage on shopify
- → Shopify - Get list of product from a specific collection
- → Shopify webhooks not wanted
- → Comparing two large files are taking over four hours
- → Need "add to cart" button price to update with correct amount depending on what checkbox is checked
- → How to append a variable inside another vaiable name in liquid html
- → GET /admin/webhooks.json returns an empty array
- → Javascript function not getting executed properly
- → How to give border to to current displaying border
- → Shopify background image
- → Dynamic Attribute Names in Shopify Cart
- → What after added shopify store into shipstation