Shopify filter section with AND condition

shopify-filter.liquid

<div id="sidebarColumn" class="col-md-3">
  <!-- <div id="sidebar" class="sidebar selection-sec"> -->
  <div class="selection-sec">
    <div class="selection-sec-inner">
    <div class="shape-sec">
      <h5>Select a Shape</h5>
      <ul class="more">
        {% assign file_extension = 'png' %}
        {% if collection.handle == 'all' %}
        {% for tag in collection.all_tags %}
        {% if tag contains 'shape_' %}                
        <li class="shape-box-{{tag | split: '_' | last}}"><input type="checkbox" class="shape-checkbox" value="{{tag | downcase | replace: '/', '-'}}" {% if current_tags contains tag %}checked{% endif %}>                          
          <label for="shape-label" style="background-image: url({{ tag | downcase | split: '_' | last | replace: ' ', '-' | append: '.' | append: file_extension | asset_url }});">                            
          </label>
        </li>
        {% endif %}
        {% endfor %}
        {% else %}
        {% for tag in collections[collec_handle].all_tags %}
        {% if tag contains 'shape_' %}
        <li class="shape-box-{{tag | split: '_' | last}} "><input type="checkbox" class="shape-checkbox" value="{{tag | downcase | replace: '/', '-'}}" {% if current_tags contains tag %}checked{% endif %}>
          <label for="shape-label" style="background-image: url({{ tag | downcase | split: '_' | last  | replace: ' ', '-' | append: '.' | append: file_extension | asset_url }});">                            
          </label>  
        </li>
        {% endif %}
        {% endfor %}
        {% endif %}                 
      </ul>             
    </div>
    <div class="color-sec">
      <h5>Select a Color</h5>
      <ul>                
        {% if collection.handle == 'all' %}
        {% for tag in collection.all_tags %}
        {% if tag contains 'color_' %}                
        <li class="color-box-{{tag | split: '_' | last}} shade-checkbox" style="background-color: {{ tag | split: '_' | last }}; background-image: url({{ tag | split: '_' | last | append: '_50x50.' | append: file_extension | asset_url }})"><input type="checkbox" class="color-checkbox" value="{{tag | downcase | replace: '/', '-'}}" {% if current_tags contains tag %}checked{% endif %}></li>
        {% endif %}
        {% endfor %}
        {% else %}
        {% for tag in collections[collec_handle].all_tags %}
        {% if tag contains 'color_' %}
        <li class="color-box-{{tag | split: '_' | last}} " style="background-color: {{ tag | split: '_' | last }}; background-image: url({{ tag | split: '_' | last | append: '_50x50.' | append: file_extension | asset_url }})"><input type="checkbox" class="color-checkbox" value="{{tag | downcase | replace: '/', '-'}}" {% if current_tags contains tag %}checked{% endif %}></li>
        {% endif %}
        {% endfor %}
        {% endif %}                       
      </ul>              
    </div>
    <div class="category-sec">
      <h5>Subjects</h5>
      <ul class="more">
        {% if collection.handle != 'all' %}
        {% for link in linklists[collec_handle].links %}
        <li><input type="checkbox" class="coll-filter" name="collection" value="{{link.url}}" {% if link.active %}checked{% endif %}> <p> {{link.title}}</p></li>
        {% endfor %}   
        {% else %}
        {% for collec in collections %}
        <li><input type="checkbox" class="coll-filter" name="collection" value="{{collec.url}}"> <p> {{collec.title}}</p></li>
        {% endfor %} 
        {% endif %}
      </ul>
    </div>
  </div>
  <div class="clear-filter"><a href="{{collection.url}}" class="filter-btn"><i class="fa fa-refresh" aria-hidden="true"></i> Clear</a></div>
  </div>
<!-- </div> -->
</div>

<script>
jQuery(document).ready(function(){

  var cururl = window.location.href;
  if((cururl.toLowerCase().indexOf("shape_") == -1) && (cururl.toLowerCase().indexOf("color_") == -1)){
    localStorage.clear();
  }

  var collFilters = jQuery('.color-checkbox');
  collFilters.change(function () {
    var newTags = [];
    var tags = '';
    localStorage.color = '';
    $('input.color-checkbox').not(this).prop('checked', false);
    collFilters.each(function () {
      if ($(this).is(":checked")) {
        tags = jQuery(this).val();
        newTags.push(tags.split(' ').join('-'));
        localStorage.color = jQuery(this).val();
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      if (localStorage.distressed != ''  || localStorage.distressed != 'undefined') {
        var distressedval = localStorage.distressed;
        query = distressedval + '+' + query;      
      } else {
        query = query;      
      }    
      var filter_url = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
      filter_url = filter_url.replace('+undefined+', '+');
      filter_url = filter_url.replace('undefined+', '');
      filter_url = filter_url.replace('undefined','');
      filter_url = filter_url.replace('/+','/');
      window.location.href = filter_url;
    } else {
      if (localStorage.distressed != '' || localStorage.distressed != 'undefined') {
        var distressedval = localStorage.distressed;
        query = distressedval;
        var filter_url = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
        filter_url = filter_url.replace('+undefined+', '+');
        filter_url = filter_url.replace('undefined+','');
        filter_url = filter_url.replace('undefined','');
        filter_url = filter_url.replace('/+','/');
        window.location.href = filter_url;
      } else {
        window.location.href = '/collections/{{collec_handle}}';
      }
    }
    //alert(fit);    
  });
    

  var distressedFilters = jQuery('.shape-checkbox');
    distressedFilters.change(function() {
      var newTags = [];
      var tags = '';   
      localStorage.distressed = '';
      $('input.shape-checkbox').not(this).prop('checked', false);  
      distressedFilters.each(function() {
        if($(this).is(":checked")) {
          tags = jQuery(this).val();        
          newTags.push(tags.split(' ').join('-'));
          localStorage.distressed = jQuery(this).val();
        }
      });
      if (newTags.length) {       
        var query = newTags.join('+');        
        if (localStorage.color != '' || localStorage.color != 'undefined')
        {
          var colorval = localStorage.color;
          query = colorval+'+'+query;          
        }else{
          query = query;           
        } 
        var filter_url = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
        filter_url = filter_url.replace('+undefined+','+');
        filter_url = filter_url.replace('undefined+','');
        filter_url = filter_url.replace('undefined','');
        filter_url = filter_url.replace('/+','/');
        window.location.href = filter_url;
    }else{
        if (localStorage.color != '' || localStorage.color != 'undefined')
        {
          var colorval = localStorage.color;
          query = colorval;
          var filter_url = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
          filter_url = filter_url.replace('+undefined+','+'); 
          filter_url = filter_url.replace('undefined+','');
          filter_url = filter_url.replace('undefined','');
          filter_url = filter_url.replace('/+','/');
          window.location.href = filter_url;                               
        }else{      
          window.location.href = '/collections/{{collec_handle}}';
      }            
    }
      //alert(fit);    
  }); 

}); 
</script>