Does WIX still support OnMessage and postParentMessage? If not what, what property is used know, between two lightboxs and the main page?

Library_Team · September 7, 2023, 3:46pm

Question:
Does WIX still support OnMessage and postParentMessage?

Product:
Wix Editor

What are you trying to achieve:
I am trying to communicate between two lightboxes and the main page.

What have you already tried:

Code for main page:
import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;

$w.onReady(function () {
openDecadeButtonsLightbox();
});

async function openDecadeButtonsLightbox() {
const decadeButtonsContainer = await wixWindow.openLightbox(“DecadeButtonsLightbox”);

const decades = await fetchDecadesFromStorage();
decadeButtonsContainer.postMessage({ message: "decadesData", data: decades });

}

async function fetchDataForYear(year) {
// Fetch data for the specified year from storage or any other source
try {
const results = await wixData.query(‘Repository’).eq(‘date’, year).find();
return results.items;
} catch (error) {
console.error(“Error fetching data:”, error);
return ;
}
}

async function fetchDecadesFromStorage() {
// Fetch the decades data from storage or any other source
// Replace this with your actual data retrieval logic
return [
{ start: 2000, end: 2009 },
{ start: 2010, end: 2019 },
// Add more decades
];
}

wixWindow.onMessage((event) => {
if (event.message === “yearSelected”) {
const selectedYear = event.data.year;

    fetchDataForYear(selectedYear).then(dataForYear => {
        $w("#repeater1").data = dataForYear;
        $w("#repeater1").show();
    });
}

});

Code for lightbox 1:

import wixWindow from ‘wix-window’;

$w.onReady(function () {
const yearsContainer = $w(“#YearButtonsLightbox”); // Replace with the actual element ID

wixWindow.onMessage((event) => {
    if (event.message === "yearsData") {
        const years = event.data; // Received years data from DecadeButtonsLightbox
        populateYears(yearsContainer, years);
    }
});

});

function populateYears(container, years) {
years.forEach(year => {
const yearButton = container.create(“text”, { “text”: year.toString() });
yearButton.style.color = “blue”; // Customize the color
yearButton.style.textDecoration = “underline”; // Add an underline
yearButton.style.cursor = “pointer”; // Change cursor to pointer

    yearButton.onClick(() => {
        // Send selected year back to the main page
        wixWindow.postParentMessage({ message: "yearSelected", data: year });
        wixWindow.close();
    });
});

}

Code for lightbox 2:
import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;