Hello Guys! I followed this tutorial and “Example: Search a Database. ( https://goo.gl/Qv2N3U )”
Thank you Yisrael for making these tutorials, I’m very grateful!
I have zero experience in coding, and I tried to follow each step as much as I could.
Now I’m facing 2 problems, and I hope someone could help me… T-T
Thanks in advance!
My website is for tourists to hire a local guide in Japan. I’d like the tourists to select “region” from the dropdown(Problem A), and choose any types of the tours they want from the Dropdown checkbox menu(Problem B).
(Problem A)
Every region I selected it would appear (I use “Kansai” as example), except for “Kanto.”
(Problem B)
Whichever type of tours I selected, the whole repeater of the tours disappeared.
What I’m trying to achieve here is: each tour has more than 1 type (ex: Tour X - Food, Scenery, Temple ; Tour Y - Food, Temple, Electronic goods, Shopping Center), and since the tutorial has only 1 type of “continent,” I figure my codes can’t be right.
＊Video demonstrate for (Problem B): https://youtu.be/ukIHLmJ9jds
＊My Website URL: https://bonyotaiwan.wixsite.com/bonyojapan/tours
＊The code I’m using:
import wixData from "wix-data";
$w.onReady(() => {
loadRegion();
});
let lastFilterTitle;
let lastFilterRegiontext;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#iTitle').value, lastFilterRegiontext);
}, 500);
}
export function iContinent_change(event) {
filter(lastFilterTitle, $w('#iContinent').value);
}
function filter(title, regiontext) {
if (lastFilterTitle !== title || lastFilterRegiontext !== regiontext) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('articleTitle', title);
if (regiontext)
newFilter = newFilter.contains('regiontext', regiontext);
$w('#dataset1').setFilter(newFilter);
lastFilterTitle = title;
lastFilterRegiontext = regiontext;
}
}
function loadRegion() {
wixData.query('Region')
.find()
.then(res => {
let options = [{"value": '', "label": '全部地區'}];
options.push(...res.items.map(regiontext => {
return {"value": regiontext.title, "label": regiontext.title};
}));
$w('#iContinent').options = options;
});
}
// Multiple checkbox
const containsAll = (arr1, arr2) =>
arr2.every(arr2Item => arr1.includes(arr2Item))
const sameMembers = (arr1, arr2) =>
containsAll(arr1, arr2) && containsAll(arr2, arr1);
const compareArrays = (arr1, arr2) => {
if (!Array.isArray(arr1) || !Array.isArray(arr2) || (arr1.length !== arr2.length) )
return false;
return sameMembers(arr1, arr2);
}
let lastFilterRecommendation = [];
$w.onReady(() => {
$w("#tags").onItemReady(($item, itemData, index) => {
const text1 = $item("#optionText");
text1.text = itemData.value;
});
loadRecommendation();
});
function loadRecommendation() {
wixData.query('Recommendation')
.find()
.then(res => {
$w("#tags").data = [];
$w("#tags").collapse();
let options = [];
let id = 0;
options.push(...res.items.map(tag => {
return { "_id": "" + ++id, "value": tag.title, "label": tag.title };
}));
$w('#tags').data = options;
});
}
export function tagBox_click(event) {
if ($w('#tags').collapsed === true) {
$w("#tags").expand();
} else {
$w("#tags").collapse();
let arrRecommendation = [];
$w("#tags").forEachItem(($item, itemData, index) => {
if ($item('#optionCheckbox').checked) {
let text = $item("#optionText").text;
arrRecommendation.push(text);
}
});
new_filter(lastFilterTitle, arrRecommendation);
$w('#numTagText').text = "已選擇" + arrRecommendation.length + "個" ;
}
}
function new_filter(title, recommendation) {
let res = compareArrays(recommendation, lastFilterRecommendation);
if (lastFilterTitle !== title || !res) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('title', title);
newFilter = newFilter.hasSome('tag', recommendation);
$w('#dataset1').setFilter(newFilter).then(function () {
let count = $w("#dataset1").getTotalCount();
});
lastFilterTitle = title;
lastFilterRecommendation = recommendation;
}
}
