Skip to content

Instantly share code, notes, and snippets.

@schaeken
Last active September 6, 2017 17:55
Show Gist options
  • Save schaeken/03f58114ae7eec90fcea to your computer and use it in GitHub Desktop.
Save schaeken/03f58114ae7eec90fcea to your computer and use it in GitHub Desktop.
Supply's 'advanced tag filtering' with more control of the listing order AND view more functionality

Group Sorting:

  • There is a text field in the theme settings where you list the tag prefixes with no underscores. (ex: Size,Price,Color)
  • All groups must be mentioned in that input field in order to appear.

Individual List Sorting:

  • This requires the use of a Link List in the Navigation area of the Admin
  • The list name is 'reorder_' with the tag prefix to represent the group of tags you want to manually sort. ie Reorder_Size
  • Each link inside this list is the full product tag with prefix and underscore directly the same as in the product page.
  • Only the lists that you want to sort manually need to be created or else it will just use the normal sorting of the list
  • See image below as an example:

http://snapify.shopify.com/28-30-zksi4-s8ox8.jpg

Setting this up

  • You want to find <div class="grid-uniform"> in the collection-sidebar.liquid and replace that section (approx lines 13-44) with what I have above.
<div class="grid-uniform">
{% if settings.manual_group %}
{% assign group_array = settings.manual_group_array | split: ',' %}
{% for group in group_array %}
{% if cat_array contains group %}
{% capture array %}{% unless array == blank or array == "" %}{{ array }},{% endunless %}{{group | strip}}{% endcapture%}
{% endif %}
{% endfor%}
{% assign cat_array = array | split:',' %}
{% endif %}
{% comment %}
Loop through tag categories
{% endcomment %}
{% for cat_item in cat_array %}
{% comment %}
Ignore if tag category is empty
{% endcomment %}
{% assign tags_present = false %}
{% assign indexOfLoop = 0 %}
{% assign viewMore = false %}
{% assign viewMoreLimit = 5 %}
{% if cat_array contains cat_item %}
{% assign tags_present = true %}
{% endif %}
{% unless tags_present == false %}
{% assign linklist_title = cat_item | handleize | prepend: 'reorder_' %}
{% if linklists[linklist_title].links != '' %}
<div class="grid-item small--one-half medium--one-third">
<h3>{{ cat_item }}</h3>
<ul class="advanced-filters sidebar-module__list">
{% for link in linklists[linklist_title].links %}
{% for custom_tag in collection.all_tags %}
{% if link.title == custom_tag %}
{% assign indexOfLoop = indexOfLoop | plus: 1 %}
{% if indexOfLoop > viewMoreLimit %}
{% assign viewMore = true %}
{% endif %}
{% if current_tags contains link.title %}
<li class="advanced-filter active-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}" data-handle="{{ link.title | handleize }}">{{ link.title | remove_first: cat_item | remove: '_' | link_to_remove_tag: link.title }}</li>
{% else %}
<li class="advanced-filter {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}">{{ link.title | remove_first: cat_item | remove: '_' | link_to_add_tag: link.title }}</li>
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% if viewMore %}
<button class="text-link sidebar-module__viewmore">
<span class="sidebar-module__expand">View More</span>
<span class="sidebar-module__collapse">View Less</span>
</button>
{% endif %}
</div>
{% endif %}
{% unless cat_item == '' or linklists[linklist_title].links.size > 0 %}
<div class="grid-item small--one-half medium--one-third">
<h3>{{ cat_item }}</h3>
<ul class="advanced-filters sidebar-module__list">
{% comment %}
Loop through collection tags
{% endcomment %}
{% for custom_tag in collection.all_tags %}
{% if custom_tag contains cat_item %}
{% assign indexOfLoop = indexOfLoop | plus: 1 %}
{% if indexOfLoop > viewMoreLimit %}
{% assign viewMore = true %}
{% endif %}
{% 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 {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" 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 {% if indexOfLoop > viewMoreLimit %}sidebar-module__hidden-item{% endif %}" data-group="{{ cat_item }}">{{ custom_tag | remove: cat_item | remove: '_' | link_to_add_tag: custom_tag }}</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% if viewMore %}
<button class="text-link sidebar-module__viewmore">
<span class="sidebar-module__expand">View More</span>
<span class="sidebar-module__collapse">View Less</span>
</button>
{% endif %}
</div>
{% endunless %}
{% endunless %}
{% endfor %}
</div>
{
"type": "checkbox",
"id": "manual_group",
"label": "Enable manual ordering of groups by comma seperated list?"
},
{
"type": "text",
"id": "manual_group_array",
"label": "Order groups by comma seperated list",
"info": "List items must be identical to the tag prefixes (no underscore). ie. Brand,Product Type,Burn Time (approx),Colour"
}
{% comment %}
Place this just before the end of the body -> </body>
{% endcomment %}
<script>
jQuery(function($) {
$('.sidebar-module__viewmore').on('click', function() {
$(this).prev('.sidebar-module__list').toggleClass('sidebar-module__list--expand');
});
});
</script>
{% comment %}
Place the following add the end of this file
{% endcomment %}
.sidebar-module__hidden-item {
display: none;
}
.sidebar-module__collapse {
display: none;
}
.sidebar-module__viewmore {
top: -25px;
position: relative;
}
.sidebar-module__list--expand {
.sidebar-module__hidden-item {
display: block;
}
+ .sidebar-module__viewmore .sidebar-module__expand {
display: none;
}
+ .sidebar-module__viewmore .sidebar-module__collapse {
display: inline-block;
}
}
@Aim828
Copy link

Aim828 commented Jun 18, 2015

Regarding:
Is there a way to tell it to hide the entire group if sidebar-module__list is empty? For example, I have a website where one category uses a certain group that I've added to the sidebar, but a different category doesn't use that group so it shows up in the sidebar needlessly. Is there a way to fix this?

Any word on this? I'd love to use it on my site, but if I can't get rid of the extra groups then I can't really use it since it looks awkward.

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