How to make Shopify sort blog Posts from oldest to newest?
Now the newest post is on top. It does not work for the blog that tells the story. Naturally, you have to read a story from the begging.
Some other blogs have to be sorted in default order - from newest to older. I.e. newest top.
Q: How to make Old first sorting for some blogs?
It depends on the amount of blog posts.
There are 3 approaches.
You can overwrite the article paginate and reverse the loop.
Example:
{% paginate blog.articles by 9999 %}
{% for article in blog.articles reversed %}
...
{% endfor %}
{% endpaginate %}
The larger the article amount the slower the DOM load speed will be.
So if you have 1000+ articles this is not a good solution.
You can register a private app an set only the Store content like articles, blogs, comments, pages, and redirects
permission to Read and everything will be disabled.
Then you will need to request the following URL: https://API_KEY:API_PASS@STORE.myshopify.com/admin/api/2020-01/blogs/BLOG_ID/articles.json?limit=250
( multiply times if you have more than 250 articles )
And reverse the result array.
If you have many articles this solution is once again not great.
The best one is to use the StoreFront GraphQL API here where you can reverse the results.
Example query:
{
blogByHandle(handle:"news"){
articles(first: 50, reverse: true){
edges {
node {
title
}
}
}
}
}
This way you will keep the pagination intact ( since GraphQL return Cursor that you can use for the pagination ) and you will keep the requests at minimum.
Nice to know, all these options. Thanks. 1 is good for me for now. I see it has a limitation about the pagination? For now I will create a separate blog as topic so not many story articles will be there.
Also, I believe I can put additional condition what blog to sort what not. By name.
@ses you can create separate template for example called
blog.sort.liquid
and switch to it only by adding the view argument to the end of your URL. Example/blogs/news?view=sort
. And yes, the first one will have issues with the pagination, but you can overcome this with some Javascript.