Hi Caroline, Great work, Unfortunately, I have over 600 variants that all require a different price for one product. Since Wix stores only allows 325 variants it wouldn’t work for me. I was able to use a cascading form drop down code in combination with the search code you have above. I am listing it hear for anyone else looking for a solution to a double drop down user input.
This code is using a collection where we use the first drop down to search the field in the collection to determine what the second drop down can show. Then use the second drop down to search for a specific field and show the result in the table.
import wixData from ‘wix-data’;
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query(“collection”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#dropdown1”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.fieldl);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function country_change(event) {
uniqueDropDown2();
$w(“#dopdown2”).enable();
}
function uniqueDropDown2 (){
wixData.query(“collection”)
.contains(“country”, $w(“#dropdown1”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#dropdown2”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.field);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function delivery_change(event) {
$w(“#resulttable”).show();
// Runs a query on the “collection” collection
wixData.query(‘collection’)
// Query the collection for any items whose “search field” field contains
// the value the user selected in the dropdown
.contains(‘spreed’, $w(‘#delivery’).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(‘#resulttable’).rows = res.items;
});
}
$w.onReady( function () {
$w(“#resulttable”).columns = [
{
“id”: “col1”, // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “ResultField”,
“label”: “Amount”, // The column header
“width”: 100, // Column width
“visible”: true , // Column visibility
“type”: “string”, // Data type for the column
// Path for the column if it contains a link
“linkPath”: “link-field-or-property”
}
]}
);