Multi tags filter All products

Highlighted
New Member
3 0 0

Hi, im trying to create another menu with tags on my shopify.

I want like 4 colummns with different tags on each, im using debut theme, i read if i use supply theme i can do that with groups tags. I can use it that on debut theme? any code for implement that on debut ? and the last question, i read on supply only filters the 50 products of page, can filter all products?

 

Thanks on advance!

0 Likes
Highlighted
Excursionist
29 1 3

Please add this  for multi tag filter.Synapse   Products   Boxy 11T-Shirt   Shopify.png
<!-- -->
<h5 class="fw-title">Category</h5>
<ul class="category-menu">
{% for collection in collections limit:settings.category_count %}
{% unless collection.handle == 'frontpage' or collection.handle == 'all' %}
<li><a class=" {% if forloop.first %}active1{% endif %}" href="{{ collection.url }}">{{ collection.title }} ({{ 'collections.general.items_with_count' | t: count: collection.all_products_count }})</a></li>
{% endunless %}
{% endfor %}
</ul>
<!-- -->

{% comment %}
The code below relies on the advanced-tag-loop snippet.
The snippet is already included in snippets/breadrumbs.liquid
because it is needed there too, but if you remove
breadcrumbs you need to include this:

{% endcomment %}
{% include 'advanced-tag-loop' %}

{% if settings.collection_sidebar_filters == 'groups' %}
{% if collection.all_tags.size > 0 %}
{% comment %}
Loop through tag categories
{% endcomment %}
{% for cat_item in cat_array %}

<!-- tag filter --->
<div class="filter-widget mb-0">
<h2 class="fw-title">{{ cat_item }}</h2>
<div id="filter-group{{forloop.index}}" class="advanced-filters" data-filter-group="{{ cat_item }}">
{% comment %}
Loop through collection tags
{% endcomment %}
{% for tag in collection.all_tags %}
{% assign cat = tag | split: '_' | first %}
{% if cat != tag and cat_item == cat %}
{% comment %}
Strip out tag category prefix and add/remove link for tag filtering
{% endcomment %}
{% if current_tags contains tag %}
<ul>
<li class="current">
<label class="rating-chkbox">
<input class="1 filter_checkbox checkbox-filter coll-filter" id="checked" type="checkbox" checked onClick="">
{{ tag | link_to_remove_tag: tag }}
<span class="checkmark"></span>
</label>
</li>

{% else %}
<!--- colorfilter --->
{% if cat contains 'color' %}
<li>
<label class="rating-chkbox">
<input class="2 filter_checkbox checkbox-filter coll-filter" id="unchecked" type="checkbox" onClick="">
{{ tag | remove: cat | remove: '_' | link_to_add_tag: tag }}
<span class="checkmark"></span>
</label>
</li>
{% else %}
<li>
<label class="rating-chkbox">
<input class="3 filter_checkbox checkbox-filter coll-filter" id="unchecked" type="checkbox" onClick="">
{{ tag | remove: cat | remove: '_' | link_to_add_tag: tag }}
<span class="checkmark"></span>
</label>
</li>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
</div>

<!-- tag filter --->
{% endfor %}

{% endif %}
{% else %}
<div class="filter-attribute-container">
<h4 class="m-text14 p-b-7">{{ 'collections.sidebar.shop_by' | t }}</h4>
<div id="filter-group{{forloop.index}}">
{% if template contains 'collection' and collection.all_tags.size > 0 %}
{% comment %}
Provide a 'catch-all' link at the top of the list,
we'd check against the collection.handle, product type, and vendor.
{% endcomment %}
{% if current_tags %}
{% comment %}
Good for /collections/all collection and regular collections
{% endcomment %}
{% if collection.handle %}
<a href="/collections/{{ collection.handle }}">
{{ 'collections.sidebar.all' | t }}
{% unless collection.title == 'Products' %}
{{ collection.title }}
{% endunless %}
</a>
{% comment %}
Good for automatic type collections
{% endcomment %}
{% elsif collection.current_type %}
<a href="{{ collection.current_type | url_for_type }}">{{ 'collections.sidebar.all_collection' | t: collection_title: collection.title }}</a>
{% comment %}
Good for automatic vendor collections
{% endcomment %}
{% elsif collection.current_vendor %}
<a href="{{ collection.current_vendor | url_for_vendor }}">{{ 'collections.sidebar.all_collection' | t: collection_title: collection.title }}</a>
{% endif %}
{% endif %}
{% comment %}
And for the good stuff, loop through the tags themselves.
Strip the prepended categories if they happen to exist.
{% endcomment %}
{% for tag in collection.all_tags %}
{% assign is_advanced_tag = false %}
{% assign cat = tag | split: '_' | first %}
{% unless cat == tag %}
{% if cat_array contains cat %}
{% assign is_advanced_tag = true %}
{% if current_tags contains tag %}
<span class="active-filter">
{{ tag | remove_first: cat | remove_first: '_' }}
</span>
{% else %}
<span >
{{ tag | remove_first: cat | remove_first: '_' | link_to_tag: tag }}
</span>
{% endif %}
{% endif %}
{% endunless %}
{% if is_advanced_tag == false %}
{% if current_tags contains tag %}
<li class="current">
<label class="rating-chkbox">
<input class="3 filter_checkbox checkbox-filter coll-filter" id="checked" type="checkbox" checked onClick="">
{{ tag | link_to_remove_tag: tag | remove_first: cat_item }}
<span class="checkmark"></span>
</label>
</li>
{% else %}
{{ tag | link_to_tag: tag }}
{% endif %}
{% endif %}
{% endfor %}
{% else %}
<p>{{ 'collections.sidebar.no_tags' | t }}</p>
{% endif %}
</div>
</div>
{% endif %}


<script>
$('.checkbox-filter').off().change( function(){
var newURL = $(this).nextAll('a').attr('href');
window.location.href = newURL;
});
</script>

 

 

0 Likes
Highlighted
New Member
3 0 0
Thanks for your answer!!
i got only one doubt, where do i need to paste the top code ? is this one


Category


0 Likes
Highlighted
New Member
3 0 0

Please add this  for multi tag filter.
.....<!-- -->
<h5 class="fw-title">Category</h5>
<ul class="category-menu">
{% for collection in collections limit:settings.category_count %}
{% unless collection.handle == 'frontpage' or collection.handle == 'all' %}
<li><a class=" {% if forloop.first %}active1{% endif %}" href="{{ collection.url }}">{{ collection.title }} ({{ 'collections.general.items_with_count' | t: count: collection.all_products_count }})</a></li>
{% endunless %}
{% endfor %}
</ul>
<!-- -->...............

 

this top code, at sections collections-list-liquid? 

 

THANKS THANKS!

0 Likes
Highlighted
Excursionist
29 1 3

Put this code in snippet file. And include this where you want

0 Likes