Question:
How do I connect my Wix Pro Gallery to the cascading form I built?
Product:
Wix Editor
What are you trying to achieve:
I am very new to this and it’s my first time ever coding.
I want to connect the cascading form I made to my Wix Pro Gallery so that it filters the gallery when I click Search.
What have you already tried:
I made the cascading form to be able to search my gallery by categories. I wanted the Dropdown 2’s choices to change based on what is selected in Dropdown 1. I finally achieved this by using this:
The dropdown code works to filter the second dropdown, however when I click search it has no effect on my gallery. This is a picture of my databases:
The code uses the Title from the Type database for the first dropdown and then shows the titles for the Medium database based on the Type selected. This is the current code I have:
import wixData from ‘wix-data’;
$w.onReady(function () {
initPage();
});
async function initPage() {
const countryStates = {};
wixData.query('Types')
.ascending('title')
.find()
.then(results => {
const CountryOptions = results.items.map(country => ({ label: country.title, value: country._id }));
$w('#dropdown3').options = CountryOptions;
});
$w('#dropdown3').onChange(async() => {
let hasStates = false;
const selectedCountry = $w('#dropdown3').value;
if (countryStates[selectedCountry]) {
hasStates = true;
$w('#dropdown4').options = countryStates[selectedCountry];
} else {
const results = await wixData.query('Mediums')
.eq('type', selectedCountry)
.ascending('title')
.find()
if (results.length > 0) {
hasStates = true;
const stateOptions = results.items.map(state => ({ label: state.title, value: state._id }));
$w('#dropdown4').options = stateOptions;
countryStates[selectedCountry] = stateOptions;
}
}
if (hasStates) {
$w('#dropdown4').selectedIndex = undefined;
$w('#dropdown4').expand();
$w('#button6').disable();
} else {
$w('#dropdown4').collapse();
$w('#button6').enable();
}
});
$w('#dropdown4').onChange(() => {
$w('#button6').enable();
});
}
Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]
So I’m wondering what I need to add to the code to get it search my gallery.
I’m also wondering if I just need to add something to one of my databases or something like that.
Side Notes: It’s also important that the gallery stays in the order I have it in the FineArtwork collection like #1 being displayed at the top.
I’ll attatch screenshots of my collections in case that will be helpful, but it won’t let me have more than one image on this post.
