Hi everyone,
I’m working on a website with two pages:
• Stages Page: Displays 9 stages, each connected to CMS data. Each stage has associated tools filtered by tags. Clicking on a tool button navigates to a tool detail page (/tool-detail?tool=POE).
• Tools Page: Displays 19 tools, each connected to CMS.
Issue:
When I click on a tool (e.g., “POE”) from the Stages page:
The page successfully navigates to /tool-detail?tool=POE.
The button is correctly highlighted, indicating the selection works.
However, the content displayed is the default one (“Building Operations”).
If I click the same button again on the Tool page, the correct content for “POE” will finally load.
It seems like the initial CMS content load doesn’t recognise the query parameter properly during the first navigation.
What I’ve Tried:
• Ensured query parameters are correctly passed (?tool=POE).
• Verified the CMS query logic and console logs.
• Tried manually refreshing the page – which does display the correct content.
Expected Behaviour:
On the first navigation to /tool-detail?tool=POE, the “POE” content should load correctly without requiring a second click.
I’ve attached the relevant code for both Stages Page and Tool Detail Page for reference.
I would appreciate any guidance or suggestions. Please let me know if you need more details. 
( Sorry for the long code snippets, and thank you for taking the time to look into this!
Stage Page
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
console.log("Page ready!");
// 🔄 Load Stage CMS data
wixData.query("Stages")
.find()
.then((results) => {
console.log("Stages Data loaded: ", results.items);
// ✅ Stages Buttons (Repeater1)
$w("#repeater1").data = results.items;
// Select Stage * Instigation by Default
const defaultStage = results.items.find(item => item.title === "* Instigation");
if (defaultStage) {
updateContentBox(defaultStage);
resetButtonStyles("#mybutton");
highlightButton("#repeater1", defaultStage.title);
filterTools(defaultStage.title);
}
// Set up Stage button
$w("#repeater1").forEachItem(($item, itemData) => {
const button = $item("#mybutton");
button.label = itemData.title;
button.onClick(() => {
console.log(`Stage clicked: ${itemData.title}`);
updateContentBox(itemData); // update CMS content
resetButtonStyles("#mybutton"); // reset stage button style
highlightButton("#repeater1", itemData.title); // highlight currrent button
filterTools(itemData.title); // filtering tools for current stage
});
});
})
.catch((err) => {
console.error("Error loading data: ", err);
});
});
//✅ **2. update stage CMS content**
function updateContentBox(itemData) {
console.log("Updating content box with: ", itemData);
$w("#stageImage").src = itemData.image || "";
$w("#stageDescription").text = itemData.description || "No Description";
$w("#stageRibaOutcome").text = itemData.ribaOutcome || "No RIBA Outcome";
$w("#stageRenewOutcome").text = itemData.renewOutcome || "No RENEW Outcome";
$w("#stageTitle").html = itemData.stageTitle || "<p>No Title</p>";
$w("#stageNum").text = itemData.stageNumber || "Stage";
console.log("Content box updated successfully.");
}
// ✅ **3. reset buttons style**
function resetButtonStyles(buttonID) {
if (buttonID === "#mybutton") {
$w("#repeater1").forEachItem(($item) => {
const button = $item("#mybutton");
button.style.backgroundColor = "white";
button.style.color = "black";
});
}
}
// ✅ **4. highlight current button**
function highlightButton(repeaterID, stageTitle) {
$w(repeaterID).forEachItem(($item, itemData) => {
const button = $item("#mybutton");
if (itemData.title === stageTitle) {
button.style.backgroundColor = "#E61D29";
button.style.color = "white";
}
});
}
// ✅ **5. filtering tools for current stage**
function filterTools(stageTitle) {
console.log(`Filtering tools for stage: ${stageTitle}`);
wixData.query("Tools")
.hasSome("stageTags", [stageTitle]) // filter tools by tags
.find()
.then((results) => {
console.log("Filtered Tools: ", results.items);
$w("#repeater2").data = results.items;
$w("#repeater2").onItemReady(($item, itemData) => {
const button = $item("#buttonText");
button.label = itemData.title;
button.onClick(() => {
console.log(`Navigating to Tool Detail: ${itemData.title}`);
const toolTitle = encodeURIComponent(itemData.title);
wixLocation.to(`/tool-detail?tool=${toolTitle}`);
});
});
})
.catch((err) => {
console.error("Error filtering Tools: ", err);
});
}
Tool Page
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
console.log("Tool Detail Page ready!");
// ✅ get URL
let query = wixLocation.query;
let selectedTool = query.tool;
console.log("Selected Tool from URL:", selectedTool);
if (selectedTool) {
// ✅ update tool CMS content
loadToolContent(selectedTool);
}
// ✅ load tools button data
wixData.query("Tools")
.find()
.then((results) => {
console.log("Tools Data loaded:", results.items);
$w("#repeater1").data = results.items;
// ✅ highlight buttons
$w("#repeater1").onItemReady(($item, itemData) => {
const button = $item("#buttonText");
button.label = itemData.title;
if (itemData.title === selectedTool) {
console.log(`Pre-selecting button: ${itemData.title}`);
button.style.backgroundColor = "#E61D29";
button.style.color = "white";
}
// ✅ clickable button
button.onClick(() => {
console.log(`Button clicked: ${itemData.title}`);
resetButtonStyles();
button.style.backgroundColor = "#E61D29";
button.style.color = "white";
updateContentBox(itemData);
updateURL(itemData.title);
});
});
})
.catch((err) => {
console.error("Error loading Tools data:", err);
});
});
// ✅ **update CMS content based on tool name**
function loadToolContent(toolTitle) {
wixData.query("Tools")
.eq("title", toolTitle)
.find()
.then((results) => {
if (results.items.length > 0) {
const matchedItem = results.items[0];
console.log(`Directly loading content for: ${matchedItem.title}`);
updateContentBox(matchedItem);
} else {
console.warn("No matching tool found during direct query.");
}
})
.catch((err) => {
console.error("Error querying Tools:", err);
});
}
// ✅ **update tool CMS content**
function updateContentBox(itemData) {
console.log("Updating content box with:", itemData);
$w("#toolTitle").text = itemData.title || "No Title";
$w("#toolDescription").text = itemData.whatIsIt || "No Description";
$w("#toolOutcomes").text = itemData.outcomes || "No Outcomes";
$w("#toolUsers").html = itemData.users || "<p>No Users</p>";
$w("#toolSteps").html = itemData.steps || "<p>No Steps</p>";
$w("#toolStages").html = itemData.atStages || "<p>No Stages</p>";
$w("#watchVideo").link = itemData.video || "#";
$w("#downloadTemplate").link = itemData.pdf || "#";
$w("#downloadInstructions").link = itemData.pdf || "#";
console.log("Content box updated successfully.");
}
// ✅ **reset tool button style**
function resetButtonStyles() {
$w("#repeater1").forEachItem(($item) => {
const button = $item("#buttonText");
button.style.backgroundColor = "white";
button.style.color = "black";
});
}
// ✅ **update url and navigate**
function updateURL(toolTitle) {
if (toolTitle) {
const newURL = `/tool-detail?tool=${encodeURIComponent(toolTitle)}`;
console.log(`Navigating to: ${newURL}`);
wixLocation.to(newURL);
} else {
console.warn("Tool title is undefined, cannot update URL.");
}
}
