[Shopify] ブログのアーカイブで特定タグの個数をカウントして表示させる方法

October 2, 2020

I recently wrote about how to set up a sidebar on a blog post to display category listings and archives.

https://ec-penguin.myshopify.com/blogs/shopify/sidebar-categories-archives

Currently I guessed a little design (unfinished) and it looks like this.

Shopify ブログ　サイドバー　アーカイブカテゴリ

Just a general archive.

October 2020 (21)

If there are 21 articles, such as 21, I think the number of articles is indicated as 21.

So this time, we will proceed with the implementation to be able to display the number of articles.

The archive section of the blog post to be edited

The part to be edited this time is the one shown in the previous screener. Here is the specific code.

<! -- archives -->
<div id="archives-sidebar"
> {% if blog.all_tags.size > 0 %}
<! -- here goes the first code! -->
<p class="sidebar-title">Archive</p>
<ul class="archives-sidebar-box"
> {% for tags in blog.all_tags reversed%}
{% if tag contains "year" and tag contains "month" %}
{% if current_tags contains tag %}
<li class="tag-link">
{{ tag | replace: 'year 0', 'year' }}
<! --Here goes the second code! -->
</li>
{% else %}
<li class="tag-link">
{{ tag | replace: 'year 0', 'year' | link_to_tag: tag }}
<! --Here goes the second code! -->
</li>

{%

endif %}
endif %}
{% endfor %}
</ul>
{% endif %}
</div>

We will edit this section. In terms of file name, if you have specified the same file name as I did in the code I created in my last post, it is the blog-sidebar.liquid file.

Specific code to count the number of articles in the archive

Now the code to count the number of tags in a specific archive (the first one).

{% assign count = 0
%}{% for article in blogs[blog.handle].articles %}

{%
if article.tags contains tag %}
capture count %}{{{ count | plus: 1 }}{% endcapture %}
{% endif %}
{% endfor %}

This is the first line of code.

<! --here goes the first code! -->.

Add to the location of

The process is as follows

Set the count variable to 0 and pick up all articles in blogs[blog.handle].articles. If the article contains a specific tag, the count variable is set to 1 plus the tag. If the article contains a specific tag, the count variable is incremented by 1.

However, if this is all we do, we just added the number of tags to the count variable, so we need to output the value of the count.

The following code (the second one) is to be added.

({{count}})

Now, for example, if there are 20 articles, it will be displayed as (20).

It will look something like this.

shopify ブログアーカイブ数表示

(You can see that I almost didn't write any articles from June to August😱)

Please be careful, as it is designed to show whether you are writing a blog properly or not. LOL!

By the way, the icons in front of each month in the archive are put in svg.

I'll post the whole code after modification to organize it once.

<! -- archives -->
<div id="archives-sidebar"
> {% if blog.all_tags.size > 0 %}
<p class=" sidebar-title">archives</p>
<ul class="archives-sidebar-box">

{%

for tags in blog.all_tags reversed%}
assign count = 0 %}
{% for article in blogs[blog.handle].articles %}
{% if article.tags contains tag %}
{% capture count %}{{ count | plus: 1 }}{% endcapture %}
{% endif %}
{% endfor %}
{% if tag contains "year" and tag contains "month" %}
{% if current_tags contains tag %}
<li class="tag-link">
{{ tag | replace: 'year 0', 'year' }}
({{count}})
</li>
{% else %}
<li class="tag-link">
{{ tag | replace: 'year 0', 'year' | link_to_tag: tag }}
({{count}})
</li>

{%

endif %}
endif %}
{% endfor %}
</ul>
{% endif %}
</div>

The entire code looks like this.

How to count and display the number of specific tags in the Shopify blog archive Summary

You go to the archive and there is only one article. This will lead to user discouragement if they think that they have to go back to the archive. (I'm talking about writing the article in the first place...)

However, if the number of archives linked to is known in advance, they will click on the tag with the highest number of archives. And since it is obvious at a glance how many articles are in the blog and how often it is updated, I implemented it thinking that it would be a great information for readers.

However.

Please be aware that this is a double-edged sword for those who do not update their blogs very often or who have not updated their blogs for a while. (I am also in danger, so I will do my best to keep my blog up-to-date.)

Have a good day!