Filter problem / Documentation problem

[Svyatoslav]

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)

[Svyatoslav · Accepted solution]

I solved the problem. The filter does not work correctly only in the local copy of the store.

[medlingtonQPS]

Hi,

Can you confirm what you mean by this?

Do you just mean that your filters didnt work while you were in 'preview' mode but then they started working correctly when you set the theme to 'live'?

Im having problems rewriting the filters too but Im having to recreate the filter by tag functionality so using collection.all_tags instead and wondering if it will work differently if I set the theme to 'live'.

[Svyatoslav]

In my case, after applying the filter, only the last selected value (checkbox) was transmitted to the URL. I advise you to do a git push after every filter change and test it on a live store.

[bekah_mcdonald]

Thanks for sharing this. It helped me work around the issue - I was only seeing the problem when using shopify theme serve but if I push my code to the published theme, the issue goes away. Frustrating!