Lookbook – Advanced Filtering

1.instructions.md

Advanced Filtering for Lookbook

Preface: This needs a lot of cleaning up but on the front end it's beautiful.

Add the icons font from the supply theme. This will work without the icons font.

Add the filters.liquid file to your snippets folder. Include the snippet on the collections.liquid page

See demo here for a limited time: http://simplejacktest.myshopify.com/collections/all

Ends up looking like this:

filters.liquid

{% comment %}
  A recursive loop to catch and filter out the different tag categories.
  This is mainly for advanced tagging, but will also help us strip
  out any tag categories from our tags (E.g. remove BRAND_ from BRAND_tag)
  
{% endcomment %}
{% if template contains 'collection' and collection.all_tags.size > 0 %}
  {% assign c = 0 %}
  {% for t in collection.all_tags %}
  {% capture cat %}{{ cat }}{% capture temp_cat %}{% if t contains '_' %}{% assign cat_grp = t | split: '_' %}{{ cat_grp.first }}{% endif %}{% endcapture %}{% unless cat contains temp_cat %}{% if t contains '_' %}{% assign new_cat_grp = t | split: '_' %}{{ new_cat_grp.first }}{% endif %}{% unless forloop.last %}+{% endunless %}{% assign c = c | plus: 1 %}{% endunless %}{% endcapture %}
  {% endfor %}
  {% assign cat_array = cat | split: '+' %}
{% endif %}

<div class="wrapper-demo">
  {% include 'advanced-tag-loop' %}
  {% unless settings.group_array == '' %}
  {% assign cat_array = settings.group_array | split: ',' %}
  {% endunless %}
  {% assign i = 0 %}
  {% if collection.all_tags.size > 0 %}
  {% for cat_item in cat_array %}
  {% unless cat_item == '' %}
  {% assign i = 1 | plus: i %}
  {% if settings.collection_sort %}
  <div class="wrapper-dropdown-1 {{ i }}" tabindex="{{ i }}">
    <span>{{ cat_item }}</span>
    <ul class="advanced-filters dropdown">
      {% for custom_tag in collection.all_tags %}
      {% assign tag_count = '' %}
      {% assign tag_count = 0 %}
      {% for product in collection.products %}
      {% if product.tags contains custom_tag %}
      {% capture tag_count %}{{ tag_count | plus: 1 }}{% endcapture %}
      {% endif %}
      {% endfor %}
      {% capture tag_count %}<small> ({{ tag_count }})</small>{% endcapture %}      {% if custom_tag contains cat_item %}
      {% if current_tags contains custom_tag %}
      <li class="advanced-filter active-filter" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">{{ custom_tag | remove_first: cat_item | remove: '_' | link_to_remove_tag: custom_tag }}</li>
      {% else %}
      <li class="advanced-filter {% unless collection.tags contains custom_tag %}disabled{% endunless %}" data-group="{{ cat_item }}">{{ custom_tag | remove_first: cat_item | remove: '_' | append: tag_count | link_to_add_tag: custom_tag }}</li>
      {% endif %}
      {% endif %}
      {% endfor %}
    </ul>
  </div>
  {% endif %}
  {% endunless %}
  {% endfor %}
  {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
</div>

<script>
  $(function() {
    var currentTags = '{{ current_tags }}',
    filters = $('.advanced-filter'),
      activeTag,
      activeHandle;

    filters.each(function() {
      var el = $(this),
          group = el.data('group'),
          isActive = el.hasClass('active-filter');
    });

    filters.on('click', function(e) {
      var el = $(this),
          group = el.data('group'),
          url = el.find('a').attr('href');

      // Continue as normal if we're clicking on the active link
      if ( el.hasClass('active-filter') ) {
        return;
      }

      // Get active group link (unidentified if there isn't one)
      activeTag = $('.active-filter[data-group="'+ group +'"]');

      // If a tag from this group is already selected, remove it from the new tag's URL and continue
      if ( activeTag && activeTag.data('group') === group ) {
        e.preventDefault();
        activeHandle = activeTag.data('handle') + '+';

        // Create new URL without the currently active handle
        url = url.replace(activeHandle, '');

        window.location = url;
      }
    });
  });
</script>

{% endif %}

style.scss.liquid

.wrapper-demo {
  margin: 60px 0 0 0;
  *zoom: 1;
  font-weight: 400;
  position: absolute;
  left: 0px;
  bottom: $ts-bottomheight;
  z-index:9999;
}

.wrapper-demo:after {
    clear: both;
    content: "";
    display: table;
}

.wrapper-dropdown-1 {
    /* Size and position */
    position: relative; /* Enable absolute positionning for children and pseudo elements */
    width: 170px;
    padding: 10px;
    margin: 0 auto;
    float:left;

    /* Styles */
    background: #00bfff;
    color: #fff;
    outline: none;
    cursor: pointer;
    opacity:1;

    /* Font settings */
    font-weight: bold;
}

.wrapper-dropdown-1:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent #fff;    
}

.wrapper-dropdown-1 .dropdown {
    /* Size & position */
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    list-style: none;
    font-weight: normal; /* Cancels previous font-weight: bold; */

    /* Hiding */
    opacity: 0;
    /*pointer-events: none;*/
}

.wrapper-dropdown-1 .dropdown li {
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover {
    opacity:0.7;
}

/* Active state */
.wrapper-dropdown-1.active .dropdown {
    opacity: 1;
}

.wrapper-dropdown-1.active:after {
  border-color: #9bc7de transparent;
  border-width: 0px 6px 6px 6px;
  margin-top: -3px;
}

.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: -moz-linear-gradient(left,  #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9bc7de), color-stop(78%,#9bc7de), color-stop(78%,#ffffff), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: -o-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: -ms-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: linear-gradient(to right,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de', endColorstr='#ffffff',GradientType=1 );
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    /*pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
    display: block;
}



/*============================================================================
  #Collection Filters
==============================================================================*/

$filterIconWidth: 12px;
$innerFilterIconWidth: 6px;

// Icons
@font-face {
  font-family: "icons";
  src: url('{{ 'icons.eot' | asset_url }}');
  src: url('{{ 'icons.eot' | asset_url }}#iefix') format("embedded-opentype"),
       url('{{ 'icons.woff' | asset_url }}') format("woff"),
       url('{{ 'icons.ttf' | asset_url }}') format("truetype"),
       url('{{ 'icons.svg' | asset_url }}#timber-icons') format("svg");
  font-weight: normal;
  font-style: normal;
}
$socialIconFontStack: 'icons';

.wrapper-demo span{
  text-transform: capitalize;
}

.advanced-filters a {
  display: block;
  position: relative;
  padding-left: $filterIconWidth + 8px;
  text-transform: capitalize;

  &:before,
  &:after {
    content:'';
    display: block;
    position: absolute;
  }

  &:before {
    top: 6px;
    left: 0;
    width: $filterIconWidth;
    height: $filterIconWidth;
    background-color: grey;
    border: 1px solid grey;
    border-radius: 50%;
  }

  &:after {
    top: 6px + ($filterIconWidth - $innerFilterIconWidth)/2;
    left: 0 + ($filterIconWidth - $innerFilterIconWidth)/2;
    width: $innerFilterIconWidth;
    height: $innerFilterIconWidth;
    background-color: transparent;
    border-radius: 50%;
  }

  &:hover:after {
    background-color: black;
  }
}

.advanced-filter.active-filter {
  a:after {
    background-color: #000;
  }

  a:hover:after {
    content: '\78';
    top: 6px;
    left: 0;
    width: $filterIconWidth;
    height: $filterIconWidth;
    background-color: #000;
    font-size: $filterIconWidth - 4;
    text-align: center;
    color: #fff;
    font-family: $socialIconFontStack;
    line-height: $filterIconWidth;
    speak: none; // future fallback, limited in affect currently
  }
}

.dropdown{
  display: none;
}
.active .dropdown{
  display: block;
}

.wrapper-demo{border-bottom: 1px solid white; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.wrapper-demo div:not(:last-child){border-right: 1px solid white;}

li.disabled{
  opacity: 0.5;
}

theme.liquid

  <script type="text/javascript">

    function DropDown(el) {
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.index = -1;
      this.initEvents();
    }

    DropDown.prototype = {
      initEvents : function() {
        var obj = this;

        obj.dd.on('mouseenter', function(event){
          $('.wrapper-dropdown-1').not($(this)).removeClass('active');
          $(this).toggleClass('active');
          if ($(this).hasClass('active')){
            return false;
          }
        });
        
        obj.dd.on('mouseleave', function(event){
          $(this).removeClass('active');
        });
      }
    }

    var dd = new DropDown( $('.wrapper-dropdown-1') );
    
  </script>