Skip to main content

Filter Attributes

data-qumra-filter​

Toggle a multi-select filter value on click.

<button data-qumra-filter="gender" data-value="men">Men</button>
<button data-qumra-filter="gender" data-value="women">Women</button>

Events: collection:filtered

data-qumra-filter-search-text​

Set a search-text filter. Reads the input value on change event.

<input
  data-qumra-filter-search-text="material"
  placeholder="Search by material..."
>

Events: collection:filtered

data-qumra-filter-range​

Set a range filter on change (inputs/selects) or click (buttons).

<input
  data-qumra-filter-range="price"
  data-min="100"
  data-max="500"
>

Events: collection:filtered

data-qumra-filter-remove​

Remove a specific filter value or an entire filter on click.

<!-- Remove specific value -->
<button data-qumra-filter-remove="gender" data-value="men">× Men</button>

<!-- Remove entire filter -->
<button data-qumra-filter-remove="price">× Price</button>

Events: collection:filtered

data-qumra-filter-clear​

Clear all filters and search query on click.

<button data-qumra-filter-clear>Clear All Filters</button>

Events: collection:reset

Full Example​

<!-- Filter Sidebar -->
<div class="filters-sidebar">
  <h3>Gender</h3>
  {% for option in collection.filters.gender %}
    <label>
      <input
        type="checkbox"
        data-qumra-filter="gender"
        data-value="{{ option.value }}"
      >
      {{ option.label }} ({{ option.count }})
    </label>
  {% endfor %}

  <h3>Material</h3>
  <input data-qumra-filter-search-text="material" placeholder="Search material...">

  <h3>Price Range</h3>
  <input type="number" id="price-min" placeholder="Min">
  <input type="number" id="price-max" placeholder="Max">
  <button id="apply-price">Apply</button>

  <button data-qumra-filter-clear>Clear All</button>
</div>

<!-- Products Grid — auto-rerenders on filter change -->
<main data-qumra-section="products-grid">
  {% widget "products-grid" %}
</main>
// Price range (manual binding for two-input range)
document.getElementById('apply-price').addEventListener('click', async () => {
  const min = +document.getElementById('price-min').value;
  const max = +document.getElementById('price-max').value;
  await qumra.filters.range('price', { min, max });
  // Section auto-rerenders — no extra code needed
});

// Listen to filter changes for custom UI updates
qumra.on(qumra.EVENTS.COLLECTION.FILTERED, (payload) => {
  updateActiveFilterTags(payload.data.filters);
});