sidebar-collection-filters.liquid

{% if template.name == "collection" %}

  {% comment %}
   
    // COLLECTION FILTERING
    =====================
  
    We're using prefixing to categorize our tags
    - Color - prefixed with "Color:"
    - Size - prefixed with "Size:"
  
  {% endcomment %}

{% comment %}  {% for tag in collection.all_tags %}
    {% assign t = tag | split: 'Color:' | last | split: 'color:' | last | split: 'Size:' | last | split: 'size:' | last %}
    {% if current_tags contains tag %}
      <strong>{{ t | link_to_add_tag: tag }}</strong>
    {% else %}
      {{ t | link_to_add_tag: tag }}
    {% endif %}
    <br />
  {% endfor %}{% endcomment %}

  <div class="Sidebar-block Sidebar-block--filter-control{% if current_tags.size > 0 %} is-active{% endif %}" data-collection-filter-control data-active-filters="{% if current_tags.size > 0 %}true{% else %}false{% endif %}">
    <div class="Sidebar-block__title">
      <h4>
        Filters
        {% if current_tags.size > 0 %}
          <span class="u-fw-base u-color-darkGrey visible-md-inline visible-lg-inline">({{ current_tags.size }})</span>
        {% endif %}
        <a href="#" class="Sidebar-block__filter-control-toggle visible-xs visible-sm" data-collection-filter-control-toggle></a>
      </h4>
    </div>
    {% if current_tags.size > 0 %}
      <div class="Sidebar-block__body">
        <ul class="Collection-tag-list">
          {% for tag in current_tags %}

            {% assign pretty_tag = tag | split: 'Color:' | last | split: 'color:' | last | split: 'Size:' | last | split: 'size:' | last %}
            {% comment %}
              - Shopify doesn't expose a filter to get *just* the url for link_to_add_tag / link_to_remove_tag so we have to generate the <a> and then strip the link out of the href
              - We use this logic a few more times inside this file
            {% endcomment %}
            {%- capture remove_tag_link -%}
              {{ tag | link_to_remove_tag: tag }}
            {%- endcapture -%}
            {% assign remove_tag_url = remove_tag_link | split: '<a href="' | last | split: '"' | first %}

            <li>
              <a href="{{ remove_tag_url }}" title="Remove filter {{ pretty_tag }}">{{ pretty_tag }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>

  {% comment %}
   
    // SWATCH FILTERING
    =====================
  
    Uses tags of the form 'Color:{{ value }}'
  
  {% endcomment %}

  {% assign color_filter_active  = false %}

  {% capture swatches_html %}
    
    {% comment %}
      - First loop through the tags and see if we currently have an active color filter
      - We'll need this info so that we don't output links to add more color filters if one is already active
    {% endcomment %}
    {% for tag in collection.all_tags %}
      {% if tag contains 'Color:' or tag contains 'color:' %}
        {% if current_tags contains tag %}
          {% assign color_filter_active = true %}
        {% endif %}
      {% endif %}
    {% endfor %}

    {% for tag in collection.all_tags %}
      {% if tag contains 'Color:' or tag contains 'color:' %}
        
        {% assign color = tag | split: 'Color:' | last | split: 'color:' | last %}
        {% assign color_slug = color | handleize | replace: '-', '_' %}
        {% assign color_slug_parts = color_slug | split: '_' %}
        {% capture color_display %}{% for part in color_slug_parts %}{{ part | capitalize | append: ' ' }}{% endfor %}{% endcapture %}
        {% assign color_display = color_display | strip %}
        {% assign color_css = color_display | replace: ' ', '' %}

        {% assign color_active = false %}
        {% if current_tags contains tag %}
          {% assign color_active = true %}
        {% endif %}

        <li class="Swatches__swatch{% if color_active %} is-active{% endif %}" data-swatch>
          
          {% if color_filter_active != true or color_active %}

            {%- capture html_swatch_link -%}
              {% if color_active %}
                {{ tag | link_to_remove_tag: tag }}
              {% else %}
                {{ tag | link_to_add_tag: tag }}
              {% endif %}
            {%- endcapture -%}
            {% assign url_swatch_link = html_swatch_link | split: '<a href="' | last | split: '"' | first %}

              <a href="{{ url_swatch_link }}" title="{% if color_active %}Remove{% else %}Add{% endif %} Filter">

          {% endif %}

              <div class="Swatches__swatch-bg Swatches__swatch-bg--{{ color_slug }}"
                    style="background-color:{{ color_css }}">
              </div>
              <span class="Swatches__swatch-label">{{ color_display }}</span>

          {% if color_filter_active != true or color_active %}
            </a>
          {% endif %}

        </li>
      {% endif %}
    {% endfor %}
  {% endcapture %}

  {% comment %} Only show if there are colors to filter by {% endcomment %}
  {% if swatches_html != blank %}
    <div class="Sidebar-block Sidebar-block--filter hidden-xs hidden-sm" data-collection-filter-block>
      <div class="Sidebar-block__title">
        <h4>Color</h4>
      </div>
      <div class="Sidebar-block__body">
        <div class="Swatches Swatches--filtering">
          <ul class="Swatches__list">{{ swatches_html }}</ul>
          {% if color_filter_active %}
            <p class="u-color-lightGrey u-tt-uppercase u-fs-xxs u-fw-medium">You can only filter by one color at a time</p>
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}

  {% comment %}
   
    // SIZE FILTERING
    =====================
  
    - We have to treat S-XXL as special cases.
    - We want to show *all* of the sizes if the current collection is tagged with *any* of them.
    - We want to hide them if the current collection isn't tagged with *any* of them.
    - Also, we want to display them in S->XXL ordering which Shopify doesn't support
    - We do with the `case` statement.  If we have a S->XXL size then we set the corresponding filter_url variable, otherwise we capture the swatch item so we can output it at the bottom of the list.
  
  {% endcomment %}
    
  {% assign filter_small_url       = "" %}
  {% assign filter_medium_url      = "" %}
  {% assign filter_large_url       = "" %}
  {% assign filter_xlarge_url      = "" %}
  {% assign filter_xxlarge_url     = "" %}
  {% assign filter_small_active    = false %}
  {% assign filter_medium_active   = false %}
  {% assign filter_large_active    = false %}
  {% assign filter_xlarge_active   = false %}
  {% assign filter_xxlarge_active  = false %}

  {% assign size_filter_active     = false %}

  {% comment %}
    - First loop through the tags and see if we currently have an active color filter
    - We'll need this info so that we don't output links to add more color filters if one is already active
  {% endcomment %}
  {% for tag in collection.all_tags %}
    {% if tag contains 'Size:' or tag contains 'size:' %}
      {% if current_tags contains tag %}
        {% assign size_filter_active = true %}
      {% endif %}
    {% endif %}
  {% endfor %}

  {% capture sizes_html %}

    {% for tag in collection.all_tags %}
      {% if tag contains 'Size:' or tag contains 'size:' %}
        {% assign size = tag | split: 'Size:' | last | split: 'size:' | last %}
        {% assign size_imploded = size | downcase | replace: '_', '' | replace: '-', '' %}{% comment %} 'XX-Large' => 'xxlarge' {% endcomment %}
        {% assign tag_active = false %}

        {% comment %} Shopify doesn't expose a filter to get *just* the url for link_to_add_tag / link_to_remove_tag so we have to generate the <a> and then strip the link out of the href {% endcomment %}
        {%- capture html_size_link -%}
          {% if current_tags contains tag %}
            {% assign tag_active = true %}
            {{ tag | link_to_remove_tag: tag }}
            }
          {% else %}
            {{ tag | link_to_add_tag: tag }}
          {% endif %}
        {%- endcapture -%}

        {% assign url_size_link = html_size_link | split: '<a href="' | last | split: '"' | first %}

        {% case size_imploded %}
          {% when 'small' %}
            {% assign filter_small_url = url_size_link %}
            {% if tag_active %}{% assign filter_small_active = true %}{% endif %}
          {% when 'medium' %}
            {% assign filter_medium_url = url_size_link %}
            {% if tag_active %}{% assign filter_medium_active = true %}{% endif %}
          {% when 'large' %}
            {% assign filter_large_url = url_size_link %}
            {% if tag_active %}{% assign filter_large_active = true %}{% endif %}
          {% when 'xlarge' %}
            {% assign filter_xlarge_url = url_size_link %}
            {% if tag_active %}{% assign filter_xlarge_active = true %}{% endif %}
          {% when 'xxlarge' %}
            {% assign filter_xxlarge_url = url_size_link %}
            {% if tag_active %}{% assign filter_xxlarge_active = true %}{% endif %}
          {% else %}
            <a href="{{ url_size_link }}" class="Tag{% if tag_active %} is-active{% endif %}" title="{% if tag_active %}Remove{% else %}Add{% endif %} Filter">
              <span href="{{ url_size_link }}" class="Tag__label">
                {{ size }}
              </span>
            </a>
        {% endcase %}
      {% endif %}
    {% endfor %}
  {% endcapture %}

  {% if filter_small_url   != blank or 
        filter_medium_url  != blank or 
        filter_large_url   != blank or 
        filter_xlarge_url  != blank or 
        filter_xxlarge_url != blank
  %}
    {% assign has_smlxl_sizes = true %}
  {% endif %}

  {% if has_smlxl_sizes or sizes_html != blank %}

    <div class="Sidebar-block Sidebar-block--filter hidden-xs hidden-sm" data-collection-filter-block>
      <div class="Sidebar-block__title">
        <h4>Size</h4>
      </div>
      <div class="Sidebar-block__body">
        <div class="size-filters">
          <div class="Tag-list Tag-list--sidebar-filters">

            {% if has_smlxl_sizes %}

              {% comment %} Small filter item {% endcomment %}
              {% if filter_small_url != blank %}
                <a href="{{ filter_small_url }}" class="Tag{% if filter_small_active %} is-active{% endif %}" title="{% if filter_small_active %}Remove{% else %}Add{% endif %} Filter">
                  <span class="Tag__label">S</span>
                </a>
              {% else %}
                <div class="Tag is-unavailable">
                  <span class="Tag__label">S</span>
                </div>
              {% endif %}

              {% comment %} Medium filter item {% endcomment %}
              {% if filter_medium_url != blank %}
                <a href="{{ filter_medium_url }}" class="Tag{% if filter_medium_active %} is-active{% endif %}" title="{% if filter_medium_active %}Remove{% else %}Add{% endif %} Filter">
                  <span class="Tag__label">M</span>
                </a>
              {% else %}
                <div class="Tag is-unavailable">
                  <span class="Tag__label">M</span>
                </div>
              {% endif %}

              {% comment %} Large filter item {% endcomment %}
              {% if filter_large_url != blank %}
                <a href="{{ filter_large_url }}" class="Tag{% if filter_large_active %} is-active{% endif %}" title="{% if filter_large_active %}Remove{% else %}Add{% endif %} Filter">
                  <span class="Tag__label">L</span>
                </a>
              {% else %}
                <div class="Tag is-unavailable">
                  <span class="Tag__label">L</span>
                </div>
              {% endif %}

              {% comment %} X-Large filter item {% endcomment %}
              {% if filter_xlarge_url != blank %}
                <a href="{{ filter_xlarge_url }}" class="Tag{% if filter_xlarge_active %} is-active{% endif %}" title="{% if filter_xlarge_active %}Remove{% else %}Add{% endif %} Filter">
                  <span class="Tag__label">XL</span>
                </a>
              {% else %}
                <div class="Tag is-unavailable">
                  <span class="Tag__label">XL</span>
                </div>
              {% endif %}

              {% comment %} XX-Large filter item {% endcomment %}
              {% if filter_xlarge_url != blank %}
                <a href="{{ filter_xxlarge_url }}" class="Tag{% if filter_xxlarge_active %} is-active{% endif %}" title="{% if filter_xxlarge_active %}Remove{% else %}Add{% endif %} Filter">
                  <span class="Tag__label">XXL</span>
                </a>
              {% else %}
                <div class="Tag is-unavailable">
                  <span class="Tag__label">XXL</span>
                </div>
              {% endif %}

            {% endif %}

            {{ sizes_html }}

          </div>
        </div>
      </div>
    </div>

  {% endif %}

{% endif %}