Skip to content

Commit

Permalink
Use param_name instead of label to construct an id for filter values (S…
Browse files Browse the repository at this point in the history 
…hopify#839)
  • Loading branch information
@carolineschnapp
carolineschnapp authored and Thomas Timmers committed Aug 29, 2022
1 parent ba40527 commit f1e44d7
Showing 1 changed file with 11 additions and 13 deletions.
24 changes: 11 additions & 13 deletions snippets/facets.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,11 @@
<ul class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js-hidden" role="list">
{%- for value in filter.values -%}
<li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
<label for="Filter-{{ filter.label | escape }}-{{ forloop.index }}" class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% 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.label | escape }}-{{ forloop.index }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}
>
Expand All @@ -140,18 +140,18 @@
<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>
</li>
{%- endfor -%}
</ul>
{% comment %} No show more for no JS {% endcomment %}
<ul class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js" role="list">
{%- for value in filter.values -%}
<li class="list-menu__item facets__item">
<label for="Filter-{{ filter.label | escape }}-{{ forloop.index }}" class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}">
<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.label | escape }}-{{ forloop.index }}"
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 %}
>
Expand All @@ -177,7 +177,7 @@
<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>
</li>
{%- endfor -%}
</ul>
</fieldset>
Expand Down Expand Up @@ -347,7 +347,7 @@
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
</div>
{%- endif -%}
</form>
</facet-filters-form>
Expand Down Expand Up @@ -386,7 +386,7 @@
{%- endif -%}
</form>
</facet-filters-form>
{%- endif -%}
{%- endif -%}
{%- endif -%}
{% comment %} Drawer and mobile filter {% endcomment %}
<menu-drawer class="mobile-facets__wrapper{% if filter_type == 'horizontal' or filter_type == 'vertical' %} medium-hide large-up-hide{% endif %}" data-breakpoint="mobile">
Expand Down Expand Up @@ -462,8 +462,8 @@
<ul class="mobile-facets__list list-unstyled" role="list">
{%- for value in filter.values -%}
<li class="mobile-facets__item list-menu__item">
<label for="Filter-{{ filter.label | 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.label | escape }}-mobile-{{ forloop.index }}"
<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 %}
>
Expand All @@ -478,7 +478,6 @@
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>


<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>
Expand Down Expand Up @@ -669,7 +668,7 @@
{% if results.current_vendor or results.current_type %}
<input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
{% endif %}

{%- if results.terms -%}
<input type="hidden" name="q" value="{{ results.terms | escape }}">
<input name="options[prefix]" type="hidden" value="last">
Expand Down Expand Up @@ -736,4 +735,3 @@
</facet-filters-form>
{%- endif -%}
</div>

0 comments on commit f1e44d7

Please sign in to comment.