Shopify themes, liquid, logos, and UX
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 -%}
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?
Just noticed this happening too. Must be a bug with Shopify because I don't recall this happening a few days ago.
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.
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?
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.
User | RANK |
---|---|
220 | |
153 | |
60 | |
52 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023