Hack for tags that contain ampersands - Shopify Tag Filtering

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>