How do I add two lightboxes to a page, that communciate with the CMS and when clicked they show the results in a repeater?
I would like decades to be loaded onto the page once loaded, e.g. 2000-2009, and when clicked it populates with years in that decade, e.g. 2000, 2001 etc. And when you click on a year, the repeater shows the search results for data in the CMS that is from that year.
It is basically a browse by year page. I have two lightboxes, and a repeater, below is the code for the lightboxes and the main page.
Main Page Code:
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();
});
}
});
LightBox 1 - DecadeButtonsLightbox
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();
});
}
});
Lightbox 2 - YearButtonsLightbox
import wixWindow from 'wix-window';
$w.onReady(function () {
const yearsContainer = $w("#yearsContainer"); // 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();
});
});
}
Any help will be gratefully recieved.
Thanks