Hide Repeater till Filter is selected

Ask the community
,
1

Hi,
I’ve set up a dataset with 3 filters for a vehicle lookup (year, make, model) which are chosen by dropdown menus. Everything is pulling correctly but I’d like for the repeater with filtered content to only show once that last dropdown filter is selected. Can anyone help me with where to start with that code?
Also- is there a way to disable the dropdown values for make and model until year is selected? Same for model until make is selected?

Thanks

2

First set your desired dropdowns to be disabled on load via the properties panel of each one.

You can do the same for the repeater (hidden on load or collapsed on load).

You can add some code for onChange event on each corresponding dropdown, so that when the dropdown changes it will enable the next dropdown.

Assuming you have a working filter code, simply add an extra line of code to show or expand the repeater after the filter function is completed.

I have a tutorial video about conditional filtering dropdowns. This only shows how to filter one dropdown based on the previous selection. It also shows how to enable the next dropdown. It does not show, unfortunately, how to filter results based on dropdown selections.

Link: Conditional Filtering for Dropdowns on Wix | Corvid Tutorial - YouTube

3

Hey Code Queen,
I followed your tutorial but I’m not getting anything to work. The dropdown isn’t populating anything for me. Here’s my code:

import wixData from 'wix-data';

$w.onReady(function () {
yeardropdown_change()()();
});
function yeardropdown_change (){
wixData.query("EX.VEHICLELOOKUP")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#yeardropdown").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.year);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function genre_change(event, $w) {
makedropdown_change()();
$w("#makedropdown").enable();
}

function makedropdown_change (){
wixData.query("EX.VEHICLELOOKUP")
.contains("year", $w("#yeardropdown").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#makedropdown").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.make);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function subcategory_change(event, $w) {
modeldropdown_change();
$w("#modeldropdown").enable();
}

function modeldropdown_change (){
wixData.query("EX.VEHICLELOOKUP")
.contains("make", $w("#makedropdown").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#modeldropdown").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.title);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
4

@hannah94051 Please follow the the community guidelines and post your code, nicely formatted, in a code block.