Displaying rich text from a CMS depending on data from an earlier page

Ask the community
, , , ,
2

Again you? :grin:

I thought you have resolved your issue already, since there was no answer :thinking: :thinking: :thinking:

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)..

import { session } from 'wix-storage';

$w.onReady(function () {
    const radioGroup = $w('#radioGroup1');

    radioGroup.onChange(() => {
        const selectedValue = radioGroup.value;
        session.setItem('AboutHealth1', selectedValue);
        console.log('Saved to session:', selectedValue);
    });
});

…on → PAGE-A.

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_facing_up: 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 ?

Displaying rich text from a CMS depending on data from an earlier page

So you have this already…

// 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).

What you have learned so far?

  1. How to store DATA to the Wix-Storage.
  2. How to retrieve DATA from Wix-Storage.
  3. How to use Wix-Data.
  4. How to FILTER based on VALUES.
  5. How to generate RETURNING FUNCTIONS.
  6. When and how to use → ASYNC-AWAIT combos.
  7. How to keep your setup modular and reusable.