Help with Datafilter, Or/and function

Ask the community
,
1

Hi

I have this code:

import {wixData} from ‘wix-data’;
export function button2_click_1 (event, $ w) {
$ w (“# dataset1”). setFilter (wixData.filter ()

.contains (“propType”, $ w (‘# dropdown1’). value)
.ge (“bedrooms”, $ w (‘# dropdown2’). value)
.ge (“bathrooms”, $ w (‘# dropdown3’). value)
.ge (“pool”, $ w (‘# dropdown6’). value)
.ge (“safetyApartments”, $ w (‘# dropdown7’). value)
.ge (“accessibility”, $ w (‘# dropdown8’). value)
.ge (“location”, $ w (‘# dropdown9’). value)
.ge (“pets”, $ w (‘# dropdown10’). value)
.between (“priceMth”, parseFloat ($ w (‘# dropdown4’). value), parseFloat ($ w (‘# dropdown5’). value)))

.then ((results) => {
console.log (“Dataset is now filtered”);
$ w (“# repeater1”). data = results.items;
}). catch ((err) => {
console.log (err);
});
$ w (“# repeater1”). expand ();
}

I need help to know how to implement a “or” / “and” function that allows visitors to select only one dropdown and display the search result, but if you select multiple dropdowns, it also shows the result.

For example, if you select only the dropdown Pool = Yes, that shows the result of all the properties with pool

But if you also want to filter pool and location, you can do it.

Thank you,

2

There are a good few examples already in this forum that you can view which should help with this.
https://www.wix.com/corvid/forum/community-discussion/filtering-repeater-with-a-dropdown
https://www.wix.com/corvid/forum/community-discussion/repeater-drop-down-filter

3

This example below might be of benefit to you too.

You can use dropdown or radio buttons instead for a multiple choice “checkbox”. Then filter the dataset (repeater) by the value of the dropdown or radio button.

920×450 119 KB

920×450 143 KB

920×450 137 KB

THE ELEMENTS

The Page
Product Repeater ( #repeater1​ )​

  • Product Image: #image1​​

  • Product Name: #text1

  • Product Description: #text2

  • Product Price: #text3

  • Buy Now Button: #button1​​​​​​
    ​​
    Filter Elements

  • Size Slider Bar: #slider1

  • Checkbox (Heels): #checkbox1

  • Checkbox (Boots): #checkbox2​

  • Checkbox (Sneakers): #checkbox3

  • Submit Button: #submit

  • Container Box: #box1

The Database
Create a database: **Products ** (dataset1)
​
Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type (Boolean): ** heels ** (for filtering)

  • Product Type (Boolean): ** boots** (for filtering)

  • Product Type (Boolean): ** sneakers** (for filtering)

THE CODE

Page Code

import wixData from 'wix-data';

function ProductFilter() {
wixData.query("Products")
.eq("heels", $w("#checkbox1").checked)
.or(
wixData.query("Products")
.eq("boots", $w("#checkbox2").checked)
)
.or(
wixData.query("Products")
.eq("sneakers", $w("#checkbox3").checked)
)
// add or statements for the other checkboxes
.find()
.then((results) => {
console.log(results.items);
let Product = results.items;
$w('#repeater1').data = Product;
})
.catch((err) => {
let errorMsg = err;
console.log(errorMsg);
});
}

$w.onReady(function () {
​
ProductFilter();
​
$w('#repeater1').onItemReady(($w, itemData) => {
// Add here all the relevant elements of the repeater
$w('#text1').text = itemData.name;
$w('#text2').text = itemData.description;
$w('#text3').text = String(itemData.price);
$w('#image1').src = itemData.image;
});
});

export function checkbox1_change(event) {
ProductFilter();
}

export function checkbox2_change(event) {
ProductFilter();
}

export function checkbox3_change(event) {
ProductFilter();
}