I’m having trouble with
Displaying rich text from a CMS on a page depending on data from an earlier page using sessions.
Working in
Wix Studio Editor
Site link
Not live yet, I can only share code snippets and screenshots.
What I’m trying to do
User answers radio-button questions. On a summery page, the radio-button group value is brought in, I’m using sessions, to display different text content for each radio-button choice. This text content is brought in from a CMS. The CMS contains the text content and the value of the radio-button group.
What I’ve tried so far
I’ve referenced Velo Documentation from Wix-Storage, I’ve used WIX code ai generator, and ChatGPT. ChatGPT had outdated code that no longer works.
But maybe the issue is my syntax?
// used set value
import { session } from "wix-storage"; // added to the top
let selectedValue = event.target.value; // within onChange for the radioButtonGroup
session.setItem("AboutHealth1", selectedValue ); // code used to set the value
// used to get item value on another page
import { session } from "wix-storage"; // added to the top
let savedChoice1 = session.getItem("AboutHealth1") // used to receive the value
// used to retrieve the content to be displayed from the CMS ID="Results"
wixData.query("Results")
.eq("title", savedChoice1)
.find()
.then((results) => { ... }); // used to get the corresponding cell in the CMS
// more code I used on request
Extra context
Anything else that might help - edge cases, screenshots, etc.
I thought you have resolved your issue already, since there was no answer
Hopefully the following code is not the full version —>
// used set value
import { session } from "wix-storage"; // added to the top
let selectedValue = event.target.value; // within onChange for the radioButtonGroup
session.setItem("AboutHealth1", selectedValue ); // code used to set the value
Surely you will have something like… (simple-version)..
You just have stored some data for the → AboutHealth1 ← key, into your Wix-Storage-Session.
Now all you need is to retrieve that stored data on → PAGE-B ← back again…
Page B – retrieve the stored value
import { session } from 'wix-storage';
$w.onReady(function () {
const savedValue = session.getItem('AboutHealth1');
if (savedValue) {console.log('Retrieved from session:', savedValue);
// Example: set the value in another RadioGroup
$w('#radioGroup1').value = savedValue;
} else {console.log('No value found in session.');}
});
So what would be your next step now?
You have already your key-string from page-A on page-B already.
What do you wanna do with that information on page-B ?
// used to retrieve the content to be displayed from the CMS ID="Results"
wixData.query("Results")
.eq("title", savedChoice1)
.find()
.then((results) => { ... }); // used to get the corresponding cell in the CMS
Make an own FUNCTION out of it… (turning it into an own returning function)…
So it could look (on page-B) something like …
import wixData from 'wix-data';
import { session } from 'wix-storage';
$w.onReady(async function () {
const items = await get_filteredData();
if (items.length > 0) {
const item = items[0]; // first matching record
console.log('Matched CMS item:', item);
// 🧩 Example: populate your page
$w('#textTitle').text = item.title;
$w('#textDescription').text = item.description;
$w('#image1').src = item.image;
} else {
console.log('No matching records found.');
}
});
async function get_filteredData() {
const savedChoice1 = session.getItem('AboutHealth1');
if (!savedChoice1) {
console.warn('No savedChoice1 found in session storage');
return [];
}
try {
const results = await wixData.query('Results')
.eq('title', savedChoice1)
.find();
console.log(`Found ${results.items.length} results for`, savedChoice1);
return results.items;
} catch (err) {
console.error('Error querying Results:', err);
return [];
}
}
Tweak it even more to make it more dynamic and reusable…
import wixData from 'wix-data';
import { session } from 'wix-storage';
const myCollection = 'ID OF COLLECTION HERE;' //(or name)
$w.onReady(async()=> {
const savedChoice1 = session.getItem('AboutHealth1'); console.log('Saved-Choice1: ', savedChoice1);
const items = await get_filteredData(savedChoice1);
if (items.length > 0) {console.log('Items have been found!');
const item = items[0]; console.log('Matched CMS item:', item);
// 🧩 Example: populate your page
$w('#textTitle').text = item.title;
$w('#textDescription').text = item.description;
$w('#image1').src = item.image;
// ...and so on...
// ...and so on...
// ...and so on...
// ...and so on...
} else {console.log('No items have been found.');}
});
async function get_filteredData(data) {
if (!data) {console.warn('No savedChoice1 found in session storage'); return [];}
try {
const results = await wixData.query(myCollection).eq('title', data).find();
console.log(`Found ${results.items.length} results for`, data);
return results.items;
} catch (err) {console.error('Error querying Results:', err); return [];}
}
So what exactly happens now on page-B ???
Yes you are right! → The DATA-STRING is pulled out from your Wix-Storage (session) on page-B automatically now and is used to filter your collection based on the STRING from the storage → meaning the STRING from your PAGE-A (which have been selected inside the RBG on page-A).
Page B – retrieve the stored value