Instantly share code, notes, and snippets.
Created
November 7, 2017 20:36
-
Star
(1)
1
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save stefbowerman/675457df225eca814d768f0f281854c5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment