Created
March 29, 2019 08:33
-
-
Save bstonedev/bd58efb4a77a7d6ae7746989c778bbb9 to your computer and use it in GitHub Desktop.
loop through all unique tags across your products, list products according to those unique tags.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Demo: https://stone-digital-test.myshopify.com/pages/tag-loop-example | |
<!-- Step 1) create comprehensive list of all tags ie. tags_list --> | |
{% capture tags_list %} | |
{% for product in collections.all-products.products %} | |
{% for tag in product.tags %} | |
{{ tag | strip | strip_newlines }}{% if forloop.last == true %}{% else %},{% endif %} | |
{% endfor %}{% if forloop.last == true %}{% else %},{% endif %} | |
{% endfor %} | |
{% endcapture %} | |
<!-- Step 2) turn tags_list into tags_array --> | |
{% assign tags_array = tags_list | split: ',' | uniq %} | |
<!-- Step 3.0) loop thru all unique tagzz ... --> | |
<!-- "tagzz" being our little nickname for "tags" --> | |
{% for tagzz in tags_array %} | |
<h1>{{ tagzz }}</h1> | |
<!-- Step 3.1) ... then loop thru all products ... --> | |
{% for product in collections.all-products.products %} | |
<div class="tag-list-page__outer"> | |
<!-- Step 3.2) ... then, if product tag matches our unique tag then list product. --> | |
{% for tag in product.tags %} | |
{% capture little_tag %}{{ tag }}{% endcapture %} | |
{% if tagzz contains little_tag %} | |
<div class="tag-list-page__tile"> | |
<img src="{{ product | img_url: '300x300' }}"> | |
<a href="{{ product.url }}"> | |
{{ product.title }} | |
</a> | |
</div> | |
{% endif %} | |
{% endfor %} | |
</div> | |
{% endfor %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment