I started by watching and doing exactly as this video instructed. https://www.youtube.com/watch?v=lEEIaJyKzM8
The video is by wix.com and it explains how to create a quick booking form with the Wix Bookings API. I copied every step and checked my code a 100 times, the problem is always the same, when I preview the page and click on the dropdown box there is nothing to choose from.
Then I went here https://www.wix.com/corvid/example/Quick-Book-and-Pending-Appointments
The code here was slightly different, I saved my other code elsewhere, and pasted in the code from the example. No errors came up, I hit the preview, clicked the downloads and still nothing.
I was determined to see it working as it should, so finally I went to the example editor. https://editor.wix.com/html/editor/web/renderer/new?siteId=a0d6a334-35b5-436a-a29e-e2ae855d9117&metaSiteId=7f4b3a3b-f10e-4f03-a95b-d2a33959486b
I hit preview, clicked on drop downs and it does the exact same thing!
So whats going on here, either all three of these different examples are broken in the same way, or… there was an update to how this code works and I can’t find anyone talking about it. You would think something like a problem with dropdowns and corvid would have been noticed sooner.
Which brings me here looking for an answer, anyone know whats going on?
Here is the original code from the youtube video transcribed. I’m assuming its all correct.
import wixBookings from ‘wix-bookings’;
import wixData from ‘wix-data’;
const serviceId = ‘c8eed83a-ccff-4022-bef7-0dc6985b0e38’;
let slotMap = {};
$w.onReady(function () {
const today = new Date();
const daysOfTheWeek = [“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”];
$w(‘#dayPicker’).options = getWeekDays(today).map(day => {
return {
label: ${daysOfTheWeek[day.date.getDay()]} ${day.date.tolocaleDateString("en-GB")},
value: day.date.toISOString()
}
});
$w(‘#dayPicker’).onChange((event, $w) => {
const selectedDate = new Date(event.target.value);
findAvailableSlots(selectedDate);
});
sw(“#submitButton”).onClick(() => validateAndSubmitForm());
});
async function findAvailableSlots(dateString) {
slotsMap = {};
const startDateTime = getMidnight(dateString);
const endDateTime = getNextMidnight(dateString);
const options = {
startDateTime,
endDateTime
};
const availableSlots = await getNonPendingAvailableSlots(serviceId, options);
if (availableSlots.length === 0) {
$w("#slotPicker").options = [];
$w("#slotPicker").placeholder = "No sessions for this day";
$w("#slotPicker").selectedIndex = undefeined;
$w("#slotPicker").disable();
}
else {
$w("#slotPicker").options = availableSlots.map(slot => {
slotsMap[slot._id] = slot;
let startTime = slot.startDateTime;
let timeString = getTimeOfDay(startTime);
return {
label: timeString,
value: slot._id
}
});
$w("#slotPicker").placeholder = "Pick a time";
$w("#slotPicker").selectedIndex = undefined;
$w("#slotPicker").enable();
}
}
async function validateAndSubmitForm() {
$w(“#errorMessage”).hide();
$w(“#submitButton”).disable();
const formFields = ["nameInput", "emailInput", "ageInput", "dayPicker", "slotPicker", "agreementCheckbox"];
if (formFields.every(input => $w('#${input}').valid)) {
const slot = slotsMap[$w("#slotPicker").value];
const newRequest = {
name: $w("#nameInput").value,
email: $w('#emailInput').value,
age: $w('#ageInput').value,
requestedSlot: slot,
status: "PENDING"
};
await wixData.insert("Tour_Booking", newRequest);
$w("#formGroup").hide();
$w("#thankYouText").show();
}
else {
$w("#errorMessage").show();
$w("#submitButton").enable();
}
}
async function getNonPendingAvailableSlots(requestedServiceId, options = {}) {
const pending = {await getPendingAppiontments()).map(appointment => appointment.requestedSlot._id);
let availableSlots = (await wixBookings.getServiceAvailability(requestServiceId, options)).slots;
availableSlots = availableSlots.filter(slot => !pending.includes(slot._id));}
return availableSlots;
}
async function getTour_Booking() {
return (await wixData.query(“Tour_Booking”).find()).items.filter(item => item.status === “PENDING”);
}
function getMidnight(date) {
let midnight = new Data(date);
midnight.setHours(0, 0, 0, 0);
return midnight;
}
function getNextMidnight(date) {
let midnight = new Data(date);
midnight.sethours(24, 0, 0, 0);
return midnight;
}
function getWeekDays(startDate) {
let weekDays = ;
let current = getMidnight(startDate);
for (let i = 0; i < 7; i++) {
weekDays.push({
_id: "day" + i,
date: current
});
current = getNextMidnight(current)
}
return weekDays;
}
function getTimeOfDay(date) {
return date.toLocaleTimeString(, { hour: “2-digit”, minute: “2-digit”}).toLowerCase();
}
