blog.next_article and blog.previous_article bug

KuznetsEnvy
Shopify Partner
31 0 8

All blog articles on our page are from "Recipes" blog: https://lizza.net/blogs/recipes
"Next" and "Previous" buttons work well on most of our recipes. But we have 2 bugs:
1. If you sequentially click "next" – you get to a loop of 2 articles and can't get further down the list.
2. For this article: https://lizza.net/blogs/recipes/lizza-pizza-with-greens – both blog.next_article and blog.previous_article contain the same URL.

Is it possible to somehow re-calculate/refresh blog.next_article and blog.previous_article variables for our blog?
Any suggestions are welcomed.


Liquid code for navigation bar is the following: 

      {%- if blog.next_article or blog.previous_article -%}
        <div class="ArticleToolbar__Nav">
          {%- if blog.next_article -%}
            <a href="{{ blog.next_article }}" class="ArticleToolbar__NavItem ArticleToolbar__NavItem--next Heading Text--subdued Link u-h8">{% include 'icon' with 'select-arrow-left' %} {{ 'blog.article.previous' | t }}</a>
          {%- endif -%}

          {%- if blog.previous_article and blog.next_article -%}
            <span class="ArticleToolbar__NavItemSeparator"></span>
          {%- endif -%}

          {%- if blog.previous_article -%}
            <a href="{{ blog.previous_article }}" class="ArticleToolbar__NavItem ArticleToolbar__NavItem--prev Heading Text--subdued Link u-h8">{{ 'blog.article.next' | t }} {% include 'icon' with 'select-arrow-right' %}</a>
          {%- endif -%}
        </div>
      {%- endif -%}


We also have bottom navigation based on same variables:

  {%- if blog.next_article or blog.previous_article -%}
    <aside class="ArticleNav">
      <div class="Container Container--narrow">
        <div class="Grid Grid--m Grid--center">
          {%- if blog.next_article -%}
            <div class="Grid__Cell 1/2--tablet-and-up next-article">
              {%- include 'article-item', article: blog.next_article -%}
            </div>
          {%- elsif blog.articles_count > 3 -%}
            <div class="Grid__Cell 1/2--tablet-and-up last-article">
              {%- include 'article-item', article: blog.articles.last -%}
            </div>
          {%- endif -%}

          {%- if blog.previous_article -%}
            <div class="Grid__Cell 1/2--tablet-and-up previous-article">
              {%- include 'article-item', article: blog.previous_article -%}
            </div>
          {%- elsif blog.articles_count > 3 -%}
            <div class="Grid__Cell 1/2--tablet-and-up first-article">
              {%- include 'article-item', article: blog.articles.first -%}
            </div>
          {%- endif -%}
        </div>
      </div>
    </aside>
  {%- endif -%}
Replies 6 (6)
leeeee
Shopify Partner
14 0 12

I'm facing the same issue...

When clicking the link {{ blog.previous_article }} generates, it just loops from the article A to B forever...

Anyone solved this?

rbrnr
New Member
2 0 1

Just noticed this happening too. Must be a bug with Shopify because I don't recall this happening a few days ago.

NoelleCM
New Member
1 0 0

Happening to me too. 

rbrnr
New Member
2 0 1

In the meantime you can probably use this instead:

{% for art in blog.articles %}
  {% if art.handle == article.handle %}
    {% assign next_index = forloop.index %}
  {% endif %}
{% endfor %}

{% assign next_article = blog.articles[next_index] %}
{% unless next_article %}{% assign next_article = blog.articles[0] %}{% endunless %} // if you want it to loop

or

{% for art in blog.articles %}
  {% if art.handle == article.handle %}
    {% assign previous_index = forloop.index0 | minus: 1 %}
  {% endif %}
{% endfor %}

{% assign previous_article = blog.articles[previous_index] %}
{% unless previous_article %}{% assign previous_article = blog.articles[blog.articles.size - 1] %}{% endunless %} // if you want it to loop

and then replace instances of blog.next_article or blog.previous_article with just next_article or previous_article.

yanmaumitz
New Member
1 0 0

I'm having the same issue, your second solution helped fix the previous_article but now blog.next_article doesn't work at all. Any ideas?

taje834
New Member
1 0 0

Ok so you are facing an issue regarding article bug lets check thispage guidance about this error I think you are facing the same issue.