Tag count automatically changing while clicking on the product tag

Question

I am using Shopify. I am in collection page where I am getting all the filter with tag count something like,

All Products
Apple(4)
Banana(2)
Orange(1)
Mango(8)

Now when I click on any of the tag(For example I clicked on Banana) then It will display the banana products.

Now my issue is by clicking on the tag it's changing the tag count.

All Products
Apple(0)
Banana(2)
Orange(0)
Mango(4)

I am using below code

 {% for tag in collection.all_tags %}
 {% assign products_count = 0 %}
 {% for product in collection.products %}
 {% if product.tags contains tag %}
 {% assign products_count = products_count | plus: 1 %}
 {% endif %}
 {% endfor %}
 <a class="filter__link" href="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected" id="tag_active"{% endif %}>{{ tag }} ({{products_count }})</a>
  {% endfor %}

Thanks in advance.

Answer 1

It looks like the step you're missing is the first line here:

{% assign collection = collections.all %}

You're iterating over the current collection, so as you've noticed when you click on a tag the results change.

If you don't have a collection with the handle all, you can create one by following this process:

1. Go to Products > Collections.
2. Click Add a collection.
3. Create the collection:
   1. Give your collection the Title All.
   2. In the Conditions section, select "Automatically select products based on conditions".
   3. Set the product condition "Product price is greater than $0".
4. Save

Edit:

This fixes the issue where the product count changes when you click on a tag link:

{% for tag in collection.all_tags %}
    {% assign products_count = 0 %}
    {% for product in collections[collection.handle].products %}
        {% if product.tags contains tag %}
            {% assign products_count = products_count | plus: 1 %}
        {% endif %}
    {% endfor %}
    <a class="filter__link" href="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected" id="tag_active"{% endif %}>{{ tag }} ({{products_count }})</a>
{% endfor %}

The key part is:

{% for product in collections[collection.handle].products %}

It looks like when you're filtering by tag with a URL like collections/collection_1/tag_1 then collection.products is also filtered by the selected tag. The line above looks a bit messy, but it appears to return the full set of products.

Answer 2

As I was saying in comment, the issue comes from your secondary loop:

{% for product in collection.products %}

Which accesses only to the current view and not the full collection products.

I've not tested it but I guess it worthes a try:

{% assign whole_collection = collections[collection.handle] %}
{% for product in whole_collection.products %}
 {% if product.tags contains tag %}
 {% assign products_count = products_count | plus: 1 %}
 {% endif %}
{% endfor %}

Explanation, a code like this {{ collections['the-handle'].url }} allows access to any specific collection and its attributes.

HTH

Memo : this won't work accurately if your collection has more than 50 items.