Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[Shopify] Three level collection navigation using tags
<ul>
{% comment %}A linklist should be created called "Collections" containing each of the "top" level collections{% endcomment %}
{% for link in linklists.collections.links %}
{% assign col = link.object %}
<li class="{% if col.handle == collection.handle %}active{% endif %}">
<a href="{{ link.url }}"><span>{{ link.title }}</span></a>
{% if col.all_tags.size > 0 %}
<ul>
{% assign tag_index = 0 %}
{% assign current_tag = "" %}
{% for tag in col.tags %}
{% comment %}Return the full tag and split it into parts {% endcomment %}
{% assign tag_title = tag | split: ' - ' %}
{% comment %}We need to get the current index to check the next tag {% endcomment %}
{% assign tag_index = forloop.index %}
{% assign next_tag = col.tags[tag_index] | split: ' - ' %}
{% comment %}We can check if the tag contains the collection title, and if a "sub collection" tag exists within this tag {% endcomment %}
{% assign tag_handle = tag | handle %}
{% if tag_handle contains col.handle and tag_title.size > 1 %}
{% unless tag_title[1] == current_tag %}
<li><a href="{{ link.url }}/{{ tag | handle }}">{{ tag_title[1] }}</a>
{% if next_tag[1] == tag_title[1] %}<ul>{% else %}</li>{% endif %}
{% endunless %}
{% comment %}If the tag was split into more than two parts, we know a third level exists {% endcomment %}
{% if tag_title.size > 2 and tag_title[1] == current_tag %}
<li><a href="{{ link.url }}/{{ tag | handle }}">{{ tag_title[2] }}</a></li>
{% if current_tag != next_tag[1] %}</ul></li>{% endif %}
{% endif %}
{% assign current_tag = tag_title[1] %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment