filters again revisited with more examples. Shopify

gistfile1.txt

<div class="desktop-2 tablet-6 mobile-3" id="aside">
  <div id="sidebar">

    {% comment %}
    {% if collection.image %}
    {{ collection.image.src | collection_img_url: 'compact' | img_tag: collection_title }}
    {% endif %}
    {% endcomment %}
    
    
    

    {% if section.settings.sort_by %}
    <h2>{{ 'collections.sorting.title' | t }}</h2>
    <div>
      <select id="sort-by" class="styled-select">
        <option value="manual">{{ 'collections.sorting.featured' | t }}</option>
        <option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option>
        <option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option>
        <option value="title-ascending">{{ 'collections.sorting.az' | t }}</option>
        <option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
        <option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option>
        <option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option>
        <option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option>
      </select>
    </div>
    {% endif %}



    

    
    
     {% comment %} filters by price {% endcomment  %}
    
    {% assign tags = section.settings.tags_1 | split: ',' %}
    {% assign show-filter = false %}
    {% for tag in tags %}
    {% if collection.all_tags contains tag %}
    {% assign show-filter = true %}
    {% endif %}
    {% endfor %}
    
    {% if show-filter %}
    <h2>Filter by Size</h2>
    <ul class="subnav clearfix listitems autosort">
      {% for tag in tags %}
      {% if current_tags contains tag %}
      <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
      {% elsif collection.all_tags contains tag %}
      <li>{{ tag | link_to_add_tag: tag }}</li>
      {% endif %}
      {% endfor %}
    </ul>
    {% endif %}
    
    
    
    
    
    
    
    
    
    
    
    
     {% comment %} filters by price {% endcomment  %}
    
    {% assign tags = section.settings.tags_2 | split: ',' %}
    {% assign show-filter = false %}
    {% for tag in tags %}
    {% if collection.all_tags contains tag %}
    {% assign show-filter = true %}
    {% endif %}
    {% endfor %}
    
    {% if show-filter %}
    <h2>Filter by Price</h2>
    <ul class="subnav clearfix listitems autosort">
      {% for tag in tags %}
      {% if current_tags contains tag %}
      <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
      {% elsif collection.all_tags contains tag %}
      <li>{{ tag | link_to_add_tag: tag }}</li>
      {% endif %}
      {% endfor %}
    </ul>
    {% endif %}

    
    
    
    
    
    
    
    
    
    
    {% comment %} filters by type {% endcomment  %}
    
    {% assign tags = section.settings.tags_3 | split: ',' %}
    {% assign show-filter = false %}
    {% for tag in tags %}
    {% if collection.all_tags contains tag %}
    {% assign show-filter = true %}
    {% endif %}
    {% endfor %}
    
    {% if show-filter %}
    <h2>Filter by Type</h2>
    <ul class="subnav clearfix listitems autosort">
      {% for tag in tags %}
      {% if current_tags contains tag %}
      <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
      {% elsif collection.all_tags contains tag %}
      <li>{{ tag | link_to_add_tag: tag }}</li>
      {% endif %}
      {% endfor %}
    </ul>
    {% endif %}

    
    
    
    
    
   {% comment %} filters by style {% endcomment  %}
    
    {% assign tags = section.settings.tags_4 | split: ',' %}
    {% assign show-filter = false %}
    {% for tag in tags %}
    {% if collection.all_tags contains tag %}
    {% assign show-filter = true %}
    {% endif %}
    {% endfor %}
    
    {% if show-filter %}
    <h2>Filter by Style</h2>
    <ul class="subnav clearfix listitems autosort">
      {% for tag in tags %}
      {% if current_tags contains tag %}
      <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
      {% elsif collection.all_tags contains tag %}
      <li>{{ tag | link_to_add_tag: tag }}</li>
      {% endif %}
      {% endfor %}
    </ul>
    {% endif %}



    
    
    
    {% comment %} for testing
    <h2>Current tags</h2>
    {% for tag in collection.all_tags %}
    {% if current_tags contains tag %}
          <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
    {% else %}
          <li>{{ tag | link_to_add_tag: tag }}</li>
    {% endif %}
	{% endfor %}
    
    {% endcomment %}
    
    
    {% comment %}
    Include block settings for collection template to add sidebar menus
    {% endcomment %}

    {% for block in section.blocks %}
     {% if block.type == 'vendor_list' %}
      {% if collection.handle == "all" %}
      <ul>
        <h2>{{ 'collections.general.shop_by_designer' | t }}</h2>
        {% for product_vendor in shop.vendors %}
        <li>{{ product_vendor | link_to_vendor  }}</li>
        {% endfor %}
      </ul>
      {% else %}
      <ul>
        <h2>{{ 'collections.general.shop_by_designer' | t }}</h2>
        {% for product_vendor in collection.all_vendors %}
        <li class="{{ product_vendor | handelize }}">{{ product_vendor | link_to_vendor }}</li>
        {% endfor %}
      </ul>
      {% endif %}
    {% else %}

    <ul class="sidebar-accordion" {{ block.shopify_attributes }}>
      <h2>{{ block.settings.title }}</h2>
      {% for link in linklists[block.settings.side_nav].links %}
        {% if link.links != blank %}
          <li class="extend has_sub_menu" aria-haspopup="true" aria-expanded="false">{{ link.title }}</li>
            <ul class="extended-submenu">
              {% for sub_link in link.links %}
                <li><a href="{{ sub_link.url }}">{{ sub_link.title }}</a></li>
              {% endfor %}
            </ul>

        {% else %}
          <li>{{ link.title | link_to: link.url }}</li>
          {% endif %}
      {% endfor %}
    </ul>

    {% endif %}

    {% endfor %}
    
    
    
    
    




  </div>

  <script>
    Shopify.queryParams = {};
    if (location.search.length) {
      for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
        aKeyValue = aCouples[i].split('=');
        if (aKeyValue.length > 1) {
          Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
        }
      }
    }
    jQuery('#sort-by')
    .val('{{ collection.sort_by | default: collection.default_sort_by  }}')
         .bind('change', function() {
      Shopify.queryParams.sort_by = jQuery(this).val();
      location.search = jQuery.param(Shopify.queryParams);
    });

  
  
  
  
  $(".listitems.autosort").each(function(){
    $(this).html($(this).children('li').sort(function(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
    }));
});
  </script>  
  

  {% if section.settings.sticky-sidebar %}
  <script>

    if($(window).width() > 980){

      $('#sidebar').stickySidebar({

        sidebarTopMargin: 100,
        footerThreshold: 100

      });
    };
    
    

    
  </script>
  {% endif %}

</div>




<style>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Subnavigation styles */
.subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }
.subnav li { display: block; float: left; }
.subnav li a {
  display: block;
  height: 28px;
  line-height: 28px;
  padding: 0 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  background: #eee;
  margin: 0 7px 7px 0;
  color: #666;
  -webkit-transition: color 0.1s ease-in;
    -moz-transition: color 0.1s ease-in;
    -o-transition: color 0.1s ease-in;
    transition: color 0.1s ease-in;
}
.subnav li a:hover, .subnav li.active a {
  background: {{ settings.button_color}};
  color: #fff;
}
  
  .subnav li.active {background:transparent;}
  ul.subnav.clearfix.listitems.autosort {
    margin-top: 0;
}
</style>