Filter by multiple user inputs and cross pages

Ask the community
,
1

Hi there
I am a Wix newbie since a few weeks, never been a programmer but love the flexibility and ease of doing with Wix.
I am building an aggregator like page with custom made filters that select the appropriate data from the collection database.
I have been able to get the onclick events running, so that the custom icon filters turn off/ on and filter the data collection when clicked, however they do not work at the same time, meaning whenever I click one filter the others get disregarded.

The page is :
https://www.biciondo.com/copy-of-web-deals-allrounder

Also I would like to enter this page, coming from the landing page with preset filters (defined on landing page by user) - how do I relay that information to the result page?
Sorry for the ignorance, I am just learning, a few hints would help me a lot & save time.

cheers
Mathias

2

sorry updated URL:
https://www.biciondo.com/rennrad-deals

3

Hey Mathias!

With regards to the first part of the issue, here is some context:

I’d like to emphasise the following part:

Setting a dataset’s filter overrides existing filters that were previously set using the setFilter() function or using the Dataset Settings panel in the Editor.
Essentially this means that setFilter() will replace any previous filter you have set before. This is very flexible, but it also it puts a burden on your app code to properly construct filter passed to dataset. Best way to implement this is to create a function that is able to collect all values in one go and set the filter, e.g.:

import wixData from 'wix-data'

function applyFilter() {
    const conditionA = $w('#some-dropdown-a').value
    const conditionB = $w('#some-checkbox-b').checked

   const newFilter = wixData.filter()
    .eq('fieldA', $w('#some-dropdown-a').value)
    .eq('fieldB', $w('#some-checkbox-b').checked)

  $w('#dataset').setFilter(newFilter)
}

Then you need to make sure this function is called whenever there is a change on any of the inputs:

$w.onReady(() => {
    $w('#some-dropdown-a').onChange(applyFilter)
    $w('#some-checkbox-b').onChange(applyFilter)
})

Regarding your second question I do not have an answer yet, but I will definitely look into it. Good luck!

4

Mathias, regarding second part of your question - you should look into wix-location: wix-location-frontend - Velo API Reference - Wix.com

One of the possible approaches is the following:

  1. User clicks a submit button to confirm input values
  2. A click handler on submit button collects all input values and issues a redirect with wix-location and query parameters
  3. Destination page parses query and fills inputs based on those query parameters
5

awesome thanks ! will post shortly of it all worked !! thanks so much for the quick help

6

Hi
I wrote the code as prescribed but now the results show initially but whenever one filter is selected no results are appearing …
here the code (including the custom clickable icons)

import wixData from ‘wix-data’;

function applyFilter() {

const aeroChoice = $w(“#aeroiconRed2”).isVisible
const allroundChoice = $w(‘#allroundIconRed2’).isVisible
const marathonChoice = $w(‘#marathonIconRed2’).isVisible
const triaChoice = $w(‘#triIconRed2’).isVisible
const gravelChoice = $w(‘#graveliconRed2’).isVisible
const priceLimit = $w(‘#pricelimit’).value
const rimChoice = $w(‘#brakeIconRed2’).isVisible
const discChoice = $w(‘#discIconRed2’).isVisible
const groupsetChoice = $w(‘#groupset’).value
const brandChoice = $w(‘#brandchoice’).value

const newChoices = wixData.filter()
.eq(“aero”, aeroChoice)
.eq(“allround”, allroundChoice)
.eq(“marathon”, marathonChoice)
.eq(“tri”, triaChoice)
.eq(“gravel”, gravelChoice)
.le(“sell_price”, priceLimit)
.eq(“rimBrake”, rimChoice)
.eq(“discBrake”, discChoice)
.eq(“groupset”, groupsetChoice)
.eq(“brand”, brandChoice)
$w(‘#datasetDeals’).setFilter(newChoices)

}

$w.onReady(() => {
$w(‘#hoverboxAero’).onClick(applyFilter)
$w(‘#hoverboxAllround’).onClick(applyFilter)
$w(‘#hoverboxMarathon’).onClick(applyFilter)
$w(‘#hoverboxTri’).onClick(applyFilter)
$w(‘#hoverboxGravel’).onClick(applyFilter)
$w(‘#pricelimit’).onChange(applyFilter)
$w(‘#hoverboxBrake’).onClick(applyFilter)
$w(‘#hoverboxDisc’).onClick(applyFilter)
$w(‘#groupset’).onChange(applyFilter)
$w(‘#brandchoice’).onChange(applyFilter)

});

export function hoverboxAero_mouseIn(event) {
//Add your code for this event here:
$w(‘#aeroiconred’).show();
$w(‘#textAero’).show();
}

export function hoverboxAero_mouseOut(event) {
//Add your code for this event here:
$w(‘#aeroiconred’).hide();
$w(‘#textAero’).hide();
}

export function hoverboxAero_click(event) {
//Add your code for this event here:
if ( $w(“#aeroiconRed2”).isVisible ) {
$w(“#aeroiconRed2”).hide();
}
else {
$w(‘#aeroiconRed2’).show();
}

}

export function hoverboxAllround_mouseIn(event) {
//Add your code for this event here:
$w(‘#allroundIconRed1’).show();
$w(‘#textAllround’).show();
}

export function hoverboxAllround_mouseOut(event) {
//Add your code for this event here:
$w(‘#allroundIconRed1’).hide();
$w(‘#textAllround’).hide();
}

export function hoverboxAllround_click(event) {
//Add your code for this event here:
if ( $w(‘#allroundIconRed2’).isVisible ) {
$w(‘#allroundIconRed2’).hide();
}
else {
$w(‘#allroundIconRed2’).show();
}
}

export function hoverboxMarathon_mouseIn(event) {
//Add your code for this event here:
$w(‘#marathonIconRed1’).show();
$w(‘#textMarathon’).show();
}

export function hoverboxMarathon_mouseOut(event) {
//Add your code for this event here:
$w(‘#marathonIconRed1’).hide();
$w(‘#textMarathon’).hide();
}

export function hoverboxMarathon_click(event) {
//Add your code for this event here:
if ( $w(‘#marathonIconRed2’).isVisible) {
$w(‘#marathonIconRed2’).hide();
}
else {
$w(‘#marathonIconRed2’).show();
}
}

export function hoverboxTri_mouseIn(event) {
//Add your code for this event here:
$w(‘#triIconRed1’).show();
$w(‘#textTri’).show();
}

export function hoverboxTri_mouseOut(event) {
//Add your code for this event here:
$w(‘#triIconRed1’).hide();
$w(‘#textTri’).hide();
}

export function hoverboxTri_click(event) {
//Add your code for this event here:
if ( $w(‘#triIconRed2’).isVisible) {
$w(‘#triIconRed2’).hide();
}
else {
$w(‘#triIconRed2’).show();
}
}

export function hoverboxGravel_mouseIn(event) {
//Add your code for this event here:
$w(‘#graveliconRed1’).show();
$w(‘#textGravel’).show();
}

export function hoverboxGravel_mouseOut(event) {
//Add your code for this event here:
$w(‘#graveliconRed1’).hide();
$w(‘#textGravel’).hide();
}

export function hoverboxGravel_click(event) {
//Add your code for this event here:
if ( $w(‘#graveliconRed2’).isVisible) {
$w(‘#graveliconRed2’).hide();
}
else {
$w(‘#graveliconRed2’).show();
}
}

export function hoverboxBrake_mouseIn(event) {
//Add your code for this event here:
$w(‘#brakeIconRed1’).show();
$w(‘#textBrake’).show();
}

export function hoverboxBrake_mouseOut(event) {
//Add your code for this event here:
$w(‘#brakeIconRed1’).hide();
$w(‘#textBrake’).hide();
}

export function hoverboxBrake_click(event) {
//Add your code for this event here:
if ( $w(‘#brakeIconRed2’).isVisible) {
$w(‘#brakeIconRed2’).hide();
}
else {
$w(‘#brakeIconRed2’).show();
}
}

export function hoverboxDisc_mouseIn(event) {
//Add your code for this event here:
$w(‘#discIconRed1’).show();
$w(‘#textDisc’).show();
}

export function hoverboxDisc_mouseOut(event) {
//Add your code for this event here:
$w(‘#discIconRed1’).hide();
$w(‘#textDisc’).hide();
}

export function hoverboxDisc_click(event) {
//Add your code for this event here:
if ( $w(‘#discIconRed2’).isVisible) {
$w(‘#discIconRed2’).hide();
}
else {
$w(‘#discIconRed2’).show();
}
}

7

Mathias,
you have default values in your dropdowns that are empty initially. What this means is that the filter you construct ends up saying to dataset something along these lines: “find me all items in database where groupset is empty”, which does not match any items given your database contents.
To fix, you should conditionally add these filters if value is not empty, otherwise skip filter for this field:

if (groupsetChoice) {
  newChoises.eq("groupset", groupsetChoise)
}
8

awesome! thanks so much

9

hi quick update:
i tried the “conditional add” approach but unsuccessful.
I also tried to include a “catch-all” conditions if no bike class or brake type is selected, still after first click on filter, it returns empty result list.
I feel it has to do with the $w.onReady call, could it be that the call does not initiate the filters properly?
thanks again, I am struggling… :frowning:
below the code for the relevant parts

import wixData from ‘wix-data’;

//SETUP FILTERS

function applyFilter() {

const aeroChoice = $w(“#aeroiconRed2”).isVisible
const allroundChoice = $w(‘#allroundIconRed2’).isVisible
const marathonChoice = $w(‘#marathonIconRed2’).isVisible
const triaChoice = $w(‘#triIconRed2’).isVisible
const gravelChoice = $w(‘#graveliconRed2’).isVisible
const priceLimit = $w(‘#pricelimit’).value
const rimChoice = $w(‘#brakeIconRed2’).isVisible
const discChoice = $w(‘#discIconRed2’).isVisible
const groupsetChoice = $w(‘#groupset’).value
const brandChoice = $w(‘#brandchoice’).value

const newChoices = wixData.filter()
.eq(“aero”, aeroChoice)
.eq(“allround”, allroundChoice)
.eq(“marathon”, marathonChoice)
.eq(“tri”, triaChoice)
.eq(“gravel”, gravelChoice)
.le(“sell_price”, priceLimit)
.eq(“rimBrake”, rimChoice)
.eq(“discBrake”, discChoice)
.eq(“groupset”, groupsetChoice)
.eq(“brand”, brandChoice)
if (aeroChoice=== false , allroundChoice=== false ,marathonChoice=== false ,triaChoice=== false , gravelChoice=== false ){
const allClassChoice = true ;
newChoices.eq(“allClasses”, allClassChoice);
}
if (rimChoice=== false , discChoice=== false ){
const allBrakeChoice = true ;
newChoices.eq(“allBrakes”, allBrakeChoice)
}

$w(‘#datasetDeals’).setFilter(newChoices)

}

$w.onReady(() => {
$w(‘#hoverboxAero’).onClick(applyFilter)
$w(‘#hoverboxAllround’).onClick(applyFilter)
$w(‘#hoverboxMarathon’).onClick(applyFilter)
$w(‘#hoverboxTri’).onClick(applyFilter)
$w(‘#hoverboxGravel’).onClick(applyFilter)
$w(‘#pricelimit’).onChange(applyFilter)
$w(‘#hoverboxBrake’).onClick(applyFilter)
$w(‘#hoverboxDisc’).onClick(applyFilter)
$w(‘#groupset’).onChange(applyFilter)
$w(‘#brandchoice’).onChange(applyFilter)

});

10

SHORT UPDATE: I found the error:

I found the error now! I used isVisible to check whether a clickable filter icon was onShow or not…
That seems to not work, show does apparently not set isVisible on true, but it does set hidden on false.
So I turned it around, and now it works!

for those of you interested, here the code:

import wixData from ‘wix-data’;

$w.onReady(() => {
$w(‘#datasetDeals’).onReady(() => {

    $w('#hoverboxAero, #hoverboxAllround, #hoverboxMarathon, #hoverboxTri, #hoverboxGravel,  #hoverboxBrake, #hoverboxDisc').onClick(() => { 
            applyFilter(); 
    }); 
    $w('#pricelimit, #groupset, #brandchoice').onChange(() => { 
            applyFilter(); 
    }); 

});

});
//SETUP FILTERS

function applyFilter() {

let aeroChoice = $w(“#aeroiconRed2”).hidden
let allroundChoice = $w(‘#allroundIconRed2’).hidden
let marathonChoice = $w(‘#marathonIconRed2’).hidden
let triaChoice = $w(‘#triIconRed2’).hidden
let gravelChoice = $w(‘#graveliconRed2’).hidden

let priceLimit = $w(‘#pricelimit’).value
let rimChoice = $w(‘#brakeIconRed2’).hidden
let discChoice = $w(‘#discIconRed2’).hidden
let groupsetChoice = $w(‘#groupset’).value
let brandChoice = $w(‘#brandchoice’).value
let allClassChoice = true ;
let allBrakeChoice = true ;

let newChoices = wixData.filter();
if (!aeroChoice) {
newChoices = newChoices.eq(“aero”, !aeroChoice)
}
if (!allroundChoice) {
newChoices = newChoices.eq(“allround”, !allroundChoice)
}
if (!marathonChoice) {
newChoices = newChoices.eq(“marathon”, !marathonChoice)
}
if (!triaChoice) {
newChoices = newChoices.eq(“triathlon”, !triaChoice)
}
if (!gravelChoice) {
newChoices = newChoices.eq(“gravel”, !gravelChoice)
}
if (priceLimit) {
newChoices = newChoices.le(“sell_price”, priceLimit)
}
if (!rimChoice) {
newChoices = newChoices.eq(“rimBrake”, !rimChoice)
}
if (!discChoice) {
newChoices = newChoices.eq(“discBrake”, !discChoice)
}
if (!groupsetChoice) {
newChoices = newChoices.eq(“groupset”, groupsetChoice)
}
if (!brandChoice) {
newChoices = newChoices.eq(“brand”, brandChoice)
}
if (aeroChoice, allroundChoice,marathonChoice,triaChoice, gravelChoice) {
newChoices = newChoices.eq(“allClasses”, allClassChoice)
}
if (rimChoice, discChoice) {
newChoices = newChoices.eq(“allBrakes”, allBrakeChoice)
}

$w(‘#datasetDeals’).setFilter(newChoices)

}

11

only remaining issue now is that I can not select multiple “checked” icons - it returns an empty list when choosing, e,g, aero bikes and marathon bikes…

Any hints on how to solve that? I tried the following, but not successful yet

$w.onReady(() => {
    $w('#datasetDeals').onReady(() => {

        $w('#hoverboxAero, #hoverboxAllround, #hoverboxMarathon, #hoverboxTri, #hoverboxGravel,  #hoverboxBrake, #hoverboxDisc').onClick(() => {
                applyFilter();
        });
        $w('#pricelimit, #groupset, #brandchoice').onChange(() => {
                applyFilter();
        });
 
    });
});
//SETUP FILTERS

function applyFilter() {
 
 let aeroChoice =  $w("#aeroiconRed2").hidden
 let allroundChoice = $w('#allroundIconRed2').hidden
 let marathonChoice = $w('#marathonIconRed2').hidden
 let triaChoice = $w('#triIconRed2').hidden
 let gravelChoice = $w('#graveliconRed2').hidden

 let priceLimit = $w('#pricelimit').value
 let rimChoice = $w('#brakeIconRed2').hidden
 let discChoice = $w('#discIconRed2').hidden
 let groupsetChoice = $w('#groupset').value
 let brandChoice = $w('#brandchoice').value
 let allClassChoice = true;
 let allBrakeChoice = true;
 

 let newChoices = wixData.filter();
 newChoices = newChoices.le("sell_price", priceLimit)
 newChoices = newChoices.eq("aero", !aeroChoice)
        .or (newChoices.eq("allround", !allroundChoice))
        .or (newChoices.eq("marathon", !marathonChoice))
        .or (newChoices.eq("tri", !triaChoice))
        .or (newChoices.eq("gravel", !gravelChoice))
 if (aeroChoice, allroundChoice,marathonChoice,triaChoice, gravelChoice) {
     newChoices = newChoices.eq("allClasses", allClassChoice)
 }
 
 newChoices = newChoices.eq("rimBrake", !rimChoice)
        .or (newChoices.eq("discBrake", !discChoice))
 if (rimChoice, discChoice) {
     newChoices = newChoices.eq("allBrakes", allBrakeChoice)
 }

if (groupsetChoice) {
     newChoices = newChoices.eq("groupset", groupsetChoice)
 }
if (!groupsetChoice) {
     newChoices = newChoices.eq("allGroups", true)
 }

if (brandChoice) {
     newChoices = newChoices.eq("brand", brandChoice)
 } 
if (!brandChoice) {
     newChoices = newChoices.eq("allBrands", true)
 }

if (rimChoice, discChoice) {
     newChoices = newChoices.eq("allBrakes", allBrakeChoice)
 }

$w('#datasetDeals').setFilter(newChoices)

}
12

Mathias,
I’ll propose to change your code a bit. But first, let’s clarify what is your intention - let me know if my assumption is wrong. I assume that if user selects Aero and Marathon options, site should display all bikes that have either aero: true or marathon: true. I also assume that if user does not select Gravel option, site should display all bikes with gravel: true or gravel: false. The code you currently have is working a bit different - if user has selected Aero and Marathon, resulting query is attempting to load bikes that have aero: true AND marathon: true AND …otherOptions: false.

It’s rather simple case, but it gets a bit tricky once you delve into details, so I’ll explain the code bit by bit. Let’s start with listing all icons that should be joined by OR conditions. I’ll use a plain object that describes field that should be filtered and element selector:

const typeChoises = [
  { field: "aero", element: "#aeroiconRed2" },
  { field: "allround", element: "#allroundIconRed2" },
  { field: "marathon", element: "#marathonIconRed2" },
  { field: "tri", element: "#triIconRed2" },
  { field: "gravel", element: "#graveliconRed2" }
]

Now we will discard all options that are not explicitly selected by the user. .filter() is a standard Javascript array method that removes all elements from array which do not match given predicate:

const selectedOptions = typeChoises.filter(choiceDescriptor => {
 const optionSelected = !$w(choiceDescriptor.element).hidden
 return optionSelected;
})

Now we need to apply all selected options to a wixData filter. The tricky part is distinguish between first selected option and the rest, because first option needs to be added to filter in regular manner and all subsequent options must be added as .or() conditions. For that, I will use standard Javascript array method .reduce(), which will take an array of selected options and will return a single filter containing all conditions:

const allClassesFilter = selectedOptions.reduce((allClassesFilter, choiceDescriptor, index) => {
 return index === 0
 ? allClassesFilter.eq(choiceDescriptor.field, true)
 : allClassesFilter.or(wixData.filter().eq(choiceDescriptor.field, true));
  }, wixData.filter())

Now that we have a filter for all classes of bikes, we can add it to our main filter:

newChoises = newChoises.and(allClassesFilter)

I hope this helps. Good luck!

13

awesome thanks so much!

14

I only understood half of it, but it freaking works! Genius!! thanks so much

15

Hi, just a short question: how would I add now additional (boolean) filters to this setup?
my page has besides bike classes, also brake type (rim/disc), shifter (electric/mechanic) and the brands.
it is for now in a collapsed filter area.

1368×1366 178 KB

but when extending the choices variables does not seem to work…
any idea, why it is not filtering the other boolean filters (I updated the collection database with new filters for each field)?

const typeChoices = [
        { field: "aero", element: "#aeroiconRed2" },
        { field: "allround", element: "#allroundIconRed2" },
        { field: "marathon", element: "#marathonIconRed2" },
        { field: "tri", element: "#triIconRed2" },
        { field: "gravel", element: "#graveliconRed2" },
        { field: "rimBrake", element: "#brakeIconRed2" },
        { field: "discBrake", element: "#discIconRed2"},
        { field: "rimBrake", element: "#brakeIconRed2" },
        { field: "discBrake", element: "#discIconRed2"},
        { field: "electricShifter", element: "#electricIconRed2"},
        { field: "mechanicShifter", element: "#mechanicIconRed2"},
        { field: "argon18", element: "#argon18IconRed2"},
        { field: "bianchi", element: "#bianchiIconRed2"},
        { field: "bmc", element: "#bmcIconRed2"},
        { field: "cannondale", element: "#cannondaleIconRed2"},
        { field: "canyon", element: "#canyonIconRed2"},
        { field: "cervelo", element: "#cerveloIconRed2"},
        { field: "cubeBikes", element: "#cubeIconRed2"},
        { field: "felt", element: "#feltIconRed2"},
        { field: "focus", element: "#focusIconRed2"},
        { field: "fuji", element: "#fujiIconRed2"},
        { field: "giant", element: "#giantIconRed2"},
        { field: "look", element: "#lookIconRed2"},
        { field: "merida", element: "#meridaIconRed2"},
        { field: "orbea", element: "#orbeaIconRed2"},
        { field: "pinarello", element: "#pinarelloIconRed2"},
        { field: "rose", element: "#roseIconRed2"},
        { field: "scott", element: "#scottIconRed2"},
        { field: "specialized", element: "#specializedIconRed2"},
        { field: "storck", element: "#storckIconRed2"},
        { field: "trek", element: "#trekIconRed2"}
 
    ];
16

@egidijus-jucevicius if you help me out again on this, you get a special mention on the website after launch!! :slight_smile:

17

https://www.biciondo.com/top-deals
thats the page
(might be password protected: biciondo123

18

Hi Mathias,

the current code does one thing - it takes a group of related icons and applies filter an OR condition between them. So, if user selects Aero and Marathon, you get all bikes that are either Aero or Marathon. If you add more choices unrelated to bike category, you are effectively increasing the chance by which a bike can match a given query. In other words, if user selects Electric shifter on top of Aero and Marathon selections, site shows all bikes that are either Aero or Marathon or have electric shifter.

To fix it, let’s create a function that will transform a group of related icons into a filter in such way that it can work with any group. It’s purpose is the same as we had before, but now it does not assume what kind of options there are and where to put this filter. It simply constructs the filter based on selections and returns it:

function createFilterGroup(allOptions) {

 const selectedOptions = allOptions.filter(choiceDescriptor => {
 const optionSelected = !$w(choiceDescriptor.element).hidden
 return optionSelected;
    })

 const filter = selectedOptions.reduce((filter, choiceDescriptor, index) => {
 return index === 0 ?
            filter.eq(choiceDescriptor.field, true) :
            filter.or(wixData.filter().eq(choiceDescriptor.field, true));
    }, wixData.filter());

 return filter;
}

Next, let’s define some groups:

const categories = [
        { field: "aero", element: "#aeroiconRed2" },
        { field: "allround", element: "#allroundIconRed2" },
        ...
    ]

 const brakes = [
        { field: "rimBrake", element: "#brakeIconRed2" },
        { field: "discBrake", element: "#discIconRed2"},
        ...
    ]

 const shifters = [
       ...
    ]

 const brands = [
        ...
    ]

Finally, we need to convert each group into a filter by using the function we created before and add them to main filter:

let newChoices = wixData.filter();
newChoices = newChoices
        .and(createFilterGroup(categories))
        .and(createFilterGroup(brakes))
        .and(createFilterGroup(shifters))
        .and(createFilterGroup(brands))

Full code for convenience:

function createFilterGroup(allOptions) {

 const selectedOptions = allOptions.filter(choiceDescriptor => {
 const optionSelected = !$w(choiceDescriptor.element).hidden
 return optionSelected;
    })

 const filter = selectedOptions.reduce((filter, choiceDescriptor, index) => {
 return index === 0 ?
            filter.eq(choiceDescriptor.field, true) :
            filter.or(wixData.filter().eq(choiceDescriptor.field, true));
    }, wixData.filter());

 return filter;
}

function applyFilter() {

 const categories = [
        { field: "aero", element: "#aeroiconRed2" },
        { field: "allround", element: "#allroundIconRed2" },
        { field: "marathon", element: "#marathonIconRed2" },
        { field: "tri", element: "#triIconRed2" },
        { field: "gravel", element: "#graveliconRed2" }
    ]

 const brakes = [
        { field: "rimBrake", element: "#brakeIconRed2" },
        { field: "discBrake", element: "#discIconRed2"},
        { field: "rimBrake", element: "#brakeIconRed2" },
        { field: "discBrake", element: "#discIconRed2"},
    ]

 const shifters = [
        { field: "electricShifter", element: "#electricIconRed2"},
        { field: "mechanicShifter", element: "#mechanicIconRed2"},
    ]

 const brands = [
        { field: "argon18", element: "#argon18IconRed2"},
        { field: "bianchi", element: "#bianchiIconRed2"},
        { field: "bmc", element: "#bmcIconRed2"},
        { field: "cannondale", element: "#cannondaleIconRed2"},
        { field: "canyon", element: "#canyonIconRed2"},
        { field: "cervelo", element: "#cerveloIconRed2"},
        { field: "cubeBikes", element: "#cubeIconRed2"},
        { field: "felt", element: "#feltIconRed2"},
        { field: "focus", element: "#focusIconRed2"},
        { field: "fuji", element: "#fujiIconRed2"},
        { field: "giant", element: "#giantIconRed2"},
        { field: "look", element: "#lookIconRed2"},
        { field: "merida", element: "#meridaIconRed2"},
        { field: "orbea", element: "#orbeaIconRed2"},
        { field: "pinarello", element: "#pinarelloIconRed2"},
        { field: "rose", element: "#roseIconRed2"},
        { field: "scott", element: "#scottIconRed2"},
        { field: "specialized", element: "#specializedIconRed2"},
        { field: "storck", element: "#storckIconRed2"},
        { field: "trek", element: "#trekIconRed2"}
    ]

 let newChoices = wixData.filter();

    newChoices = newChoices
        .and(createFilterGroup(categories))
        .and(createFilterGroup(brakes))
        .and(createFilterGroup(shifters))
        .and(createFilterGroup(brands))

    $w('#datasetDeals').setFilter(newChoices)

}

Hope this helps! If it does, skip the personal mention though, I’m just doing my job :slight_smile: Better yet, mention Wix Code that lets the magic happen!

P.S Make sure to change site password.

19

awesome!!! it all works smoothly now! @egidijus-jucevicius THANKS SO MUCH !!! BEST WIX CODE MODERATOR !!

20

@egidijus-jucevicius :
on which part of the code would I now add the price filter?
Normally, I would create another filtergroup, but not sure if this one works the same way as the
pricelimit_change(event) is based on value not boolean as the rest…

Any ideas?
thanks again!!!