Skip to content

Instantly share code, notes, and snippets.

@schaeken
Last active November 18, 2021 13:40
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save schaeken/7c3f9e42e8c5f61a73f6 to your computer and use it in GitHub Desktop.
Save schaeken/7c3f9e42e8c5f61a73f6 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"
}
@voyageisaverb
Copy link

Hello, I am trying to implement reordering sizes on the Prestige theme (i.e., XXS, XS, Small, Medium...). Has anyone had luck doing this? None of these suggestions have worked for me yet.

@raulros825
Copy link

@schaeken how we define cat_array? because it is blank value

@schaeken
Copy link
Author

It's defined in line 13 of advanced-tag-loop.liquid

{% assign cat_array = categories | split: '|' | uniq %}

@raulros825
Copy link

@schaeken can you send me new image for this? http://snapify.shopify.com/28-30-zksi4-s8ox8.jpg
It is blank... thanks!

@schaeken
Copy link
Author

Sorry, that was a long time ago. I have no idea what that image was about.

@JonaLusar
Copy link

Hello, I am also trying to implement reordering sizes on the Prestige theme (i.e., XXS, XS, Small, Medium...).Can anyone help me with this? All the suggestions I tried did not work in my case

Thanks!

@taylor-lindores-reeves
Copy link

Hello, I am also trying to implement reordering sizes on the Prestige theme (i.e., XXS, XS, Small, Medium...).Can anyone help me with this? All the suggestions I tried did not work in my case

Thanks!

Did you get it? I am also using this theme but need to reorder filters. Any help would be appreciated.

@taylor-lindores-reeves
Copy link

Hello, I am trying to implement reordering sizes on the Prestige theme (i.e., XXS, XS, Small, Medium...). Has anyone had luck doing this? None of these suggestions have worked for me yet.

Did you get it? I am also using this theme but need to reorder filters. Any help would be appreciated.

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