Filter problem / Documentation problem
Hello there!
I am developing a product filter according to the official documentation: https://shopify.dev/themes/navigation-search/filtering#the-filter-display
URL-address and filtering is correctly.
Problems:
1. If you select multiple options in one of the filters, only the last pressed option remains checked.
2. An error occurs when displaying an object: {{ filter.active_values }}
Please help solve the problems. I would be very grateful to you.
Here is my code. I have checked it several times. It fully complies with the documentation. If you paste a snippet from the official documentation, it works the same way!
<div class="d-block row mb-5">
<form class="col d-flex flex-wrap mb-n4">
{%- for filter in collection.filters -%}
<div class="dropdown me-2 mb-2">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdown-menu-{{ filter.label }}-{{ forloop.index }}" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
{{ filter.label | capitalize }}
{%- if filter.active_values.size > 0 -%}
<span>({{ filter.active_values.size }})</span>
{%- endif -%}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-{{ filter.label }}-{{ forloop.index }}">
{%- case filter.type -%}
{%- when 'list' -%}
<li class="d-flex flex-nowrap justify-content-between px-3 py-1">
<span class="text-muted">{{ filter.active_values.size }} selected</span>
<span>{{ filter.active_values }}</span>
{%- if filter.active_values.size > 0 -%}
<a href="{{ filter.url_to_remove }}" class="text-decoration-none">Reset</a>
{%- endif -%}
</li>
<hr class="dropdown-divider"></li>
{%- for filter_value in filter.values -%}
<li class="ps-3 pe-4 py-1">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
name="{{ filter_value.param_name }}"
value="{{ filter_value.value }}"
id="Filter-{{ filter.label }}-{{ forloop.index }}"
{% if filter_value.active -%}checked{%- endif %}
{% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
>
<label class="form-check-label text-nowrap" for="Filter-{{ filter.label }}-{{ forloop.index }}">
{{ filter_value.label }}
</label>
</div>
</li>
{%- endfor -%}
<li class="ps-3 pe-4 py-1"><input type="submit" value="Apply" class="btn btn-primary btn-sm"></li>
{%- when 'price_range' -%}
{% comment %} I have temporarily removed the implementation for readability {% endcomment %}
{%- endcase -%}
</ul>
</div>
{%- endfor -%}
Here are screenshots of the problem
Step 1 — Selecting and apply filter options on page: «/collections/all»:
Step 2 — Filtration results. The page address is correct. The list of goods is correct. Checkboxes aren't correct.
Object {{ filter.active_values }} isn't displayed (error)
