Shopify sidebar filters

shopify_sidebar_filters.liquid

{% comment %} let's buid a sidebar collection navi menu in Shopify {% endcomment %}


{% comment %} note - we use this - https://semantic-ui.com/introduction/getting-started.html {% endcomment %}
{% comment %} initiate plugin via footer and load assets in header {% endcomment %}
{{ 'semantic.min.css' | asset_url | script_tag }}
{{ 'jquery.min.js' | asset_url | script_tag }}
{{ 'jquery.min.js' | asset_url | script_tag }}

{% comment %} links should be collections and submenus must exist {% endcomment %}

{% comment %} tag filters {% endcomment %}

{% comment %} here we grab some stuff to use later {% endcomment %}		
{% comment %} count collections tags {% endcomment %}
{% comment %} here we are using the menu with handle 'sidebar-menu' - you can change as required {% endcomment %}

{% assign count_collections_tags = 0 %}
{% for link in linklists.sidebar-menu.links %}
{% capture count_collections_tags %}{{ count_collections_tags | plus: 1 }}{% endcapture %}
{% endfor %}

{% comment %}count tags{% endcomment %}
{% assign count = 0 %}
{% for tag in collection.tags %}
{% capture count %}{{ count | plus: 1 }}{% endcapture %}
{% endfor %}
{% assign total = count | minus: count_collections_tags %}

{% comment %} get the main collection {% endcomment %}
{% assign mastercollection = collection %}

<div class="sidebar_inner">

<h2>Shop by Collection</h2>
  

<div class="sidebar__section">
  <div class="ui styled accordion">
    <ul>
      {% for link in linklists.sidebar-menu.links %}
      {% assign child_list_handle = link.title | handle %}
      {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
      <li class="has-children">
        <h3 class="{% if link.active %}active_link{% endif %} title"><i class="dropdown icon"></i> {{ link.title }}</h3>
        <div class="content">
          <ul class="transition hidden">
            <li><a href="{{ link.url }}">All</a></li>
            {% for child_link in linklists[child_list_handle].links %}
            <li class="{% if child_link.active %}active_link{% endif %}">
              {{ child_link.title | link_to: child_link.url }}
            </li>
            {% endfor %}        
          </ul>
        </div>
      </li>

      {% endif %}
      {% endfor %}
    </ul>  
  </div>
  </div>
  
  

</div>




<script>
// initiate the plugin in footer
  $(document).ready(function() {
    $('.ui.accordion').accordion();
});
</script>