Hello everbody,
I have created a dynamic page with a dropdown filter (TAGS) function in WIX. I have a more complex idea and although I offer financial products in different languages, videos are shown, but the products are not offered in all countries. My wish is that when new customers register, I want each customer to choose their country and language. So that the matching videos are filtered and saved for this customer forever.
An example:
Country 1 (Germany only) = Language = Product A
Country 1 (Germany only) = Language = Product B
Country 1 (Germany only) = Language = Product C
Country 1 (Germany only) = Language = Product D
Country 2 (Europe) = Language = Product A
Country 3 (Asia and Africa) = Language = Product E
How can I do that?
I have to say I’m very new to coding and I’ve taught myself that I don’t know how to put that together.
I think it has to be an if function.
The code, because I am currently using it works flawlessly, only I want a different functionality as described above.
Because I looked at code from a YouTube video, it helped me a lot.
I hope you can help me with that. I thank you in advance.
PAGE - CODE
import { local } from 'wix-storage';
import wixData from 'wix-data';
import wixUsers from 'wix-users';
import { produktLocation, produktSprache, deutschlandProdukte, österreichProdukte, schweizProdukte, belgienProdukte, frankreichProdukte, niederlandeProdukte, schwedenProdukte, dänemarkProdukte, türkeiProdukte } from 'public/product.js';
//Search function
export function button2_click(event, $w) { //Button onClick event
$w('#image11').show();
$w('#image10').show();
waitForLoading();
function waitForLoading() {
setTimeout(() => {
$w('#image11').hide('FadeOut');
$w('#image10').hide('FadeOut');
}, 1500);
}
$w("#dataset1").setFilter(wixData.filter() //Set dataset to filter
.contains("land", $w("#produktLocation").value) //location field key and dropdown
.contains("title", $w("#Produkt").value) //Restaurant field key and dropdown
.contains("sprache", $w("#produktSprache").value)) //Cuisine field key and dropdown
.then((results) => {
console.log("Dataset is filtered");
$w("#repeater1").data = results.item; //Repeater ID
})
.catch((err) => {
console.log(err)
});
$w("#repeater1").expand; //Repeater expands after filter
}
//Conditional Dropdown
$w.onReady(function () {
$w('#produktLocation').options = produktLocation;
$w('#produktLocation').placeholder = 'All locations';
$w('#produktLocation').onChange(() => {
let location = $w("#produktLocation").value
$w("#dataset1").setFilter(wixData.filter()
.eq('location', location))
if ($w('#produktLocation').value === 'Deutschland') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = deutschlandProdukte;
$w('#Produkt').placeholder = 'alle';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Türkei') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-E';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Österreich') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-A';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Schweiz') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-A';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Belgien') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-A';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Frankreich') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-A';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Niederlande') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-A';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Schweden') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-A';
$w('#Produkt').enable();
$w('#produktSprache').enable();
} else if ($w('#produktLocation').value === 'Dänemark') {
$w('#produktSprache').options = produktSprache;
$w('#produktSprache').placeholder = '-';
$w('#Produkt').options = türkeiProdukte;
$w('#Produkt').placeholder = 'Product-A';
$w('#Produkt').enable();
$w('#produktSprache').enable();
}
});
});
BACKEND - CODE
//Location Droopdown Options
export const produktLocation = [
{ value: "", label: "Select Location" },
{ value: "Deutschland", label: "Deutschland" },
{ value: "Österreich", label: "Österreich" },
{ value: "Schweiz", label: "Schweiz" },
{ value: "Belgien", label: "Belgien" },
{ value: "Frankreich", label: "Frankreich" },
{ value: "Niederlande", label: "Niederlande" },
{ value: "Schweden", label: "Schweden" },
{ value: "Dänemark", label: "Dänemark" },
{ value: "Türkei", label: "Türkei" },
];
//Sprache Dropdown Options
export const produktSprache = [
{ value: "deutsch", label: "deutsch" },
{ value: "türkce", label: "türkce" }
]
//Produkt Dropdown Options (Deutschland)
export const deutschlandProdukte = [
{value: "product-a", label: "Prduct-A" },
{value: "product-b", label: "Product-B" },
{value: "product-c", label: "Product-C"},
{value: "product-d", label: "Product-D"},
]
//Produkt Dropdown Option (Österreich)
export const österreichProdukte = [
{value: "prudct-a", label: "Product-A" },
]
//Produkt Dropdown Option (Schweiz)
export const schweizProdukte = [
{value: "product-a", label: "Product-A" },
]
//Produkt Dropdown Option (Belgien)
export const belgienProdukte = [
{value: "product-a", label: "Product-A" },
]
//Produkt Dropdown Option (Frankreich)
export const frankreichProdukte = [
{value: "product-a", label: "Product-A" },
]
//Produkt Dropdown Option (Niederlande)
export const niederlandeProdukte = [
{value: "product-a", label: "Product-A" },
]
//Produkt Dropdown Option (Schweden)
export const schwedenProdukte = [
{value: "product-a", label: "Product-A" },
]
//Produkt Dropdown Option (Dänemark)
export const dänemarkProdukte = [
{value: "product-a", label: "Product-A" },
]
//Produkt Dropdown Option (Türkei)
export const türkeiProdukte = [
{value: "product-e", label: "Product-E" },
]