Cacher is the code snippet organizer for pro developers

{%comment%}
This is a radio button filter that works by selecting a tag, which updates the URL, and then the
products are updated based on the tag selected
{%endcomment%}

<div class="clearfix filter">
    <span class="filter" style="float:left; margin-right:20px;">Filter by:</span>

    {% include 'get-collection-filters' %}

    <ul class="clearfix filters">
        <li class="radio-inline"><input type="radio" class="pick-radio allCheck" value="" checked>All</li>
        {% for t in myArray %}
        {% assign tag = t | strip %}
            <li class="clearfix filter radio-inline">
                {% if current_tags contains tag %}
                <input type="radio" class="pick-radio all-btn" value="{{ tag | handle }}" checked="checked">{{ tag }}
                {% else %}
                <input type="radio" class="pick-radio" value="{{ tag | handle }}" >{{ tag }}
                {%endif%}
            </li>
        {% endfor %}
    </ul>

</div>


<script>
if (jQuery('.all-btn').prop('checked')) {
    jQuery('.allCheck').prop('checked',false)
}
else {
    jQuery('.allCheck').prop('checked',true)
};
</script>


<script>
  /* Adapted Product Tag Filters - originally from Caroline Schnapp */
  var collFilters = jQuery('.pick-radio');

  collFilters.change(function() {
      var newTag = [];

      if (collFilters.prop("checked",true)) {

          if (jQuery(this).val()) {
              //jQuery(this).val() becomes the tag value selected in drop down menu, e.g. "spikes"
             
              //if this.val finds an element, array.push will add the item to the end of they array
              newTag.push(jQuery(this).val());
              //newTag holds the tag selected, e.g. spikes
              //because the array is not storing tags, each tag selection does a page load/ clears the array
          }
      }


  //if newTag array is valid/ not empty
  if (newTag.length) {
      //new query variable makes array into a string with element1 + element2 + element3
      var query = newTag.join('+');
      //query holds new tag, e.g. spikes
      console.log("query:",query);
      //window.location.href returns the URL of the current page
      //so this changes the current url with jQuery
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
  }
  //if newTag is empty
  else {
      //if collection.handle = e.g. jewelry; e.g. /collections/jewelry
      {% if collection.handle %}
      window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
      window.location.href = '{{ collection.title | url_for_type }}';
      {% elsif collection.products.first.vendor == collection.title %}
      window.location.href = '{{ collection.title | url_for_vendor }}';
      {% endif %}
  }
  });
  </script>

{% case handle %}

{% when "jewelry" %}
{% assign myArray = "earrings|necklaces|rings|bracelets|statement" | split: "|" %}
{% when "accessories" %}
{% assign myArray = "bags|purses|wallets|watches" | split: "|" %}
{% when "apparel" %}
{% assign myArray = "women|men|kids|t-shirts" | split: "|" %}
{% when "art" %}
{% assign myArray = "photography|prints|framed art| decals" | split: "|" %}
{% when "papery" %}
{% assign myArray = "cards|journals|stationery|customized" | split: "|" %}
{% when "wedding" %}
{% assign myArray = "bridal|groom|decor|gifts" | split: "|" %}
{% when "men" %}
{% assign myArray = "apparel|bags|wallets|accessories" | split: "|" %}
{% when "women" %}
{% assign myArray = "apparel|bags|jewelry|accessories" | split: "|" %}
{% when "kids" %}
{% assign myArray = "apparel|toys|decor|baby" | split: "|" %}
{% when "home" %}
{% assign myArray = "decor|kitchen|lighting|tabletop|furniture" | split: "|" %}
{% when "pets" %}
{% assign myArray = "leashes|collars|toys" | split: "|" %}

{% endcase %}