AndyJames
10/2/2019 - 10:13 PM

Button Filter

Button Filter
content_copyfile_download
<!-- Single -->
<div class="fs-component">
  <h1>Button Filter</h1>
  <p>Single Select - Selects one at a time</p>
  <div class="filter-button" v-for="(item) in filters['amenities']">
    <a
      fs-fields="amenities"
      :class="{'active': buttonFilter1.includes(item.key)}"
      v-on:click="buttonFilter('buttonFilter1', item.key, $event)"
    >{{item.key}}</a>
  </div>
</div>

<!-- Multi with multi reference -->
<div class="ss-component">
  <h1>Multi Button Filter</h1>
  <p>Multi Select - Selects multiple items at a time</p>
  <div class="filter-button" v-for="(item) in filters['amenities']">
    <a
      fs-multi="true"
      fs-fields="amenities"
      :class="{'active': buttonFilter1.includes(item.key)}"
      v-on:click="buttonFilter('buttonFilter1', item.key, $event)"
    >{{item.key}}</a>
  </div>
</div>
buttonFilter Method
content_copyfile_download
/**
 * Submits a button filter search
 *
 * @param {$event} event Accepts html event
 * @param {boolean} [isMulti=false] Accepts html event
 * @param {*} model buttonFilter1 - buttonFilter10 & must be unique
 * @param {*} value The value to perform the search with
 */
buttonFilter(model, value, event)
Notes
content_copyfile_download
  • Rendered
  • Source

Limitation with multi

Multi only works if you are searching for multiple items from a field (multi reference in Webflow) tied to a collection.

When using fs-multi="true" the folloiwing must be remembered:

eg: If searching for city where only 1 city is tied to every listing multi wont work

eg: If searching for amenities where multiple amenities are tied to every listing multi will work

Multi Mode can be used in 2 ways

Single Ref

City for example is a single reference as each item can only exist in one city Use orFilter

Multi ref

Amenity for example is a multi reference as each item can have multiple amenities Use andFilter

Class

Add a class to the button link with

v-bind:class="{'active': filter7.includes(item.key)}"

This will apply an active class