Hello everyone,
I am creating a blog about food. On the ‘articles’ page I have a repeater and 2 Filters. One text input filter for the title and one dropdown menu to search on category. Until here it works fine.
I wanted the blog in two languages. But i know that that is not possible with databases and repeaters. So I found a workaround:
When the site is in english it displays the english title on the repeater and the 2 english filters. (dropdown and text input)
When the site is in dutch it displays the dutch title and the 2 dutch filters.
My problem is that i am not able to let the 2 english filters work together for the English title and Category and the Dutch filters work together for the dutch title and Category. But the english and Dutch filters have to be SEPERATE. I don’t want them to work togheter.
I tried this and the dutch work fine, but the english filters are not searching for the english title and Category, but also the dutch. In the code everything looks fine it think.
import wixData from 'wix-data';
import wixWindow from 'wix-window';
$w.onReady(() => {
wixData.query('Categorie')
.find()
.then(res => {
let options = [{"value": '', 'label': 'Allemaal'}];
options.push(...res.items.map(status => {
return {'value': status.title, 'label': status.title}
}));
$w('#dropdown1').options = options
})
});
$w.onReady(() => {
wixData.query('categorieEN')
.find()
.then(res => {
let options = [{"value": '', 'label': 'All'}];
options.push(...res.items.map(status => {
return {'value': status.title, 'label': status.title}
}));
$w('#dropdown2').options = options
})
});
let lastFilterTitle;
let lastFilterCategorie;
let debounceTimer;
export function input6_keyPress(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#input6').value, lastFilterCategorie);
}, 200);
}
let lastFilterTitleEN;
let lastFilterCategorieEN;
let debounceTimerEN;
export function input7_keyPress(event) {
if (debounceTimerEN) {
clearTimeout(debounceTimerEN);
debounceTimerEN = undefined;
}
debounceTimerEN = setTimeout(() => {
filter($w('#input7').value, lastFilterCategorieEN);
}, 200);
}
function filter (title, categorie) {
if (lastFilterTitle !== title || lastFilterCategorie !== categorie) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('title', title);
if (categorie)
newFilter = newFilter.eq('categorie', categorie)
$w('#dataset1').setFilter(newFilter);
lastFilterTitle = title;
lastFilterCategorie = categorie;
}
}
function filterEN (titleEN, categorieEN) {
if (lastFilterTitleEN !== titleEN || lastFilterCategorieEN !== categorieEN) {
let newFilterEN = wixData.filter();
if (titleEN)
newFilterEN = newFilterEN.contains('titleEn', titleEN);
if (categorieEN)
newFilterEN = newFilterEN.eq('categorieEn', categorieEN)
$w('#dataset1').setFilter(newFilterEN);
lastFilterTitleEN = titleEN;
lastFilterCategorieEN = categorieEN;
}
}
export function dropdown1_change(event, $w) {
filter(lastFilterTitle, $w('#dropdown1').value)
}
export function dropdown2_change(event, $w) {
filter(lastFilterTitleEN, $w('#dropdown2').value)
}
$w.onReady(function () {
let language = wixWindow.multilingual.currentLanguage;
if (language === 'en') {
$w('#input7').show();
$w('#dropdown2').show();
$w('#text29').show();
$w('#input6').hide();
$w('#dropdown1').hide();
$w('#text12').hide();
} else {
$w('#input7').collapse();
$w('#dropdown2').collapse();
$w('#text29').collapse();
$w('#input6').expand();
$w('#dropdown1').expand();
$w('#text12').expand();
}
});
input 7 = English text input filter
dropdown 2 = English dropdown filter
text29 = English title ON repeater
input6 = Dutch text input filter
dropdown 1 = Dutch dropdown filter
text 12 =Dutch title ON repeater
I really hope someone can help me with this.
Thanks in advance
Léon Missoul
