Storefront filtering

PHOTO EMBED

Tue Nov 16 2021 09:09:15 GMT+0000 (UTC)

Saved by @JureVidmar #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>
content_copyCOPY

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