Table of Content

  1. Overview
  2. Elements
  3. Code
  4. WIx API Reference

Overview

WIX repeater can be filtered using a number of input elements such as tags and multiple selection elements. However, it is possible to filter WIX repeater using button elements. In this tutorial, you will be learning how to use buttons to filter the WIX repeater when displaying items from a repeater.


Elements

Repeater

Add a repeater element from under the List & Grids section. Style it as you desire with colors and fonts matching your website’s theme.

Button

Add buttons with labels matching the keyword you want to filter in a particular field in your database collection. To filter a particular keyword or keyphrase is somehow more specific when filtering items of particular categories. For example, to filter a database category containing only “Kids” then make your button label to be “Kids”. Please note also that the lettering is case sensitive. If your database keyword is “kids” and your button label is “kids” the filter will not work.

This tutorial is a continuation of conditional filtering which in this case we are using buttons and not dropdowns.

Database collection

A database collection is required to get the filter to work. Create a database and get the field key of the field where you’d like to filter. Mine is location.

Field Keys

Here a the list of fieldkeys I used

  • Location field – location
  • Cuisine field – cuisine

Code

 import { local } from 'wix-storage';
 import wixData from 'wix-data';
 
 $w.onReady(() => {
     $w('#dataset1').onReady(() => {
 
//This piece of code filters the london in the location field in our database
         $w('#london').onClick(() => {
             let location = $w("#london").label
             $w("#dataset1").setFilter(wixData.filter()
                 .eq('location', location))
         });
 
//This one filters worldwide in the location field in our database
         $w('#worldwide').onClick(() => {
             let location1 = $w("#worldwide").label
             $w("#dataset1").setFilter(wixData.filter()
                 .eq('location', location1))
         });
 
//This filters everything in our location field in our database
         $w("#all").onClick(() => {
             $w("#dataset1").setFilter(wixData.filter());
         })
 
     });
 });
</pre></div>

Leave a Reply

Your email address will not be published. Required fields are marked *