Filter dataset with 2 dropdown menu

Ask the community
,
1

Hello Wix Community,

I’ve been working on this for the past few days and I’m having a tiny issue (well 2 tiny issues) with my code.

My goal is to have the following:

  1. The user chooses the Skin tone from the first dropdown.

  2. The user chooses the Scrub (clothes) color from the second dropdown.

  3. The dataset is filtered with both dropdown selections.

  4. The repeater (linked to the dataset) currently “.collapse”, expands.

Issue #1
My first dropdown does filter the repeater (under the Body section in the image below).
However, when I select from my second dropdown, the repeater filters only with the data from the second dropdown. It ignores the data from the first dropdown menu.

Is there a way for both dropdown menus to filter the repeater?

Issue #2
Also, as you will see in my code below, I want the Body section to be “.collapse” at the beginning and to only “.expand” when the user selected an option in both dropdown menus. I found where to put the “.collapse” at the beginning of the code (its currently commented out) but I can’t find the proper location to put the “.expand”.

Any help would be greatly appreciated.

Screenshot

750×354 80.7 KB

Code

import wixData from “wix-data” ;

const collectionName = “nurses-colours” ;
const fieldToFilterByInCollection = ‘tags’ ;
//$w(“#ContainerScrubColour”).collapse();

$w.onReady( function () {

setRepeatedItemsInRepeater() 
loadDataToRepeater() 

$w( '#DropdownSkinColourSelect' ).onChange((event) => {

let selectedTags = $w( ‘#DropdownSkinColourSelect’ ).value
loadDataToRepeater(selectedTags)
})

$w( '#DropdownScrubColourSelect' ).onChange((event) => {

let selectedTags = $w( ‘#DropdownScrubColourSelect’ ).value
loadDataToRepeater(selectedTags)
})

});

function loadDataToRepeater(selectedCategories = ) {

let dataQuery = wixData.query(collectionName)

if (selectedCategories.length > 0 ) {
dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories)
}

dataQuery 
    .find() 
    .then(results => {

const itemsReadyForRepeater = results.items
$w( ‘#RepeaterColour’ ).data = itemsReadyForRepeater;

    })

}

function setRepeatedItemsInRepeater() {
$w( ‘#RepeaterColour’ ).onItemReady(($item, itemData) => {

    $item( '#image-sample' ).src = itemData.image; 

})

}