Skip to content

Commit c6b88a5

Browse files
tyleralsburytyleralsbury
authored
Filtering styles and animation improvements (#153)
* Filtering - checkmark styles, synced mobile and desktop sort, refactor filter remove buttons
1 parent fe16181 commit c6b88a5

File tree

3 files changed

+127
-78
lines changed

3 files changed

+127
-78
lines changed

‎assets/collection-filters-form.js

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ class CollectionFiltersForm extends HTMLElement {
1010

1111
this.querySelector('form').addEventListener('input', this.debouncedOnSubmit.bind(this));
1212
window.addEventListener('popstate', this.onHistoryChange.bind(this));
13-
14-
this.bindActiveFacetButtonEvents();
1513
}
1614

1715
onSubmitHandler(event) {
@@ -47,14 +45,14 @@ class CollectionFiltersForm extends HTMLElement {
4745
const filterDataUrl = element => element.url === url;
4846

4947
this.filterData.some(filterDataUrl) ?
50-
this.renderSectionFromCache(filterDataUrl, section, event) :
51-
this.renderSectionFromFetch(url, section, event);
48+
this.renderSectionFromCache(filterDataUrl, event) :
49+
this.renderSectionFromFetch(url, event);
5250
});
5351

5452
if (updateURLHash) this.updateURLHash(searchParams);
5553
}
5654

57-
renderSectionFromFetch(url, section, event) {
55+
renderSectionFromFetch(url, event) {
5856
fetch(url)
5957
.then(response => response.text())
6058
.then((responseText) => {
@@ -65,7 +63,7 @@ class CollectionFiltersForm extends HTMLElement {
6563
});
6664
}
6765

68-
renderSectionFromCache(filterDataUrl, section, event) {
66+
renderSectionFromCache(filterDataUrl, event) {
6967
const html = this.filterData.find(filterDataUrl).html;
7068
this.renderFilters(html, event);
7169
this.renderProductGrid(html);
@@ -93,7 +91,7 @@ class CollectionFiltersForm extends HTMLElement {
9391
});
9492

9593
this.renderActiveFacets(parsedHTML);
96-
this.renderMobileElements(parsedHTML);
94+
this.renderAdditionalElements(parsedHTML);
9795

9896
if (countsToRender) this.renderCounts(countsToRender, event.target.closest('.js-filter'));
9997
}
@@ -107,12 +105,11 @@ class CollectionFiltersForm extends HTMLElement {
107105
document.querySelector(selector).innerHTML = activeFacetsElement.innerHTML;
108106
})
109107

110-
this.bindActiveFacetButtonEvents();
111108
this.toggleActiveFacets(false);
112109
}
113110

114-
renderMobileElements(html) {
115-
const mobileElementSelectors = ['.mobile-facets__open', '.mobile-facets__count'];
111+
renderAdditionalElements(html) {
112+
const mobileElementSelectors = ['.mobile-facets__open', '.mobile-facets__count', '.sorting'];
116113

117114
mobileElementSelectors.forEach((selector) => {
118115
document.querySelector(selector).innerHTML = html.querySelector(selector).innerHTML;
@@ -133,12 +130,6 @@ class CollectionFiltersForm extends HTMLElement {
133130
});
134131
}
135132

136-
bindActiveFacetButtonEvents() {
137-
document.querySelectorAll('.js-facet-remove').forEach((element) => {
138-
element.addEventListener('click', this.onActiveFilterClick, { once: true });
139-
});
140-
}
141-
142133
updateURLHash(searchParams) {
143134
history.pushState({ searchParams }, '', `${window.location.pathname}${searchParams && '?'.concat(searchParams)}`);
144135
}
@@ -190,3 +181,16 @@ class PriceRange extends HTMLElement {
190181
}
191182

192183
customElements.define('price-range', PriceRange);
184+
185+
class FacetRemove extends HTMLElement {
186+
constructor() {
187+
super();
188+
this.querySelector('a').addEventListener('click', (event) => {
189+
event.preventDefault();
190+
const form = this.closest('collection-filters-form') || document.querySelector('collection-filters-form');
191+
form.onActiveFilterClick(event);
192+
});
193+
}
194+
}
195+
196+
customElements.define('facet-remove', FacetRemove);

‎assets/template-collection.css

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,10 @@
227227
color: rgba(var(--color-foreground), 0.75);
228228
}
229229

230+
.disclosure-has-popup[open] > .facets__summary::before {
231+
z-index: 3;
232+
}
233+
230234
.facets__summary > span {
231235
line-height: 1.3;
232236
}
@@ -298,7 +302,7 @@
298302
.facet-checkbox .icon-checkmark {
299303
visibility: hidden;
300304
position: absolute;
301-
left: 1.5rem;
305+
left: 1.4rem;
302306
z-index: 5;
303307
top: 1.4rem;
304308
}
@@ -352,7 +356,8 @@ button.facets__button {
352356
.active-facets__button {
353357
padding: 1.1rem 0.2rem;
354358
text-decoration: none;
355-
margin-left: 0.5rem
359+
margin-left: 0.5rem;
360+
display: block;
356361
}
357362

358363
span.active-facets__button-inner {
@@ -418,10 +423,14 @@ a.active-facets__button:focus .active-facets__button-inner {
418423
}
419424
}
420425

421-
.active-facets__button:only-child {
426+
.active-facets facet-remove:only-child {
422427
display: none;
423428
}
424429

430+
.mobile-facets__clear {
431+
width: 100%;
432+
}
433+
425434
.active-facets__button.disabled,
426435
.mobile-facets__clear.disabled {
427436
pointer-events: none;
@@ -497,6 +506,15 @@ a.active-facets__button:focus .active-facets__button-inner {
497506
height: 100%;
498507
overflow-y: auto;
499508
pointer-events: all;
509+
transition: transform var(--duration-short) ease;
510+
}
511+
512+
.menu-opening .mobile-facets__inner {
513+
transform: translateX(0);
514+
}
515+
516+
.disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
517+
transform: translateX(105vw);
500518
}
501519

502520
.mobile-facets__header {
@@ -555,18 +573,6 @@ details[open] .mobile-facets__open {
555573
}
556574

557575
.mobile-facets__close {
558-
width: 4.4rem;
559-
display: flex;
560-
justify-content: center;
561-
align-items: center;
562-
}
563-
564-
.mobile-facets__close svg {
565-
margin-left: 1rem;
566-
width: 2.2rem;
567-
}
568-
569-
.mobile-facets__close--no-js {
570576
display: none;
571577
align-items: center;
572578
justify-content: center;
@@ -576,13 +582,20 @@ details[open] .mobile-facets__open {
576582
width: 4.4rem;
577583
height: 4.4rem;
578584
z-index: 101;
585+
opacity: 0;
586+
transition: opacity var(--duration-short) ease;
579587
}
580588

581-
details[open] .mobile-facets__close--no-js {
589+
.mobile-facets__close svg {
590+
width: 2.2rem;
591+
}
592+
593+
details.menu-opening .mobile-facets__close {
582594
display: flex;
595+
opacity: 1;
583596
}
584597

585-
details[open] .mobile-facets__close--no-js svg {
598+
details.menu-opening .mobile-facets__close svg {
586599
margin: 0;
587600
}
588601

@@ -718,7 +731,7 @@ input.mobile-facets__checkbox {
718731

719732
.mobile-facets__label .icon-checkmark {
720733
position: absolute;
721-
top: 1.8rem;
734+
top: 1.9rem;
722735
left: 4.8rem;
723736
visibility: hidden;
724737
}

‎sections/main-collection-product-grid.liquid

Lines changed: 76 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@
3939
<div class="facets__display">
4040
<div class="facets__header">
4141
<span class="facets__selected no-js-hidden">{{ 'sections.collection_template.filters_selected' | t: count: filter.active_values.size }}</span>
42-
<a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link js-facet-remove" >{{ 'sections.collection_template.reset' | t }}</a>
42+
<facet-remove>
43+
<a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
44+
{{ 'sections.collection_template.reset' | t }}
45+
</a>
46+
</facet-remove>
4347
</div>
4448

4549
<ul class="facets__list list-unstyled" role="list">
@@ -58,8 +62,20 @@
5862
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
5963
</svg>
6064

61-
<svg class="icon icon-checkmark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9" fill="none" width="10px" height="10px">
62-
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.35.643a.5.5 0 01.006.707l-6.77 6.886a.5.5 0 01-.719-.006L.638 4.845a.5.5 0 11.724-.69l2.872 3.011 6.41-6.517a.5.5 0 01.707-.006h-.001z" fill="currentColor"/>
65+
<svg class="icon icon-checkmark"
66+
width="11"
67+
height="7"
68+
viewBox="0 0 11 7"
69+
fill="none"
70+
xmlns="http://www.w3.org/2000/svg">
71+
72+
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
73+
stroke="currentColor"
74+
stroke-width="1.75"
75+
stroke-linecap="round"
76+
stroke-linejoin="round" />
77+
</svg>
78+
6379
</svg>
6480
{{ value.label | escape }} ({{ value.count }})
6581
</label>
@@ -88,7 +104,11 @@
88104
<div class="facets__header">
89105
{%- assign max_price_amount = filter.range_max | money | escape -%}
90106
<span class="facets__selected">{{ "sections.collection_template.max_price" | t: price: max_price_amount }}</span>
91-
<a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link js-facet-remove" >{{ 'sections.collection_template.reset' | t }}</a>
107+
<facet-remove>
108+
<a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link" >
109+
{{ 'sections.collection_template.reset' | t }}
110+
</a>
111+
</facet-remove>
92112
</div>
93113
<price-range class="facets__price">
94114
<div class="field">
@@ -140,26 +160,32 @@
140160
</div>
141161

142162
<div class="active-facets active-facets-desktop">
143-
<a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button js-facet-remove">
144-
<span class="active-facets__button-inner button button--secondary">{{ 'sections.collection_template.clear_all' | t }}</span>
145-
</a>
163+
<facet-remove>
164+
<a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button">
165+
<span class="active-facets__button-inner button button--secondary">{{ 'sections.collection_template.clear_all' | t }}</span>
166+
</a>
167+
</facet-remove>
146168
{%- for filter in collection.filters -%}
147169
{%- for value in filter.active_values -%}
148-
<a class="active-facets__button active-facets__button--light js-facet-remove" href="{{ value.url_to_remove }}">
149-
<span class="active-facets__button-inner button button--tertiary">
150-
{{ value.label | escape }}
151-
{% render 'icon-close-small' %}
152-
</span>
153-
</a>
154-
{%- endfor -%}
155-
{% if filter.type == "price_range" %}
156-
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
157-
<a class="active-facets__button active-facets__button--light js-facet-remove" href="{{ filter.url_to_remove }}">
170+
<facet-remove>
171+
<a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
158172
<span class="active-facets__button-inner button button--tertiary">
159-
{%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
173+
{{ value.label | escape }}
160174
{% render 'icon-close-small' %}
161175
</span>
162176
</a>
177+
</facet-remove>
178+
{%- endfor -%}
179+
{% if filter.type == "price_range" %}
180+
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
181+
<facet-remove>
182+
<a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
183+
<span class="active-facets__button-inner button button--tertiary">
184+
{%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
185+
{% render 'icon-close-small' %}
186+
</span>
187+
</a>
188+
</facet-remove>
163189
{%- endif -%}
164190
{% endif %}
165191
{%- endfor -%}
@@ -237,11 +263,7 @@
237263
{%- for value in filter.values -%}
238264
<li class="mobile-facets__item list-menu__item">
239265
<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 %}">
240-
<input class="mobile-facets__checkbox"
241-
type="checkbox"
242-
name="{{ value.param_name }}"
243-
value="{{ value.value }}"
244-
id="Filter-{{ filter.label | escape }}-mobile-{{ forloop.index }}"
266+
<input class="mobile-facets__checkbox" type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}" id="Filter-{{ filter.label | escape }}-mobile-{{ forloop.index }}"
245267
{% if value.active %}checked{% endif %}
246268
{% if value.count == 0 and value.active == false %}disabled{% endif %}
247269
>
@@ -252,8 +274,8 @@
252274
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
253275
</svg>
254276

255-
<svg class="icon icon-checkmark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9" fill="none" width="10px" height="10px">
256-
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.35.643a.5.5 0 01.006.707l-6.77 6.886a.5.5 0 01-.719-.006L.638 4.845a.5.5 0 11.724-.69l2.872 3.011 6.41-6.517a.5.5 0 01.707-.006h-.001z" fill="currentColor"/>
277+
<svg class="icon icon-checkmark" width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
278+
<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" />
257279
</svg>
258280

259281
{{ value.label | escape }} ({{ value.count }})
@@ -263,7 +285,9 @@
263285
</ul>
264286

265287
<div class="no-js-hidden mobile-facets__footer">
266-
<a href="{{ collection.url }}" class="mobile-facets__clear button button--secondary js-facet-remove">{{ 'sections.collection_template.clear' | t }}</a>
288+
<facet-remove>
289+
<a href="{{ collection.url }}" class="mobile-facets__clear button button--secondary">{{ 'sections.collection_template.clear' | t }}</a>
290+
</facet-remove>
267291
<button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'sections.collection_template.apply' | t }}</button>
268292
<noscript><button class="button button--primary">{{ 'sections.collection_template.apply' | t }}</button></noscript>
269293
</div>
@@ -351,7 +375,9 @@
351375
{%- endif -%}
352376

353377
<div class="mobile-facets__footer">
354-
<a href="{{ collection.url }}" class="mobile-facets__clear button button--secondary js-facet-remove">{{ 'sections.collection_template.clear' | t }}</a>
378+
<facet-remove>
379+
<a href="{{ collection.url }}" class="mobile-facets__clear button button--secondary">{{ 'sections.collection_template.clear' | t }}</a>
380+
</facet-remove>
355381
<button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'sections.collection_template.apply' | t }}</button>
356382
<noscript><button class="button button--primary">{{ 'sections.collection_template.apply' | t }}</button></noscript>
357383
</div>
@@ -367,29 +393,35 @@
367393
</menu-drawer>
368394

369395
<div class="active-facets active-facets-mobile">
370-
<a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button js-facet-remove">
371-
<span class="active-facets__button-inner button button--secondary">
372-
{{ 'sections.collection_template.clear_all' | t }}
373-
</span>
374-
</a>
396+
<facet-remove>
397+
<a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button">
398+
<span class="active-facets__button-inner button button--secondary">
399+
{{ 'sections.collection_template.clear_all' | t }}
400+
</span>
401+
</a>
402+
</facet-remove>
375403
{%- for filter in collection.filters -%}
376404
{%- for value in filter.active_values -%}
377-
<a class="active-facets__button active-facets__button--light js-facet-remove" href="{{ value.url_to_remove }}">
378-
<span class="active-facets__button-inner button button--tertiary">
379-
{{ value.label | escape }}
380-
{% render 'icon-close-small' %}
381-
</span>
382-
</a>
383-
{%- endfor -%}
384-
385-
{% if filter.type == "price_range" %}
386-
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
387-
<a class="active-facets__button active-facets__button--light button button--tertiary js-facet-remove" href="{{ filter.url_to_remove }}">
405+
<facet-remove>
406+
<a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
388407
<span class="active-facets__button-inner button button--tertiary">
389-
{%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
408+
{{ value.label | escape }}
390409
{% render 'icon-close-small' %}
391410
</span>
392411
</a>
412+
</facet-remove>
413+
{%- endfor -%}
414+
415+
{% if filter.type == "price_range" %}
416+
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
417+
<facet-remove>
418+
<a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
419+
<span class="active-facets__button-inner button button--tertiary">
420+
{%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
421+
{% render 'icon-close-small' %}
422+
</span>
423+
</a>
424+
</facet-remove>
393425
{%- endif -%}
394426
{% endif %}
395427
{%- endfor -%}

0 commit comments

Comments
 (0)