🔧 Issue with Progress Page in Wix: Progress Bar & Checkmarks Not Working

[Ree]

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 and wix-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.
• 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 clearly true 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!

[Dan_Suhr]

maybe add await to the update so the progress is saved or the update is done before other code runs

await wixData.update("voortgangmedewerker", item);