shopify - Previous / Next button for a linklist - not working as expected -
i'm attempting build "next / previous" page navigation system pages in linklist
.
the code below works expected... except on first , last page on linklist. want "previous" button not show on first page, , "next" button not show on last page.
on first page, "previous" button shows, , points last page.
on last page, "next" button shows, points nowhere.
where going wrong? thing can think i'm not giving variables correct types (i'm relatively new liquid).
{% comment %} linklist being passed, , size of linklist. {% endcomment %} {% assign thislinklist = __page-navigation-arrows %} {% assign thislinklistsize = linklists[thislinklist].links | plus: 0 %} {% comment %} finds index of current page in linklist array, , saves compare find previous , next pages. {% endcomment %} {% link in linklists[thislinklist].links %} {% if page.handle == link.handle %} {% assign thisindex = forloop.index0 | plus: 0 %} {% endif %} {% endfor %} {% comment %} saves details of current page, , indexes of previous , 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 last page in linklist, save details of next page. if not, assign blank string (used later hide 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 first page in linklist, save details of previous page. if not, assign blank string (used later hide 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 navigation. {% endcomment %} <div class="page-navigation-arrows"> {% comment %} hide "previous" if it's 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 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>
no time test this, believe code works.
but there few things:
{% if nextlink != '' or blank %}
this not valid if
condition. should be:
{% if nextlink != '' or nextlink == blank %}
this not valid if statement well:
{% if previndex | plus: 0 > 0 %}
it returns true
. should become:
{% assign previndex = previndex | plus: 0 %} {% if previndex > 0 %} ... {% endif %}
once fix these issues should working properly.
Comments
Post a Comment