Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom Shopify sidebar navigation for the District theme to group collections of tags into individual menus.
<!-- /snippets/collection-sidebar.liquid -->
{% comment %}
District Theme
==============
Custom sidebar navigation to display the three menus set in the Customize
Theme menu and advanced tag filtering.
Adding tags in the "Category_Tag Name" format will automatically generate
menus grouped by categories. All of the product tags need to start with a
Category_
The example below will create three menus. One for Color, Featured and Material.
Color_Red
Color_Blue
Color_Black
Featured_New Products
Featured_On Sale
Material_Cotton
Material_Wool
{% endcomment %}
{% assign menu_count = 0 %}
{% if linklists[settings.collections_sidebar_link_list_a].links.size > 0 %}
{% assign menu_count = menu_count | plus: 1 %}
{% endif %}
{% if linklists[settings.collections_sidebar_link_list_b].links.size > 0 %}
{% assign menu_count = menu_count | plus: 1 %}
{% endif %}
{% if linklists[settings.collections_sidebar_link_list_c].links.size > 0 %}
{% assign menu_count = menu_count | plus: 1 %}
{% endif %}
<div class="nav-container">
{% if linklists[settings.collections_sidebar_link_list_a].links.size > 0 %}
<nav class="link-list menu-{{ menu_count }}">
<h5>{{ linklists[settings.collections_sidebar_link_list_a].title }}</h5>
<ul>
{% for link in linklists[settings.collections_sidebar_link_list_a].links %}
<li {% if collection.url == link.url %}class="active"{% endif %}><a href="{{ link.url }}">{{ link.title | escape }}</a></li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% if linklists[settings.collections_sidebar_link_list_b].links.size > 0 %}
<nav class="link-list menu-{{ menu_count }}">
<h5>{{ linklists[settings.collections_sidebar_link_list_b].title }}</h5>
<ul>
{% for link in linklists[settings.collections_sidebar_link_list_b].links %}
<li {% if collection.url == link.url %}class="active"{% endif %}><a href="{{ link.url }}">{{ link.title | escape }}</a></li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% if linklists[settings.collections_sidebar_link_list_c].links.size > 0 %}
<nav class="link-list menu-{{ menu_count }}">
<h5>{{ linklists[settings.collections_sidebar_link_list_c].title }}</h5>
<ul>
{% for link in linklists[settings.collections_sidebar_link_list_c].links %}
<li {% if collection.url == link.url %}class="active"{% endif %}><a href="{{ link.url }}">{{ link.title | escape }}</a></li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% comment %}
Product tags in the current collection
{% endcomment %}
{% if settings.collections_sidebar_tags_enable %}
{% comment %}
A loop to catch and filter out the different tag categories.
This is mainly for advanced tagging, but will also help us strip
out any tag categories from our tags (E.g. remove BRAND_ from BRAND_tag)
{% endcomment %}
{% if template contains 'collection' and collection.all_tags.size > 0 %}
{% assign categories = '' %}
{% for tag in collection.all_tags %}
{% if tag contains '_' %}
{% capture categories %}{% unless categories == blank %}{{ categories }}|{% endunless %}{{ tag | split: '_' | first }}{% endcapture %}
{% endif %}
{% endfor %}
{% assign cat_array = categories | split: '|' | uniq %}
{% endif %}
{% if collection.all_tags.size > 0 %}
{% comment %}
Loop through tag categories
{% endcomment %}
{% for cat_item in cat_array %}
<nav class="tags">
<h5>{{ cat_item }}</h5>
<ul class="advanced-filters">
{% 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 %}
<li class="advanced-filter active active-filter close" data-group="{{ cat_item }}" data-handle="{{ tag | handle }}">{{ tag | remove_first: cat_item | remove_first: '_' | link_to_remove_tag: tag }}</li>
{% else %}
<li class="advanced-filter" data-group="{{ cat_item }}" data-handle="{{ tag | handle }}">{{ tag | remove_first: cat_item | remove_first: '_' | link_to_add_tag: tag }}</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</nav>
{% endfor %}
<script>
$(function() {
var filters = $('.advanced-filter'),
el,
elGroup,
elHandle,
activeTagInGroup;
filters.on('click', function(e) {
el = $(this);
elGroup = el.data('group');
elHandle = el.data('handle');
activeTagInGroup = $('.active-filter[data-group="'+ elGroup +'"]');
// If the tag clicked is not already active and its group contains an active tag, we will swap tag within the group.
if ( !el.hasClass('active-filter') && activeTagInGroup.size() ) {
e.preventDefault();
location.href = location.href
// swap tag
.replace(activeTagInGroup.data('handle'), elHandle)
// go back to page 1
.replace(/(&page=\d+)|(page=\d+&)|(\?page=\d+$)/, '');
}
});
});
</script>
{% endif %}
{% endif %}
</div>
@jonathanmoore

This comment has been minimized.

Copy link
Owner Author

@jonathanmoore jonathanmoore commented Jun 14, 2016

Advanced product collection tag grouping for Shopify collections

Custom sidebar for District Theme by Style Hatch to enable advanced tag filtering in addition to the three menus set in the Customize Theme options.

Adding tags in the "Category_Tag Name" format to products will automatically generate collection filter menus grouped by categories. All of the product tags need to start with a Category_

The example below will create three menus. One for Color, Featured and Material.

  • Color_Red
  • Color_Blue
  • Color_Black
  • Featured_New Products
  • Featured_On Sale
  • Material_Cotton
  • Material_Wool

Setup and Installation

  1. Edit the HTML/CSS for your District Shopify theme
  2. Open the Snippets/collection-sidebar.liquid file
  3. Replace the existing code with the version above
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment