filtering product tags - join with "+"

Shopify Partner
1 0 0
Hi,
 
Little bir confused on this code maybe someone can help to figure it out. I want to make a simple filter on collections. the code works with some errors, I want to join the multiple tags with "+" sign.
 
/collections/bags/women (ok)
/collections/bags/+women (error)
/collections/bags/backpackswomen (error)
/collections/bags/backpacks+women (ok)
 
{% capture the_tags %}{{ current_tags }}{% endcapture %}
{% if current_tags contains tag %}
            {{ the_tags | join:"+" }}
            {% else %}
      <li><a href="{{ collection.url | append:"/" }}{{ the_tags | remove: "men" | remove: "women" | append:"women" }}" >WOMEN</a></li>
            <li><a href="{{ collection.url | append:"/" }}{{ the_tags | remove: "men" | remove: "women" | append:"men" }}" >MEN</a></li>
            {% endif %}
0 Likes
Highlighted
Shopify Partner
14 0 1

Shopify has filters that will create an anchor link with a tag added or removed from the current url:


https://help.shopify.com/en/themes/liquid/filters/url-filters#link_to_add_tag

https://help.shopify.com/en/themes/liquid/filters/url-filters#link_to_remove_tag

 

It is easier to use these than to attempt the same in liquid.  If you have your tags grouped into categories it is likely you will want to switch the tag in that category when a user select a different option.  Unfortunate link_to_replace_tag is not a Shopify filter so we are back to our own devices to accomplish the replace.  Looking at the free Shopify Supply theme I see their developer opted to use a combination of liquid and javascript to accomplish the replace but I believe it can be done using just liquid.  Maybe their method handles edge cases that I am unaware of.  The liquid example below uses a common a naming convention, category_value, for the tags to group them into categories.  It adds the new tag using the link_to_add_tag filter, then uses the replace filter to accomplish the remove.  It also replaces the title so that it doesn't include the category portion of the tag is not displayed.  Two additional replaces are needed to remove the lingering "+" in the url.

 

	  {% assign color_tag = ''  %}

      {% for tag in current_tags %}   
              {% if tag contains 'colors_' %}
                  {% assign color_tag = tag  %}
              {% endif %}
      {% endfor %}
      
      {% for tag in collection.all_tags %}
        {% if tag contains 'colors_' %}
      		{% assign tag_text = tag | remove_first: 'colors_' %}     
      		{% assign title_text_remove_tag = "Remove tag " | append: tag %}
      		{% assign title_text_add_tag = "Narrow selection to products matching tag " | append: tag %}
      
            {% if current_tags contains tag %}
                  {{ "" | link_to_remove_tag: tag | replace: title_text_remove_tag, tag_text }}
            {% else %}
                  {{ "" | link_to_add_tag: tag | replace: title_text_add_tag, tag_text | remove: color_tag | replace: '++', '+' | replace: '/+', '/' }}
            {% endif %}

        {% endif %}
      {% endfor %}

www.leftfootsoftware.com

 

0 Likes