Issues with ''+'' symbol in filtering

Solved
Highlighted
New Member
3 0 0

Hello all,

I am developing a webshop for one of my customers. Theme developers unfortunately cannot help me and point to shopify. Shopify support again indicates that they will report this to the developers, but cannot guarantee that this will be resolved. The theme is Warehouse.

The problem:
It is a problem around the filters. The webshop I am making is in the white goods market (Air conditioners, central heating boilers). The energy label is very important here (A, A +. A ++. A +++. B etc.). I use tags within the theme to create filters. However, apparently shopify has not thought properly and prevented the + symbol from being used in the filters. Because then problems arise. See also the video: https://we.tl/t-NazbE4goIG.

Does anyone happen to have a workarround for this problem? I can install a paid add-on, but of course my customer is not waiting for this.

Extra information, said by Theme developer:

Shopify doesn't currently have a good filtering system, what is currently available as a solution for filtering on Shopify is "filtering by tags", this is actually the only filtering solution they offer, but due to it being so constraining, theme developers have adopted the "group filters" as an improvement on top of the system offered by Shopify.

The group filtering is simply a tag pattern for you to be able to set-up a more complex filtering approach, but it still relies on tags.

The limitation with the + characters is caused exactly at the root of this all, and you can try it even on official themes from Shopify (such as Debut), if you create a product with a tag "A++" and another with "A" only, filtering will be mixed between these two products.

0 Likes
Highlighted
Shopify Partner
38 7 5

Hi Maikelhendrikx,

I think the best way to do this is adding the '+' with liquid and not in the product tag input. So you add the filters like this: energylabel__A1 and not like this energylabel_A+. Then you should create a liquid code that looks for the A1 tag and convert it into A+. Hope this helps!

0 Likes
Highlighted
New Member
3 0 0

Hey Bitfresh,

Thanks for your reply!

Working with liquid is new for me.. Could you explain me what code I should use?

Thanks in advance!


Maikel

0 Likes
Highlighted
Shopify Partner
38 7 5

This is an accepted solution.

Hi Maikelhendrikx,

I'm not sure what the best way is to achieve this but the simplest method is as following: as I mentioned before create a tag like energylabel_a1, energylabel_a2, energylabel_a3. Then open the file called collection-template.liquid. Then you should find a line like this: <label for="{{ link_id }}-tag-{{ tag | handle }}">{{ tag_parts.last }}</label>. Replace {{ tag_parts.last }} with the following code:

{% case tag_parts.last %}
    {% when 'a1' %}
    A+
    {% when 'a2' %}
    A++
    {% when 'a3' %}
    A+++
{%- else -%}
    {{ tag_parts.last }} 
{% endcase %}

This will change a1, a2 and a3 to A+, A++ and A+++ in your filter options. Hope this helps!

0 Likes
Highlighted
New Member
3 0 0

This did help! Thanks for the assistance! 

0 Likes