Need help displaying related products by tag instead of collection - shopify

Question

I have hundreds of products in a collection, I want to group the items in that collection with similar tags
How do i shows all products with matching tags in the related slider ?
Here's what I've tried so far, i managed to group together all related products in the collection:
{% if settings.show_related_product %}
<div id="related_item" class="home-carousel">
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
{% if collection and collection.products_count > 1 %}
{% if settings.heading_related_product != blank %}
<h4>{{ settings.heading_related_product }}</h4>
{% endif %}
<div class="related-items">
{% assign current_product = product %}
{% assign current_product_found = false %}
{% for product in collection.products limit: settings.related_product_number %}
{% if product.handle == current_product.handle %}
{% assign current_product_found = true %}
{% else %}
{% unless current_product_found == false and forloop.last %}
<div class="related-item">
{% include 'product-item' with collection.handle %}
</div>
{% endunless %}
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% if settings.show_wear_with and settings.wear_with_col != blank%}
<div id="wear_with_item" class="home-carousel">
{% assign wearwithCol = collections[settings.wear_with_col] %}
{% assign wearwithNum = settings.wear_with_number %}
{% if settings.heading_wear_with != blank %}
<h4>{{ settings.heading_wear_with }}</h4>
{% endif %}
<div class="wear-with-items">
{% for product in wearwithCol.products limit: wearwithNum %}
<div class="wear-with-item">
{% include 'product-item' %}
</div>
{% endfor %}
</div>
</div>
{% endif %}

Answer 1

When you need to filter products by tag, the best solution is to use JS, since liquid doesn't have a native way to do so.
So the best way is to target the /collections/all/TAG page and get the products from there with an AJAX request, since they will be filtered by tags on that page.
So something like so:
fetch('/collections/all/SOME_TAG')
.then(r => r.json())
.then(data => /* Do Something With The data */)
If you really really want to use only liquid code than you can do the following "hack":
{% paginate collections.all.products by 9999 %}
{% for _product in collections.all.products %}
{% if _product.tags contains 'SOME_TAG' %}
Do something here
{% endif %}
{% endfor %}
{% endpaginate %}
But I wouldn't recommend the liquid only solution since that will make the server time load increase quite significantly.