Instantly share code, notes, and snippets.
Created
June 16, 2016 14:25
-
Save joe-dempsey/0edff27b472520eece408b38341e8e05 to your computer and use it in GitHub Desktop.
This file contains 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
{% comment %} there's instances were we need to use categories and subcategories in Shopify and we get pissed with hacking around {% endcomment%} | |
{% comment %} Here's an example where we're using menu's of categories to create sub cats - no need for tags {% endcomment%} | |
{% comment%} pay atention to the assign/escape assign {% endcomment%} | |
{% comment%} categories without a product will not be displayed {% endcomment%} | |
<!-- example 1 ================================================== --> | |
<!-- basic cat menu with product count (e.g. in sidebar) ================================================== --> | |
<!-- grab the collection as we'll need to reassign that later ================================================== --> | |
{% assign mastercollection = collection %} | |
<!-- trust me on this - we need it ================================================== --> | |
<!-- here we assign the menu categories_nav which is the handle of a menu already created which links to the categories ================================================== --> | |
<div class="widget-content"> | |
<ul> | |
{% assign linklist = settings.categories_nav %} | |
{% for link in linklists[linklist].links %} | |
{% assign collection = link.object %} | |
{% if collection.products_count > 0 %}<li>{{ link.title | link_to: link.url }} ({{ collection.products_count }})</li> {% endif %} | |
{% endfor %} | |
</ul> | |
</div> | |
<!-- escape the assigned collection or it fucks things up ================================================== --> | |
{% assign collection = mastercollection %} | |
<!-- escape the assigned collection or it fucks things up ================================================== --> | |
<!-- example 2 ================================================== --> | |
<!-- example 2 ================================================== --> | |
<!-- example 2 ================================================== --> | |
<!-- more complex cat menu with product count and subcategories (e.g. in sidebar) ================================================== --> | |
<!-- we don't use tags to create this (I hate tags) - just categories - everything is a category ================================================== --> | |
<!-- you need to set up menus as usual and child menus with matching names ================================================== --> | |
{% comment %} assign the menu - in this case collections_nav {% endcomment %} | |
{% assign linklist = settings.collections_nav %} | |
<div class="widget-content"> | |
<ul> | |
{% for link in linklists[linklist].links %} | |
{% assign child_list_handle = link.title | handle %} | |
{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %} | |
<li class="has-dropdown mummy"> | |
<!-- assign the collection to get the count ================================================== --> | |
{% assign collection = link.object %} | |
<!-- link and count ================================================== --> | |
{{ link.title | link_to: link.url }} ({{ collection.products_count }}) | |
<ul> | |
{% for child_link in linklists[child_list_handle].links %} | |
{% assign grand_child_list_handle = child_link.title | handle %} | |
{% if linklists[grand_child_list_handle] and linklists[grand_child_list_handle].links.size > 0 %} | |
<li class="has-dropdown"> | |
{{ child_link.title | link_to: child_link.url }} | |
<ul> | |
{% for grand_child_link in linklists[grand_child_list_handle].links %} | |
{% assign collection = grand_child_link.object %} | |
<li> | |
{{ grand_child_link.title | link_to: grand_child_link.url }} ({{ collection.products_count }}) | |
</li> | |
{% endfor %} | |
</ul> | |
</li> | |
{% else %} | |
{% assign collection = child_link.object %} | |
{% if collection.products_count > 0 %} | |
<li class="child"> | |
<!-- assign the collection to get the count ================================================== --> | |
<!-- link and count ================================================== --> | |
{{ child_link.title | link_to: child_link.url }} ({{ collection.products_count }}) | |
</li> | |
{% endif %} | |
{% endif %} | |
{% endfor %} | |
</ul> | |
</li> | |
{% else %} | |
<li> | |
{% assign collection = link.object %} | |
{{ link.title | link_to: link.url }} ({{ collection.products_count }}) | |
</li> | |
{% endif %} | |
{% endfor %} | |
</ul> | |
</div> | |
</div> | |
<!-- /collections ================================================== --> | |
<!-- escape the assigned collection or it fucks things up ================================================== --> | |
{% assign collection = mastercollection %} | |
<!-- escape the assigned collection or it fucks things up ================================================== --> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey Quentin
category/tag & URL structure on Shopify is fixed - and will not change regardless of the code we use.
you have collections (aka categories) and then tags (which you can use for multiple things including subcategories)
so in Shopify it's
/collection/tag
example URL:
https://www.urbanexcess.com/collections/all-footwear/sizes-uk-10-eu-44
that filters all products in collection all-footwear with tag sizes-uk-10-eu-44
The above code is kinda old but should work to generate a sidebar menu of filters.
It's more about allowing control of the actual filter menu (order etc) for clients rather than other methods which put them in alphabetical order.
with shopify you kinda have to use pseudo categories / subcategories which takes a while to get your head around if coming from other platforms.
But you can see something similar (but a lot more complex code) https://kerry-food-services.myshopify.com/collections/all
To the end user it has Categories and subcategories
in the backend products have collections and tags