spz-filter#

#When to Use

When filtering and sorting album merchandise is needed, typically used on album pages.

#Code Demonstration

#Basic Usage

In the selector, we can use simple identifiers to implement some behaviors. The supported identifiers are as follows:

• Use role="content" to denote the element containing filtering content (required).
• Inside the filter content element, the spz-render element with the as="default" attribute represents the default template (required).
  • If we want a separate spz-render for a particular filtering dimension, change the as attribute's value to the last element of the array split by the . symbol from the param_name attribute in the filter data. For example, to display the price dimension param_name="filter.v.price" separately, change the as value to price.
• Within the filter content element, the spz-render template content supports the following behaviors (when the corresponding role attribute is configured, the component will implement the behavior according to the value of the role):
  • role="reset" identifies the reset button of the current template (optional)
  • role="items" identifies elements for multiple selection (optional), for example: spz-selector, select;
  • role="price-min" identifies the input box for the minimum price in a price range (optional), usually an input box;
  • role="price-max" identifies the input box for the maximum price in a price range (optional), usually an input box;
  • role="selectedCount" indicates the number of options currently selected in the template; the number updates automatically when more/fewer options are selected (optional)
  • role="sortBy" identifies the sorting element (optional), for example: select;
  • role="applyAll" identifies the button to apply all selections/inputs, typically used in the mobile filter popup;
• Within the filter result element, the spz-render template's as attribute rules are consistent with those inside the filter content element, but the supported behaviors are different. The behaviors supported by the spz-render template in the filter result element are:
  • role="delete" identifies the delete button (optional)
  • role="clearAll" identifies the button to delete all filter results (optional)

<spz-filter
  id="collection-filter"
  list-id="collection-list"
  result-id="filter-result"
  collection-id="{{ collection.id }}"
  layout='container'
>
  <div>
    <!-- Filter content -->
    <div role="content">
      <spz-render as="default" layout="container" manual>
        <template>
          <div>
            <!-- ... -->
            <button role="reset">Reset</button>
            <spz-selector layout="container" multiple role="items" @select="collection-filter.apply(values=event.selectedOptions);">
              <div spz-for='item in data.values' class='filter-item-option flex md:items-center' option="${item.value}">
                <!-- ... -->
              </div>
            </spz-selector>
          </div>
        </template>
      </spz-render>
      <spz-render as="price" layout="container" manual>
        <template>
          <div>
            <!-- ... -->
            <input role="price-min" type="number" placeholder="From" @input-debounced="collection-filter.apply(value=event.value);">
            <input role="price-max" type="number" placeholder="To" @input-debounced="collection-filter.apply(value=event.value);">
          </div>
        </template>
      </spz-render>
    </div>
    <!-- Sort by -->
    <select role="sortBy" {% if isPC %} @change="collection-list.refresh(sort_by=event.value, redo=true);" {% endif %}>
      <option value="manual" selected>Recommend</option>
      <option value="price-ascending">Price, low to high</option>
      <!-- .... -->
    </select>
  </div>

  <!-- Filter result -->
  <div id="filter-result" hidden>
    <spz-render as="default" manual layout="container">
      <template>
        <div role="delete">
          <!-- ... -->
        </div>
      </template>
    </spz-render>
    <spz-render as="price" manual layout="container">
      <template>
        <div role="delete">
          <!-- ... -->
        </div>
      </template>
    </spz-render>

    <div role="

clearAll">Clear All</div>
  </div>
</spz-filter>

<spz-list id="collection-list" manual ...>
  <!-- ... -->
</spz-list>

#Properties

#Methods

#apply

#clearAll

Clears all filter results, no parameters needed.

#AI Summary (LLM Ready)

• Component ID: spz-filter
• One-line purpose: Album merchandise selector.
• Detected attribute rows: 0
• Detected method subsections: 2
• Detected event subsections: 0
• Top attribute names: none (needs manual completion)
• Top method names: apply, clearAll
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/