Skip to content

Instantly share code, notes, and snippets.

@pinguluk

pinguluk/filter-tag.liquid

Last active January 6, 2022 10:02
Show Gist options
  • Save pinguluk/7d370e60ad765b6224aab478bc552e20 to your computer and use it in GitHub Desktop.
Save pinguluk/7d370e60ad765b6224aab478bc552e20 to your computer and use it in GitHub Desktop.
Download ZIP
Hack for tags that contain ampersands - Shopify Tag Filtering
Raw
filter-tag.liquid
{% comment %}
Renders filter tags
Accepts:
- name: {String} Current filter name
- filters: {Array} Array of filters (tags)
- remove_substring_from_name: {Array} Array of strings to remove from filter name
Usage:
{% render 'filter-tag' | name: "Publication Types", filters: type_filters, remove_substring_from_name: "Publication Type - , Working Area - , Publication Year - " | split: ", " %}
{% endcomment %}
<details class="facets__disclosure tag-filters" open>
<summary class="facets__summary caption-large focus-offset">
<div>
<span class="facets__label">{{- name -}}</span>
<div class="facets__toggle"></div>
</div>
</summary>
<ul>
{%- comment -%} Loop each filter tag from filters {%- endcomment -%}
{% for filter_tag in filters %}
{%- comment -%} Assign a new variable for the new filter tag name {%- endcomment -%}
{% assign filter_tag_name = filter_tag %}
{%- comment -%} Loop each strings to be removed from the tag name {%- endcomment -%}
{% for substring in remove_substring_from_name %}
{%- comment -%} Remove the substring fron the tag name, e.g.: Publication Types - Annual Reports => Annual Reports {%- endcomment -%}
{% assign filter_tag_name = filter_tag_name | remove: substring %}
{% endfor %}
{%- comment -%}
Because of a bug related to link_to_add_tag and link_to_remove_tag, Shopify don't handle ampersands (&) correctly.
So, I've made a hack/workaround to overhaul it, by removing the ampersand from tags and creating myself the permalinks for the "add" and "remove" tag.
Read more here about the bug:
https://community.shopify.com/c/shopify-design/link-to-add-tag-converting-to-html-entities-prior-to-escaping/td-p/156174
https://community.shopify.com/c/technical-q-a/liquid-bug-link-to-add-tag-and-html-entities-escaping/td-p/162110
https://github.com/Shopify/liquid/issues/615
https://community.shopify.com/c/shopify-design/checking-a-string-with-an-ampersand-a-bug-in-shopify/m-p/432949
https://community.shopify.com/c/shopify-design/ampersand-in-collection-messing-with-tags/td-p/189574
{%- endcomment -%}
{%- comment -%}
Sometimes the ampersand in the current_tags won't be replaced normally, as sometimes the ampresand will be treated as "&amp;", even if it's "&"
so we will "force" the replacement for both cases, then convert it into an array
{%- endcomment -%}
{% assign current_tags_with_fix = current_tags | replace: "&amp;", "" | replace: "&", "" | split: ","-%}
{%- comment -%}
Idem for the tags, we will replace the amp for the both cases, then covnert it into an array
{%- endcomment -%}
{% assign filter_tag_with_fix = filter_tag | replace: "&amp;", "" | replace: "&", "" | split: "," %}
{%- comment -%} Handleize both current_tags and filter tag {%- endcomment -%}
{% assign current_tags_with_fix_as_handles = "" | split: "," %}
{% assign filter_tag_with_fix_as_handle = filter_tag_with_fix | handleize | split: "," %}
{%- comment -%}
We will loop each current tag
Create a temp array to make the tag as an array (it's considered string and the concat function doesn't work if it's not an array)
Then we will handleize it and append to the current_tags_with_fix_as_handles
{%- endcomment -%}
{% for tag in current_tags_with_fix %}
{% assign temp_tag_as_array = tag | handleize | split: "," %}
{% assign current_tags_with_fix_as_handles = current_tags_with_fix_as_handles | concat: temp_tag_as_array %}
{% endfor %}
{%- comment -%}
Join all current_tags with fix as handles by "+"
{%- endcomment -%}
{% assign joined_current_tags_with_filter_tag = current_tags_with_fix_as_handles | concat: filter_tag_with_fix_as_handle | join: "+" %}
{%- comment -%}
Create a new array that will store all current_tags, but without the current filter tag
{%- endcomment -%}
{% assign current_tags_without_filter_tag = "" | split: "," %}
{%- comment -%}
We will loop the current_tags with fix as handles
{%- endcomment -%}
{% for tag in current_tags_with_fix_as_handles %}
{%- comment -%}
And unless the current filter tag with fix as handle doesn't contain the current loop tag
we will add/concat it to the current_tags_without_filter_tag
Note: didn't use ==, because even if they are equal, it won't trigger, idk why exactly
{%- endcomment -%}
{% unless filter_tag_with_fix_as_handle contains tag %}
{%- assign temp_tag_as_array = tag | split: "," -%}
{%- assign current_tags_without_filter_tag = current_tags_without_filter_tag | concat: temp_tag_as_array -%}
{% endunless %}
{% endfor %}
{%- comment -%}
Now we will join all the current_tags_without_filter_tag by "+"
{%- endcomment -%}
{% assign joined_current_tags_without_filter_tag = current_tags_without_filter_tag | join: "+" %}
{%- comment -%}
We will loop the current_tags with fix as handles
And if the current filter tag with fix as handle contains the current loop tag
it means that the current filter tag is in the current_tags and we break out of the loop
Note: didn't use ==, because even if they are equal, it won't trigger, idk why exactly
{%- endcomment -%}
{% assign found_tag = false %}
{% for tag in current_tags_with_fix_as_handles %}
{% if filter_tag_with_fix_as_handle contains tag %}
{% assign found_tag = true %}
{% break %}
{% endif %}
{% endfor %}
{%- comment -%}
If we found the tag in the current_tags,
We will render the permalink with the current_tags, but without the current filter tag
{%- endcomment -%}
{% if found_tag == true %}
<li class="tag-filters__item active">
<a href="{{ collection.url }}/{{ joined_current_tags_without_filter_tag }}" title="Remove tag {{ filter_tag_name }}">{{ filter_tag_name }}</a>
</li>
{%- comment -%}
Else we will render the permalink with the current_tags, but with the current filter tag
{%- endcomment -%}
{% else %}
<li class="tag-filters__item">
<a href="{{ collection.url }}/{{ joined_current_tags_with_filter_tag }}" title="Show products matching tag {{ filter_tag_name }}">{{ filter_tag_name }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment