Need help with Velo example Quick Book and Pending Appointments

Ask the community
, ,
1

I replicated this booking example in my website (have read the tutorial and watched the YouTube videos). The problem is that the requestedSlot field isn’t filled when I do test bookings.

I then checked the example editor and the same happens there. The new row is my test, the previous ones are pre-loaded example data.

1323×361 37.4 KB

I’m thinking the example is old and the code is not working anymore after changes in Velo APIs?

2

I’m sailing in the same boat…
I tried to tweak the code and able to capture “requestedSlot”, but the flipside is now the “pick the time” dropdown is functioning weird.
say I choose timeslot 2:00, it chooses 1:30 :frowning:

here is the highlighted piece of the code I tweaked>

 $w("#slotPicker").options = availableSlots.map((slot, id) => {
 const uniqueId = new Date().getUTCMilliseconds().toString() // Generate a short unique ID to identify options in the slotPicker
 slotsMap[uniqueId] = slot;
 let startTime = slot.startDateTime;
 let timeString = getTimeOfDay(startTime);
 return {
 label: timeString,
 //  value: uniqueId + id
 value: uniqueId
 }
 });

after this tweak, u can check that the requested slot in pendingAppointment collection is populated

1578×731 80.5 KB

I would like assistance too from wixbooking team, to kindly shed some light here…

regards
sneha shah

3

sharing: https://www.wix.com/velo/example/Quick-Book-and-Pending-Appointments

4

wix team may check here, to replicate the issue.

issue summary:
the “pick the time” dropdown is functioning weirdly.
The first time it works fine…but the following time, on changing days it works wiered…
say I choose timeslot 4:00, it chooses 1:00 :frowning:

https://snehatanushah.wixsite.com/bookingvelo

5

issue resolved with use of math.random

6

Thanks Sneha for the solution!

7

@snehatanushah How did you applied the mat.random snippet? After id?

8

were any edits to the collections made? Also, In your modified code you have elements of #txtslot and #txtusrname. What exactly are these elements on the page and what are they used for?

9

@camperodi11
here is the code u can use, which uses a random unique id

  $w("#slotPicker").options = availableSlots.map(slot => {

            const dateTime = new Date().getUTCMilliseconds().toString() // Generate a short unique ID to identify options in the slotPicker
            //replaced with math random number
            var uniqueId = dateTime + "-" + randomNumber(6);

            slotsMap[uniqueId] = slot;
           // console.log("populate dropdown "+ slot.startDateTime);
            let starttime = slot.startDateTime
            let timestring = getTimeOfDay(starttime);
            return {
                label: timestring,
                value: uniqueId
            }

        });

export function randomNumber(len) {
    var n = '';
    var randomNumberVal;
    for (var count = 0; count < len; count++) {
        randomNumberVal = Math.floor(Math.random() * 10);
        n += randomNumberVal.toString();
    }
    return n;
}

I hope this will help

10

nop! I didn’t make any changes to collections.
txtUserName : u can ignore it. I just added it to read the contact email id
txtSlot: U can ignore this as well. I added to test the code when there is more than one staff member. However, the code is not working as expected if I add more staff members.
$w ( ‘#txtSlot’ ). text = firstSlot . startDateTime . toString () + firstSlot . staffMemberId ;

I hope this helps
regards
sneha shah

11

@snehatanushah Thank you very much! I will try it.