Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kagaim/56e81257036d12093748fde987da3c19 to your computer and use it in GitHub Desktop.
Save kagaim/56e81257036d12093748fde987da3c19 to your computer and use it in GitHub Desktop.
Control the display order of tag groups lists in the collection sidebar using Supply's 'advanced tag filtering' - and control the sort order of the list items within that group using a link list.

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, if no groups are mentioned then it will go in alphabetical order.

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

<div class="grid-uniform">
{% assign group_array = settings.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:',' %}
{% comment %}
If the theme setting for group array is empty then use the default cat_array order
{% endcomment %}
{% if group_array == blank %}
{% assign group_array = cat_array %}
{% endif %}
{% comment %}
Loop through tag categories
{% endcomment %}
{% for cat_item in group_array %}
{% assign tags_present = false %}
{% 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">
{% comment %}
Loop through collection tags
{% endcomment %}
{% for link in linklists[linklist_title].links %}
{% for tag in collection.all_tags %}
{% if tag contains link.title %}
{% 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-filter" 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 %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</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">
{% 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-filter" 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>
</div>
{% endunless %}
{% endunless %}
{% endfor %}
</div>
{
"type": "text",
"label": "Type the sidebar's tag groups in a comma-separated list.",
"id": "group_array",
"info": "List items must be identical to the tag prefixes (no underscore), and have no spaces between commas.ie. Brand,Product Type,Burn Time (approx),Colour"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment