spz-filter

<spz-filter
  manual
  layout="logic"
  id="collection-filter"
  content-id="filter-content"
  result-id="filter-result"
  list-id="collection-list"
  src="/api/collections//filters"
  keep-behavior="filter"
></spz-filter>

<spz-list
  layout="container"
  id="collection-list"
  ...
></spz-list>

required

You can use either a URL API or a script:#script_id to get data of the filter.

required

Specifies which the data of the spz-list to sort or filter.

required

Specifies the element id for rendering filtered data.

It must have a locale-map attribute to to set the specified content.

Its child elements must be an spz-render. They can have a label as a attribute. If the label is equal to an spz-render attribute, it will be rendered. Otherwise it will be rendered by an spz-render with the default attribute. The spz-render must have a manual attribute.

<script id="filter-locale-json" type="application/json">
  {
    "availability": {
      "title": "Availability",
      "in_stock": "In stock",
      "out_of_stock": "Out of stock"
    },
    "price": "Price",
    "vendor": "vendor"
  }
</script>

<div id="filter-content" locale-map="filter-locale-json">
  <spz-render layout="container" manual default>
    <template>
      <!-- ... -->
    </template>
  </spz-render>

  <spz-render layout="container" manual price>
    <template>
      <!-- ... -->
    </template>
  </spz-render>
</div>

required

Specifies the element id for rendering filtered results.

If the child element has a delete attribute, the user clicks on it and it will be deleted.

If the child element has a clear attribute, the user clicks on it and the filter results will be cleared.

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

  <div clear>Clear all</div>
</div>

If this attribute is present, the template doesn’t render at the beginning.

Get relevant parameters from URL to generate initial filter results. It has the following values:

• filter: Get filter related parameters from URL to apply to filter results.
• tags: Get tags related parameters from the URL to apply to the filter results

A string of the event name. Report data when the element is changed.

To show filter when the spz-filter has a manual attribute, no parameter required.

To apply selected data to filter, no parameter required.

To re-render.

To delete a filter result. Elements using this action need to have a category attribute. No parameter required.

To clear all filters. No parameter required.

Re-request data to render filter. No parameter required.