Multiple filters by checkboxes

Ask the community
, ,
1

Hello there,
I’m having a hard time figuring this thing out and I’m running out of time (I have a deadline in a few days).
I am quite new to the code and not really prepared with java in general, so I apologive in advance if any of this sound silly.
Basically I’m working on a Travel agency website with a complex search.
I have a page showing packages (a repeater connocted to a dataset).
I want to be able for users to filter (or search) the repeater through one input filed, 2 dropdowns, a series of checkboxes and one radiobutton.

I want certain groups of checkboxes to push their values to a filter of one field and other checkboxes to other fields.
I’ll explain:
Period: january, february etc (this group relates to the field contiainig the months in the database)
Other Filters: Sea, Cities, Art etc (this group refers to the field named Tags)

and so on.

I understand I need to store the values in an array to the push it into the filters, but I cannot figure how to do it.
I can share links if needed of course.

Any help here would be suuuper appreciated. I’ll be thankful forever! :slight_smile:

So far my code is:

import {local} from ‘wix-storage’;
import wixData from ‘wix-data’;

export function searchButton_click() {

search(); 


}

$w.onReady(function () {
var sameWord = local.getItem(“searchWord”);

$w("#iDestinazione").value = sameWord; 
$w("#iDestinazione").placeholder = sameWord; 

var samePeriodo = local.getItem("optionPeriodo"); 

$w("iPeriodo").value = samePeriodo; 
$w("iPeriodo").placeholder = samePeriodo; 

$w('#dataset1').onReady(function () { 

    search(); 

});

});

function search() {
wixData.query(‘Pacchetti_Viaggio’)

.contains('destinazione', $w("#iDestinazione").value) 
.gt('dataFine', new Date()) 

  .find() 

   .then(res => {

$w(‘#repeater1’).data = res.items;

});

}

2

Hey
Create a searchfilter array like

let searchArray = {
searchBox: $w(“#elementID”).value,
checkBox1: $w("#checkBoxElementID).checked
}
and so on for all your filters and on click event on your search make sure all values get stored in this array as above shows.

Then use local.setItem(“searchValues”, JSON.stringify(searchArray)) and that will store the complete array in a local storage with no end date.

Then on page load
let searchValues = null;
if (local.getItem(“searchValues”)) {
searchValues = JSON.parse(local.getItem(“searchValues”));
}

Then if searchValues is not null populate the elements with the stored values as below.

if (searchValues) {
$w(“#elementID”).value = searchValues.searchBox;
}
Then when you have all the values working in local storage you also need to have a reset button connected to a onClick event and use local.clear() to clear all local storage or just use local.setItem(“searchValues”,null) to just clear that particular value.

3

Hi Andreas,
thank you so much for your quick answer.
I’ll give it a go as soon as possible.
Cheers!