I’m building a progress tracking page in my Wix site, where a logged-in member can see which pages (“stations”) they have visited. The idea is:
- Progress is shown in text: “You’ve visited X out of 9 stations.”
- A progress bar visually reflects the progress.
- A checkmark (
) appears next to each button that links to a visited page.
The progress is stored in a collection called voortgangmedewerker
, which tracks for each member whether they’ve visited a specific page (via boolean fields).
What I’ve already done:
- I’m using
wix-members
andwix-data
to identify the logged-in member and fetch their progress. - Each of the 9 pages has a corresponding field in the collection, like:
paginaHome
paginaVideo
- …and so on.
- On the progress page, I’ve added:
- Buttons like
#btnHome
,#btnVideo
, etc. - Checkmarks like
#checkHome
,#checkVideo
, etc.
- Buttons like
- All checkmark images are placed on the page and set to “hidden on load.”
- A progress bar (
#progressBar
) is present on the page.
Current code on the progress page:
import { currentMember } from ‘wix-members’;
import wixData from ‘wix-data’;
$w.onReady(async function () {
// Hide checkmarks initially
$w(“#checkHome”).hide();
$w(“#checkVideo”).hide();
$w(“#checkSchool”).hide();
$w(“#checkInfo”).hide();
$w(“#checkRond”).hide();
$w(“#checkAchter”).hide();
$w(“#checkVoordelen”).hide();
$w(“#checkBuddy”).hide();
$w(“#checkNews”).hide();
const member = await currentMember.getMember();
const userId = member._id;
wixData.query(“voortgangmedewerker”)
.eq(“userId”, userId)
.find()
.then((res) => {
if (res.items.length > 0) {
const item = res.items[0];
let count = 0;
if (item.paginaHome) { count++; $w("#checkHome").show(); }
if (item.paginaVideo) { count++; $w("#checkVideo").show(); }
if (item.paginaSchool) { count++; $w("#checkSchool").show(); }
if (item.paginaAlgemeneInformatie) { count++; $w("#checkInfo").show(); }
if (item.paginaRondleidingDoorHetPark) { count++; $w("#checkRond").show(); }
if (item.paginaAchterDeSchermen) { count++; $w("#checkAchter").show(); }
if (item.paginaVoordelen) { count++; $w("#checkVoordelen").show(); }
if (item.paginaBuddySysteem) { count++; $w("#checkBuddy").show(); }
if (item.paginaNews) { count++; $w("#checkNews").show(); }
$w("#voortgangText").text = `You've visited ${count} out of 9 stations.`;
const percentage = (count / 9) * 100;
$w("#progressBar").value = percentage;
// Enable/disable buttons
if (item.paginaHome) $w("#btnHome").enable(); else $w("#btnHome").disable();
if (item.paginaVideo) $w("#btnVideo").enable(); else $w("#btnVideo").disable();
if (item.paginaSchool) $w("#btnSchool").enable(); else $w("#btnSchool").disable();
if (item.paginaAlgemeneInformatie) $w("#btnInfo").enable(); else $w("#btnInfo").disable();
if (item.paginaRondleidingDoorHetPark) $w("#btnRond").enable(); else $w("#btnRond").disable();
if (item.paginaAchterDeSchermen) $w("#btnAchter").enable(); else $w("#btnAchter").disable();
if (item.paginaVoordelen) $w("#btnVoordelen").enable(); else $w("#btnVoordelen").disable();
if (item.paginaBuddySysteem) $w("#btnBuddy").enable(); else $w("#btnBuddy").disable();
if (item.paginaNews) $w("#btnNews").enable(); else $w("#btnNews").disable();
} else {
$w("#voortgangText").text = "You haven't visited any stations yet.";
}
});
});
---
### 🧩 Code I use on the individual station pages:
import { currentMember } from 'wix-members';
import wixData from 'wix-data';
$w.onReady(async function () {
const member = await currentMember.getMember();
const userId = member._id;
wixData.query("voortgangmedewerker")
.eq("userId", userId)
.find()
.then((res) => {
if (res.items.length > 0) {
let item = res.items[0];
item.paginaHome = true;
wixData.update("voortgangmedewerker", item);
} else {
wixData.insert("voortgangmedewerker", {
userId,
paginaHome: true,
paginaVideo: false,
paginaSchool: false,
paginaAlgemeneInformatie: false,
paginaRondleidingDoorHetPark: false,
paginaAchterDeSchermen: false,
paginaVoordelen: false,
paginaBuddySysteem: false,
paginaNews: false,
voltooid: false
});
}
});
});
(On each page I change
paginaHome = true
to the appropriate field for that page.)
What’s not working:
- The checkmarks do not appear, even when
item.paginaX
is clearlytrue
in the collection. - The progress bar value does not update (stays at 0).
- The buttons do not get enabled, even when the page is marked as visited.
My question:
What am I doing wrong or what am I missing in this approach?
Can someone confirm whether this logic should work in Wix — and if not, what would be the right way to implement this?
Any help is very welcome — thank you in advance!