Re: Hide tags from filter in Dawn Theme

TeeTime · ‎01-11-2023

Hey I am trying to hide certain tags from my filters

I am editing facets.liquid and use the below code to try to hide any filter that starts with _

<fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
<legend class="visually-hidden">Filters</legend>
<ul class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js-hidden" role="list">
{%- for value in filter.values -%}
{% unless values contain '_' %}
<li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
<label for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}" class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}">
<input type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}
>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">{{ value.label | escape }} ({% if value.count == 1 %}{{ 'products.facets.product_count_simple.one' | t: count: value.count }}{% else %}{{ 'products.facets.product_count_simple.other' | t: count: value.count }}{% endif %})</span>
</label>
</li>
{% endunless %}
{%- endfor -%}
</ul>
{% comment %} No show more for no JS {% endcomment %}
<ul class="{% if filter_type != 'vertical' %} facets__list{% endif %} no-js-list list-unstyled no-js" role="list">
{%- for value in filter.values -%}
{% unless values contain '_' %}
<li class="list-menu__item facets__item">
<label for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js" class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}">
<input type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}
>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">{{ value.label | escape }} ({% if value.count == 1 %}{{ 'products.facets.product_count_simple.one' | t: count: value.count }}{% else %}{{ 'products.facets.product_count_simple.other' | t: count: value.count }}{% endif %})</span>
</label>
</li>
{% endunless %}
{%- endfor -%}
</ul>
</fieldset>

LitCommerce · ‎01-12-2023

Hi @TeeTime,

Please change 'values' => 'value'

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce · ‎01-12-2023

Hi @TeeTime,

Please change 'values' => 'value'

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

mcowlesHabitat · ‎09-28-2023

Hi, I'm needing to make this same change in our store (also using the Dawn theme) but I'm not able to get it to work. I'm using the same code provided in this thread, and it looks like it should work, but the tags we need to hide are still appearing.

Looking at the generated page, it looks like the tag that needs to be hidden is inside a HTML element like this:

<span aria-hidden="true">_onetimetrue (1)</span>

Could that be causing the above code not to work?

Thanks

bylo · ‎11-03-2023

I am trying to do this exact same thing! May I know which part of the code you pasted I need to put in the facets snippet? I can't seem to get it to work.

mcowlesHabitat · ‎11-08-2023

I tried at first to use the code as presented in this post, but I had to also assign tag_value to get it to work. The important bits are:
{% assign tag_value = value.value %}

{% unless tag_value contains '_' %}

Add those two pieces after both instances of "{%- for value in filter.values -%}" inside the <fieldset> section.

Here's the section of code I changed in facets.liquid, with the additions shown in blue. The bits between  are just notes to document what the additions are doing; those won't show in the generated page and don't affect function, they're purely informational.

<fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
<legend class="visually-hidden">{{ filter.label | escape }}</legend>
<ul
class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js-hidden"
role="list"
>
{%- for value in filter.values -%}

{% assign tag_value = value.value %} 
{% unless tag_value contains '_' %}
<li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
data-value="{{ _ }}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{% endunless %}
{%- endfor -%}
</ul>
{% comment %} No show more for no JS {% endcomment %}
<ul
class="{% if filter_type != 'vertical' %} facets__list{% endif %} no-js-list list-unstyled no-js"
role="list"
>
{%- for value in filter.values -%}

{% assign tag_value = value.value %} 
{% unless tag_value contains '_' %}
<li class="list-menu__item facets__item">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
data-value="{{ _ }}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{% endunless %}
{%- endfor -%}
</ul>
</fieldset>

abbytyt · ‎11-29-2023

i having issues after i follow the code, please help.

Liquid syntax error (line 365): Unknown tag 'when'

<fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
<legend class="visually-hidden">{{ filter.label | escape }}</legend>
<ul
class="{{ visual_layout_class }}{% if filter_type == 'vertical' %} facets__list--vertical{% else %} facets__list{% endif %} list-unstyled no-js-hidden"
role="list"
>
{% assign tag_value = value.value %}
{% unless tag_value contains '_' %}
{%- liquid
assign sorted_values = filter.values
# Keep the selected values grouped together when operator is AND
if filter.operator == 'AND'
assign active_filter_values = filter.values | where: 'active', true
assign inactive_filter_values = filter.values | where: 'active', false
assign sorted_values = active_filter_values | concat: inactive_filter_values
endif
-%}
{%- for value in sorted_values -%}
{% liquid
assign is_disabled = false
if value.count == 0 and value.active == false
assign is_disabled = true
endif
%}

<li class="list-menu__item facets__item{% if forloop.index > show_more_number and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
class="facets__label facet-checkbox{% if is_disabled %} facet-checkbox--disabled disabled{% endif %}{% if has_visual_display %} visual-display-parent visual-display-parent--{{ filter.presentation }}{% endif %}{% if value.active %} active{% endif %}"
date-value="{{ _ }}
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
{% if value.active %}
checked
{% endif %}
{% if is_disabled %}
disabled
{% endif %}
>

{% if has_visual_display %}
<div class="facets__visual-display-wrapper">
{% render 'visual-display',
type: value.display.type,
value: value.display.value,
presentation: filter.presentation
%}
</div>
{% else %}
<svg
width="1.6rem"
height="1.6rem"
viewBox="0 0 16 16"
aria-hidden="true"
focusable="false"
>
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
</svg>

<span class="facet-checkbox__text" aria-hidden="true">
{{- value.label | escape }} ({{ value.count }})</span
>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{%- endfor -%}
</ul>
{% comment %} No show more for no JS {% endcomment %}
<ul
class="{% if filter_type != 'vertical' %} facets__list{% endif %} no-js-list list-unstyled no-js"
role="list"
>
{%- for value in filter.values -%}
{% assign tag_value = value.value %}
{% unless tag_value contains '_' %}
<li class="list-menu__item facets__item">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{% endunless %}
{%- endfor -%}
</ul>
</fieldset>

mandadee · ‎12-15-2023

I used this code and it worked great on desktop but the _tags still show up in mobile view. Would you happen to know what I need to add or change to fix that?

mcowlesHabitat · ‎12-18-2023

Ok, I think I've found a fix for this.

Disclaimer: I'm not an expert, but this is what worked for me.

In the same facets.liquid file, find the section that begins with "<menu-drawer
class="mobile-facets__wrapper{% if filter_type == 'horizontal' or filter_type == 'vertical' %} medium-hide large-up-hide{% endif %}"
data-breakpoint="mobile"
>"

Locate the following lines:

<ul class="mobile-facets__list list-unstyled" role="list">
{%- for value in filter.values -%}

Insert assign values and unless statement where shown below

{% assign tag_value = value.value %}
{% unless tag_value contains '_' %}

(replace _ with whatever value you want to hide from filters. If you have more than 1 value to hide, add additional unless statements for each one.)

Add the {% endunless %} closing tag just above the next {%- endfor -%} tag.

If you have more than one {% unless tag_value contains '_' %}, remember to add a closing tag {% endunless %} for each one.

The updated code looks like this (additions in blue):

<menu-drawer
class="mobile-facets__wrapper{% if filter_type == 'horizontal' or filter_type == 'vertical' %} medium-hide large-up-hide{% endif %}"
data-breakpoint="mobile"
>
<details class="mobile-facets__disclosure disclosure-has-popup">
<summary class="mobile-facets__open-wrapper focus-offset">
<span class="mobile-facets__open{% if filter_type == 'drawer' and enable_filtering == false %} medium-hide large-up-hide{% endif %}">
{% render 'icon-filter' %}
<span class="mobile-facets__open-label button-label medium-hide large-up-hide">
{%- if enable_filtering and enable_sorting -%}
{{ 'products.facets.filter_and_sort' | t }}
{%- elsif enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- elsif enable_sorting -%}
{{ 'products.facets.sort_button' | t }}
{%- endif -%}
</span>
<span class="mobile-facets__open-label button-label small-hide">
{%- if enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- endif -%}
</span>
</span>
<span tabindex="0" class="mobile-facets__close mobile-facets__close--no-js">{%- render 'icon-close' -%}</span>
</summary>
<facet-filters-form>
<form id="FacetFiltersFormMobile" class="mobile-facets">
<div class="mobile-facets__inner gradient">
<div class="mobile-facets__header">
<div class="mobile-facets__header-inner">
<h2 class="mobile-facets__heading medium-hide large-up-hide">
{%- if enable_filtering and enable_sorting -%}
{{ 'products.facets.filter_and_sort' | t }}
{%- elsif enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- elsif enable_sorting -%}
{{ 'products.facets.sort_button' | t }}
{%- endif -%}
</h2>
<h2 class="mobile-facets__heading small-hide">
{%- if enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- endif -%}
</h2>
<p class="mobile-facets__count">
{%- if results.results_count -%}
{{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
{%- elsif results.products_count == results.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: results.products_count }}
{%- else -%}
{{
'products.facets.product_count'
| t: product_count: results.products_count, count: results.all_products_count
}}
{%- endif -%}
</p>
</div>
</div>
<div class="mobile-facets__main has-submenu gradient">
{%- if enable_filtering -%}
{%- for filter in results.filters -%}
{% assign filter_label = filter.label | downcase %}
{% unless filter_label == "availability" %}
{% case filter.type %}
{% when 'boolean', 'list' %}
<details
id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
class="mobile-facets__details js-filter"
data-index="mobile-{{ forloop.index }}"
>
<summary class="mobile-facets__summary focus-inset">
<div>
{% if filter.label == 'Brand' %}
<span>Location</span>
{% else %}
<span>{{ filter.label | escape }}</span>
{% endif %}
<span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>
<noscript>{% render 'icon-caret' %}</noscript>
</div>
</summary>
<div
id="FacetMobile-{{ forloop.index }}-{{ section.id }}"
class="mobile-facets__submenu gradient"
>
<button
class="mobile-facets__close-button link link--text focus-inset"
aria-expanded="true"
type="button"
>
{% render 'icon-arrow' %}
{{ filter.label | escape }}
</button>
<ul class="mobile-facets__list list-unstyled" role="list">
{%- for value in filter.values -%}
{% assign tag_value = value.value %}
{% unless tag_value contains '_' %}
<li class="mobile-facets__item list-menu__item">
<label
for="Filter-{{ filter.param_name | escape }}-mobile-{{ forloop.index }}"
class="mobile-facets__label{% if value.count == 0 and value.active == false %} mobile-facets__label--disabled{% endif %}"
>
<input
class="mobile-facets__checkbox"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-mobile-{{ forloop.index }}"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == '1' -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{% endunless %}
{%- endfor -%}
</ul>

mandadee · ‎12-26-2023

Thanks so much for the help, that worked perfectly!

AHAY · ‎04-08-2024

I tried this and for some reason it's not working for me! I wonder if it's still working for you.

If you find my answer useful please do like/accept it so I feel more motivated to help in my spare time.

AHAY · ‎05-01-2024

Fixed. I was placing it in the wrong place for my case.

If you find my answer useful please do like/accept it so I feel more motivated to help in my spare time.

Re: Hide tags from filter in Dawn Theme

How can I hide tags from filters in the Dawn Theme?

Community Blog Articles