Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed price filter to use text input #3280

Merged
merged 7 commits into from
Mar 15, 2024
Merged

Changed price filter to use text input #3280

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cfd2b07
Changed price filter to use text input
tyleralsbury Feb 15, 2024
c9916e2
Removed stepping and enabled all meta key inputs
tyleralsbury Feb 15, 2024
7b38180
Turned price filter into a snippet to remove duplicate code
tyleralsbury Feb 15, 2024
4432391
Merge branch 'main' into price-filter-changes
tyleralsbury Feb 16, 2024
7f83120
Removed need for nbsp, added escape and apostrophe, slightly changed …
tyleralsbury Feb 29, 2024
5466551
Merge branch 'price-filter-changes' of https://github.com/Shopify/daw…
tyleralsbury Feb 29, 2024
b93c7d4
Retain focus in text inputs
tyleralsbury Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 17 additions & 9 deletions assets/facets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,9 +300,10 @@ FacetFiltersForm.setListeners();
class PriceRange extends HTMLElement {
constructor() {
super();
this.querySelectorAll('input').forEach((element) =>
element.addEventListener('change', this.onRangeChange.bind(this))
);
this.querySelectorAll('input').forEach((element) => {
element.addEventListener('change', this.onRangeChange.bind(this));
element.addEventListener('keydown', this.onKeyDown.bind(this));
});
this.setMinAndMaxValues();
}

Expand All @@ -311,20 +312,27 @@ class PriceRange extends HTMLElement {
this.setMinAndMaxValues();
}

onKeyDown(event) {
if (event.metaKey) return;

const pattern = /[0-9]|\.|,| |Tab|Backspace|Enter|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Delete/;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is a full list of keys that matter. Should be tested for completeness.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should add apostrophe ', it's one of the supported currency formats https://help.shopify.com/en/manual/markets/pricing/currency-formatting

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting that I was able to press Esc without issue even though Escape is it's own value. 🤔 MDN link. I wonder if some other event listener on the modal caught this, and the event was allowed to propagate up. Regardless, worth adding Escape to the list.

if (!event.key.match(pattern)) event.preventDefault();
}

setMinAndMaxValues() {
const inputs = this.querySelectorAll('input');
const minInput = inputs[0];
const maxInput = inputs[1];
if (maxInput.value) minInput.setAttribute('max', maxInput.value);
if (minInput.value) maxInput.setAttribute('min', minInput.value);
if (minInput.value === '') maxInput.setAttribute('min', 0);
if (maxInput.value === '') minInput.setAttribute('max', maxInput.getAttribute('max'));
if (maxInput.value) minInput.setAttribute('data-max', maxInput.value);
if (minInput.value) maxInput.setAttribute('data-min', minInput.value);
if (minInput.value === '') maxInput.setAttribute('data-min', 0);
if (maxInput.value === '') minInput.setAttribute('data-max', maxInput.getAttribute('data-max'));
}

adjustToValidValues(input) {
const value = Number(input.value);
const min = Number(input.getAttribute('min'));
const max = Number(input.getAttribute('max'));
const min = Number(input.getAttribute('data-min'));
const max = Number(input.getAttribute('data-max'));

if (value < min) input.value = min;
if (value > max) input.value = max;
Expand Down
133 changes: 5 additions & 128 deletions snippets/facets.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,13 +357,6 @@
</div>
</details>
{% when 'price_range' %}
{% liquid
assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,UYU,VES,VND' | split: ','
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A weight off my shoulders for this to be gone. 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was literally thinking "How did currencies become the new payment logos!?"

assign uses_comma_decimals = false
if currencies_using_comma_decimals contains cart.currency.iso_code
assign uses_comma_decimals = true
endif
%}
<details
id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
Expand Down Expand Up @@ -396,61 +389,7 @@
{%- endif -%}
</div>
<price-range class="facets__price">
<span class="field-currency">{{ cart.currency.symbol }}</span>
<div class="field">
<input
class="field__input"
name="{{ filter.min_value.param_name }}"
id="Filter-{{ filter.label | escape }}-GTE"
{%- if filter.min_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
placeholder="0"
min="0"
{%- if uses_comma_decimals -%}
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">
{{- 'products.facets.from' | t -}}
</label>
</div>
{%- if filter_type != 'vertical' -%}
<span class="field-currency">{{ cart.currency.symbol }}</span>
{%- endif -%}
<div class="field">
<input
class="field__input"
name="{{ filter.max_value.param_name }}"
id="Filter-{{ filter.label | escape }}-LTE"
{%- if filter.max_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
min="0"
{%- if uses_comma_decimals -%}
placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Filter-{{ filter.label | escape }}-LTE">
{{- 'products.facets.to' | t -}}
</label>
</div>
{% render 'price-facet', filter: filter, id_prefix: 'Filter-', filter_type: filter_type %}
</price-range>
</div>
</details>
Expand Down Expand Up @@ -487,7 +426,7 @@
{%- else -%}
{{ 0 | money }}
{%- endif -%}
-
-&nbsp;
tyleralsbury marked this conversation as resolved.
Show resolved Hide resolved
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
Expand Down Expand Up @@ -840,13 +779,6 @@
</div>
</details>
{% when 'price_range' %}
{% liquid
assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,UYU,VES,VND' | split: ','
assign uses_comma_decimals = false
if currencies_using_comma_decimals contains cart.currency.iso_code
assign uses_comma_decimals = true
endif
%}
<details
id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
class="mobile-facets__details js-filter"
Expand Down Expand Up @@ -878,62 +810,7 @@
</p>

<price-range class="facets__price">
<span class="field-currency">{{ cart.currency.symbol }}</span>
<div class="field">
<input
class="field__input"
name="{{ filter.min_value.param_name }}"
id="Mobile-Filter-{{ filter.label | escape }}-GTE"
{%- if filter.min_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
placeholder="0"
min="0"
inputmode="decimal"
{%- if uses_comma_decimals -%}
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">
{{- 'products.facets.from' | t -}}
</label>
</div>

<span class="field-currency">{{ cart.currency.symbol }}</span>
<div class="field">
<input
class="field__input"
name="{{ filter.max_value.param_name }}"
id="Mobile-Filter-{{ filter.label | escape }}-LTE"
{%- if filter.max_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
min="0"
inputmode="decimal"
{%- if uses_comma_decimals -%}
placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">
{{- 'products.facets.to' | t -}}
</label>
</div>
{% render 'price-facet', filter: filter, id_prefix: 'Mobile-Filter-' %}
</price-range>
<div class="no-js-hidden mobile-facets__footer">
<facet-remove class="mobile-facets__clear-wrapper">
Expand Down Expand Up @@ -1051,7 +928,7 @@
{%- else -%}
{{ 0 | money }}
{%- endif -%}
-
-&nbsp;
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
tyleralsbury marked this conversation as resolved.
Show resolved Hide resolved
Expand Down Expand Up @@ -1168,7 +1045,7 @@
{%- else -%}
{{ 0 | money }}
{%- endif -%}
-
-&nbsp;
tyleralsbury marked this conversation as resolved.
Show resolved Hide resolved
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
Expand Down
45 changes: 45 additions & 0 deletions snippets/price-facet.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<span class="field-currency">{{ cart.currency.symbol }}</span>

<div class="field">
<input
class="field__input"
name="{{ filter.min_value.param_name }}"
id="{{ id_prefix }}{{ filter.label | escape }}-GTE"
{%- if filter.min_value.value -%}
value="{{ filter.min_value.value | money_without_currency }}"
{%- endif -%}
type="text"
inputmode="decimal"
placeholder="0"
data-pattern="\d| |,|\."
data-min="0"
data-max="{{ filter.range_max | money_without_currency }}"
>
<label class="field__label" for="{{ id_prefix }}{{ filter.label | escape }}-GTE">
{{- 'products.facets.from' | t -}}
</label>
</div>

{%- if filter_type != 'vertical' -%}
<span class="field-currency">{{ cart.currency.symbol }}</span>
{%- endif -%}

<div class="field">
<input
class="field__input"
name="{{ filter.max_value.param_name }}"
id="{{ id_prefix }}{{ filter.label | escape }}-LTE"
{%- if filter.max_value.value -%}
value="{{ filter.max_value.value | money_without_currency }}"
{%- endif -%}
type="text"
inputmode="decimal"
placeholder="{{ filter.range_max | money_without_currency }}"
data-pattern="\d| |,|\."
data-min="0"
data-max="{{ filter.range_max | money_without_currency }}"
>
<label class="field__label" for="{{ id_prefix }}{{ filter.label | escape }}-LTE">
{{- 'products.facets.to' | t -}}
</label>
</div>
Loading