Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The sidebar for Shopify's Supply theme, including code to handle an advanced tagging system.
{% comment %}
A customized sidebar for this theme. If advanced tagging is enabled in
theme settings, prepend your tags with "group" names (E.g. BRAND_) and your
collection page will create groups of tags to sort by.
Expansion of https://gist.github.com/darryn/8047749
{% endcomment %}
{% 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:
{% include 'advanced-tag-loop' %}
{% endcomment %}
{% if settings.advanced_tags %}
{% if collection.all_tags.size > 0 %}
<div class="grid-uniform">
{% comment %}
Loop through tag categories
{% endcomment %}
{% for cat_item in cat_array %}
{% comment %}
Ignore if tag category is empty
{% endcomment %}
{% unless cat_item == '' %}
<div class="grid-item small--one-half medium--one-third">
<h3>{{ cat_item }}</h3>
<ul class="collection-filters">
{% comment %}
Loop through collection tags
{% endcomment %}
{% for custom_tag in collection.all_tags %}
{% if custom_tag contains cat_item %}
{% comment %}
Strip out tag category prefix and add/remove link for tag filtering
{% endcomment %}
{% if current_tags contains custom_tag %}
<li class="advanced-filter active-filter" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">{{ custom_tag | remove: cat_item | remove: '_' | link_to_remove_tag: custom_tag }}</li>
{% else %}
<li class="advanced-filter" data-group="{{ cat_item }}">{{ custom_tag | remove: cat_item | remove: '_' | link_to_add_tag: custom_tag }}</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
{% endunless %}
{% endfor %}
</div>
<script>
$(function() {
var currentTags = '{{current_tags}}',
filters = $('.advanced-filter'),
activeTag,
activeHandle;
filters.each(function() {
var el = $(this),
group = el.data('group'),
isActive = el.hasClass('active-filter');
});
filters.on('click', function(e) {
var el = $(this),
group = el.data('group'),
url = el.find('a').attr('href');
// Continue as normal if we're clicking on the active link
if ( el.hasClass('active-filter') ) {
return;
}
// Get active group link (unidentified if there isn't one)
activeTag = $('.active-filter[data-group="'+ group +'"]');
// If a tag from this group is already selected, remove it from the new tag's URL and continue
if ( activeTag && activeTag.data('group') === group ) {
e.preventDefault();
activeHandle = activeTag.data('handle') + '+';
// Create new URL without the currently active handle
url = url.replace(activeHandle, '');
window.location = url;
}
});
});
</script>
{% endif %}
{% else %}
<h3>Tags</h3>
{% 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 %}
<ul>
<li{% unless current_tags %} class="active-filter"{% endunless %}>
{% comment %}
Good for /collections/all collection and regular collections
{% endcomment %}
{% if collection.handle %}
<a href="/collections/{{ collection.handle }}">Everything in {{ collection.title }}</a>
{% comment %}
Good for automatic type collections
{% endcomment %}
{% elsif collection.current_type %}
<a href="{{ collection.current_type | url_for_type }}">Everything in {{ collection.title }}</a>
{% comment %}
Good for automatic vendor collections
{% endcomment %}
{% elsif collection.current_vendor %}
<a href="{{ collection.current_vendor | url_for_vendor }}">Everything in {{ collection.title }}</a>
{% endif %}
</li>
{% 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 %}
{% for cat_item in cat_array %}
{% unless cat_item == '' %}
{% if tag contains cat_item %}
{% assign is_advanced_tag = true %}
{% if current_tags contains tag %}
<li class="active-filter">{{ tag | remove: cat_item | remove: '_' }}</li>
{% else %}
<li>{{ tag | remove: cat_item | remove: '_' | link_to_tag: tag }}</li>
{% endif %}
{% endif %}
{% endunless %}
{% endfor %}
{% if is_advanced_tag == false %}
{% if current_tags contains tag %}
<li class="active-filter">{{ tag }}</li>
{% else %}
<li>{{ tag | link_to_tag: tag }}</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% else %}
<p>Add tags to your products for this list to build itself.</p>
{% endif %}
{% endif %}
@evosy

This comment has been minimized.

Copy link

@evosy evosy commented Nov 30, 2014

is there a tutorial on how to add this to a theme for non coders, where do you put the code ? sorry for these questions, i m not a coder but can follow tutorials and get them done, I have a great theme but missing this amazing navigation ( which should be standard on every theme I believe in shopify ), thanks so much

@NickSal24

This comment has been minimized.

Copy link

@NickSal24 NickSal24 commented Feb 12, 2018

So your code or this topic seems to be the closest to what I need. I have a current shopify site with a sidebar from two main categories. I want a side bar to show of all of the collections for each of the main categories. On one side, we have the sidebar showing for each of the collections under that category, on the other side, there are only a few collections showing on the sidebar and others do not show at all. I am NOT a coder, but have gotten this far... But I can not for the life of me find out why only some collections are showing in the sidebar. I have reached out directly to Shopify to hire one of their "Professionals" and as soon as I bring up this topic, there is zero reply. We are using the "Supply" theme. Our web address is: www.StillPondFarm.com Any help is greatly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment