Storefront filtering
Tue Nov 16 2021 09:09:15 GMT+0000 (Coordinated Universal Time)
Saved by @PIzmAR #html #liquid
<form class="filter-form">
2
{%- for filter in collection.filters -%}
3
<details class="filter-group">
4
<summary class="filter-group-summary">
5
<div>
6
<span>{{ filter.label }}</span>
7
8
{%- if filter.active_values.size > 0 -%}
9
<span>({{ filter.active_values.size }})</span>
10
{%- endif -%}
11
</div>
12
</summary>
13
14
<div class="filter-group-display">
15
<div class="filter-group-display__header">
16
<span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span>
17
18
{%- if filter.active_values.size > 0 -%}
19
<a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a>
20
{%- endif -%}
21
</div>
22
23
{%- case filter.type -%}
24
{%- when 'list' -%}
25
<ul class="filter-group-display__list">
26
{%- for filter_value in filter.values -%}
27
<li class="filter-group-display__list-item">
28
<label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
29
<input type="checkbox"
30
name="{{ filter_value.param_name }}"
31
value="{{ filter_value.value }}"
32
id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
33
{% if filter_value.active -%}checked{%- endif %}
34
{% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
35
>{{ filter_value.label }}</label>
36
</li>
37
{%- endfor -%}
38
</ul>
39
40
<div class="filter-group-display__submit">
41
<input type="submit" value="Apply">
42
</div>
43
{%- when 'price_range' -%}
44
<div class="filter-group-display__price-range">
45
<div class="filter-group-display__price-range-from">
46
<span>{{ cart.currency.symbol }}</span>
47
48
<input name="{{ filter.min_value.param_name }}"
49
id="Filter-{{ filter.min_value.param_name }}"
50
{% if filter.min_value.value -%}
51
value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
52
{%- endif %}
53
type="number"
54
placeholder="0"
55
min="0"
56
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
57
>
58
59
<label for="Filter-{{ filter.min_value.param_name }}">From</label>
60
</div>
61
<div class="filter-group-display__price-range-to">
62
<span>{{ cart.currency.symbol }}</span>
63
64
<input name="{{ filter.max_value.param_name }}"
65
id="Filter-{{ filter.max_value.param_name }}"
66
{% if filter.max_value.value -%}
67
value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
68
{%- endif %}
69
type="number"
70
placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
71
min="0"
72
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
73
>
74
75
<label for="Filter-{{ filter.max_value.param_name }}">To</label>
76
</div>
77
</div>
78
79
<div class="filter-group-display__submit">
80
<input type="submit" value="Apply">
81
</div>
82
{%- endcase -%}
83
</div>
84
</details>
85
{%- endfor -%}
86
87
<div class="active-filters">
88
<a href="{{ collection.url }}?sort_by={{ collection.sort_by }}" class="active-filters__clear">Clear all</a>
89
90
{%- for filter in collection.filters -%}
91
{%- if filter.type == "price_range" -%}
92
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
93
<a class="active-filters__remove-filter" href="{{ filter.url_to_remove }}">
94
{%- assign min_value = filter.min_value.value | default: 0 -%}
95
{%- assign max_value = filter.max_value.value | default: filter.range_max -%}
96
{{ min_value | money }} - {{ max_value | money }} X
97
</a>
98
{%- endif -%}
99
{%- else -%}
100
{%- for filter_value in filter.active_values -%}
101
<a class="active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">
102
{{ filter_value.label }} X
103
</a>
104
{%- endfor -%}
105
{%- endif- %}
106
{%- endfor -%}
107
</div>
108 </form>
Tried on SkinnyMe Tea Usefull: https://help.shopify.com/en/manual/online-store/themes/os20/customize/filters#check-if-your-theme-supports-filtering
https://shopify.dev/themes/navigation-search/filtering
Comments