Skip to main content

Section Attributes

data-qumra-section​

Mark a container for server-side widget rerendering. When filters, sort, or search change, the SDK fetches fresh HTML from the server and replaces the container content.

<div data-qumra-section="products-grid">
  {% widget "products-grid" %}
</div>

The value must match the widget key used in {% widget "..." %}.

This attribute is auto-detected by the FiltersModule on page load — no JavaScript registration needed.

Programmatic alternative

You can also register sections via JavaScript:

qumra.filters.section('products-grid', '#my-container');

See Filters Module for details.

Loading State​

While fetching, the element gets data-qumra-loading="true":

[data-qumra-loading="true"] {
  opacity: 0.5;
  pointer-events: none;
}

The attribute is removed when the content is swapped.

Events: section:rendering → section:rendered

Full Example​

<div class="collection-page">
  <!-- Filters (auto-bound via data-qumra-filter) -->
  <aside>
    <label>
      <input type="checkbox" data-qumra-filter="color" data-value="red"> Red
    </label>
    <label>
      <input type="checkbox" data-qumra-filter="color" data-value="blue"> Blue
    </label>
    <button data-qumra-filter-clear>Clear</button>
  </aside>

  <!-- Auto-rerenders when filters change -->
  <main data-qumra-section="products-grid">
    {% widget "products-grid" %}
  </main>
</div>

No JavaScript required.