Skip to content

Instantly share code, notes, and snippets.

@joeybab3

joeybab3/component-facets.css

Forked from trenkwill/component-facets.css
Last active May 30, 2024 21:58
Show Gist options
  • Save joeybab3/834b571e8fbbcb43861f2e331724973e to your computer and use it in GitHub Desktop.
Save joeybab3/834b571e8fbbcb43861f2e331724973e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joeybab3 revised this gist May 30, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions facets.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ class PriceRange extends HTMLElement {
    super();

    this.querySelectorAll('input')
    .forEach(element => element.addEventListener('change', this.onRangeChange.bind(this)));
    .forEach(element => element.addEventListener('change', this.onRangeChange.bind(this, element.parentElement.querySelector('.bubble'))));

    // commented out in order to make range sliders work properly
    // this.setMinAndMaxValues();
    @@ -22,7 +22,7 @@ class PriceRange extends HTMLElement {

    }

    onRangeChange(event) {
    onRangeChange(event, bubble) {
    this.adjustToValidValues(event.currentTarget);
    this.setBubble(event.currentTarget, bubble);
    // commented out in order to make range sliders work properly
  2. @trenkwill trenkwill revised this gist Aug 2, 2022. 1 changed file with 47 additions and 30 deletions.
    77 changes: 47 additions & 30 deletions facets.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -1,42 +1,59 @@
    // replace the <price-range> element that contains number inputs with range inputs

    <price-range class="facets__price">
    <span class="field-currency">{{ cart.currency.symbol }}</span>
    <div class="field">
    <input class="field__input"

    <div class="range-wrap">
    <input
    class="range"
    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"
    id="Filter-{{ filter.label | escape }}-GTE"
    {% if filter.min_value.value %}
    value="
    {%- if uses_comma_decimals -%}
    {{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '' }}
    {% else %}
    {{ filter.min_value.value | money_without_currency | replace: ',', '' }}
    {% endif %}
    "
    {% else %}
    value="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 %}
    step="0.5"
    max="
    {%- if uses_comma_decimals -%}
    {{ filter.range_max | divided_by: 2 | money_without_currency | replace: '.', '' | replace: ',', '' }}
    {% else %}
    {{ filter.range_max | divided_by: 2 | money_without_currency | replace: ',', '' }}
    {% endif %}
    "
    {% endif %}
    type="range"
    >
    <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">{{ 'products.facets.from' | t }}</label>
    <output class="bubble"></output>
    </div>

    <span class="field-currency">{{ cart.currency.symbol }}</span>
    <div class="field">
    <input class="field__input"
    <div class="range-wrap">
    <input
    class="range"
    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: ',', '' }}"
    id="Filter-{{ filter.label | escape }}-LTE"
    step="0.5"
    {% if filter.max_value.value %}
    value="
    {%- if uses_comma_decimals -%}
    {{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '' }}
    {% else %}
    {{ filter.max_value.value | money_without_currency | replace: ',', '' }}
    {% endif %}
    "
    {% else %}
    value="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
    min="{{ filter.range_max | divided_by: 2 | money_without_currency | replace: ',', '' }}"
    {% endif %}
    value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
    type="range"
    max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
    >
    <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">{{ 'products.facets.to' | t }}</label>
    <output class="bubble"></output>
    </div>

    </price-range>
  3. @trenkwill trenkwill created this gist Aug 2, 2022.
    53 changes: 53 additions & 0 deletions component-facets.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    // Add styling to the CSS file

    .facets__price input[type='range'] {
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    outline: none;
    color: rgb(var(--color-foreground));
    opacity: .8;
    background: rgb(var(--color-foreground));
    box-sizing: border-box;
    transition: opacity .2s;
    cursor: pointer;
    height: 1px;
    }


    .facets__price input[type='range']::-webkit-slider-thumb {
    cursor: ew-resize;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-foreground));
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    }
    .facets__price input[type="range"]::-moz-range-progress {
    background: rgb(var(--color-foreground));
    }
    .facets__price input[type="range"]::-moz-range-track {
    background: rgb(var(--color-foreground));
    }
    /* IE*/
    .facets__price input[type="range"]::-ms-fill-lower {
    background: rgb(var(--color-foreground));
    }
    .facets__price input[type="range"]::-ms-fill-upper {
    background: rgb(var(--color-foreground));
    }

    .facets__price .range-wrap {
    position: relative;
    margin: 0 auto 3rem;
    }
    .facets__price .range {
    width: 100%;
    }
    .facets__price .bubble {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    }
    61 changes: 61 additions & 0 deletions facets.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    // replace the PriceRange class in facets.js

    class PriceRange extends HTMLElement {
    constructor() {
    super();

    this.querySelectorAll('input')
    .forEach(element => element.addEventListener('change', this.onRangeChange.bind(this)));

    // commented out in order to make range sliders work properly
    // this.setMinAndMaxValues();

    this.querySelectorAll('.range-wrap').forEach(wrap => {
    const range = wrap.querySelector(".range");
    const bubble = wrap.querySelector(".bubble");

    range.addEventListener("input", () => {
    this.setBubble(range, bubble);
    });
    this.setBubble(range, bubble);
    });

    }

    onRangeChange(event) {
    this.adjustToValidValues(event.currentTarget);
    this.setBubble(event.currentTarget, bubble);
    // commented out in order to make range sliders work properly
    // this.setMinAndMaxValues();
    }

    setBubble(range, bubble) {
    const val = range.value;
    const min = range.min ? range.min : 0;
    const max = range.max ? range.max : 100;
    const newVal = Number(((val - min) * 100) / (max - min));
    bubble.innerHTML = val;

    // Sorta magic numbers based on size of the native UI thumb
    bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
    }

    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'));
    }

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

    if (value < min) input.value = min;
    if (value > max) input.value = max;
    }
    }
    42 changes: 42 additions & 0 deletions facets.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    // replace the <price-range> element that contains number inputs with range inputs

    <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>
    </price-range>