Hi folks,
I am using this WIX Bookings Example to create my own Custom Bookings Service (Item) Page. The template was working 2 days ago however today when I run the template (locally) I am getting all kinds of errors. Even when I download it again from the WIX website.
My Service Item page, that I designed by following the WIX Example is not giving me any errors, but it is not showing me any of the correct information for Duration, Day, or Times.
Many Thanks to anyone that can help me out.
Sylvia
This is my page
This is my code
//Import the wix-data module for working with queries.
import wixData from "wix-data";
import wixBookings from 'wix-bookings';
$w.onReady(function () {
// // TODO: write your page related code here...
});
//-------------Page Setup-------------//
// Populate some elements when the dataset is ready. Other elements are
// connected to the dataset using the Connect to Data button.
export function scheduleDataset_ready() {
// Get the current service's schedule.
const schedule = $w("#scheduleDataset").getCurrentItem();
// Calculate the current service's duration (e.g. 1 hr 30 min).
const duration = getDurationFromMinutes(schedule.serviceDurationInMinutes);
// Populate the duration text with the calculated duration.
$w("#duration").text = duration;
// Populate the schedule repeater with the service's schedule data.
populateSchedule(schedule.serviceSchedule);
}
// Populate the schedule repeater with the service's schedule data.
function populateSchedule(serviceSchedule) {
// Process the service's schedule data so it can be used to set the schedule repeater's data.
const repeaterArray = Object.keys(serviceSchedule)
.map(day => ({ _id: day, day, times: mapTimes(serviceSchedule[day]) }))
.filter(day => day.times.length > 0);
// Set the schedule repeater's data, thereby populating the repeater's elements.
$w("#scheduleRepeater").data = repeaterArray;
}
//-------------Schedule Repeater Setup-------------//
// Set up each item in the schedule repeater as it is loaded.
export function scheduleRepeater_itemReady($item, itemData, index) {
// Populate the day text with the scheduling item's long day text.
$item("#day").text = shortDaysToLongDays[itemData.day];
// Populate the times text with a single time or joined times (e.g. 10:00 am or 9:30 am / 2:00 pm).
$item("#times").text = itemData.times.join(" / ");
}
//-------------Date and Time Helpers-------------//
// Map short day names to full day names.
const shortDaysToLongDays = {
sun: 'Sunday',
mon: 'Monday',
tue: 'Tuesday',
wed: 'Wednesday',
thu: 'Thursday',
fri: 'Friday',
sat: 'Saturday'
};
// Get the time of the given date formatted as HH:MM AM/PM.
function getTimeOfDay(date) {
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }).toLowerCase();
}
// Get a duration text from a given number of minutes (e.g. 1 hr 30 min).
function getDurationFromMinutes(mins) {
// Calculate how many hours are in the duration.
const hours = Math.floor(mins / 60);
// Calculate how many minutes are left over.
const minutes = mins % 60;
// Create the hours text.
const hoursOutput = hours === 0 ? `` : hours === 1 ? `1 hr` : `${hours} hrs`;
// Create the minutes text.
const minutesOutput = minutes === 0 ? `` : `${minutes} min`;
// Return the hours and minutes texts.
return `${hoursOutput} ${minutesOutput}`;
}
// Format schedule times.
function mapTimes(times) {
return times.map(time => {
// Split the time into hour, minute, and seconds sections.
const splitStartTime = (time.startTime).split(":");
// Determine if the time is am or pm.
const suffix = splitStartTime[0] < 12 ? 'am' : 'pm';
// Return the hour, minutes, and suffix texts.
return `${(splitStartTime[0] % 12 + ":" + splitStartTime[1])} ${suffix}`;
})
}
export function extraInfoDataset_ready() {
// Add your code for this event here:
}