What's your biggest current challenge? Have your say in Community Polls along the right column.

How can i filter collection by collections?

How can i filter collection by collections?

Aurelijus
Tourist
7 1 2

Hi! I would like to ask how can i filter out products by collections (not by tags). In this way i want to create collection filter slider that would work as a sub collection list inside collection. Because shopify doesnt have this feature. And please dont write about navigation bar sub menus it is not sub collections. As for now i have dropdown menu code to filter by tags here it is... :

P.S also i would like to exclude collection where the user currently is, as example if he's browsing collection, he wouldnt see same collection where he is now, he could only see other collections of those products. Because my products have two collections, one would be main and other sub collection

<div class="clearfix filter">

<select class="coll-filter">
<option value="">All</option>
{% for tag in collection.all_tags %} {% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tag }}</option>
{% endif %} {% endfor %}
</select>
</div>
<script>
/* Product Tag Filters - Good for any number of filters on any type of collection pages */
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
if (newTags.length) {
var query = newTags.join('+');
window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query);
}
else {
{% if collection.handle %}
window.location.href = '/collections/{{ collection.handle }}';
{% elsif collection.products.first.type == collection.title %}
window.location.href = '{{ collection.title | url_for_type }}';
{% elsif collection.products.first.vendor == collection.title %}
window.location.href = '{{ collection.title | url_for_vendor }}';
{% endif %}
}
});
</script>

 

 

Replies 0 (0)