In this episode, we focus on displaying all the available time slots for a date that a user selects in the booking process. We start by updating our checkout component, where we create a couple of computed properties. The first computed property grabs all the available slots for the selected date, and the second one formats those slots to just give us the times, making them easier to display.
We take care to pull out the correct date and make sure it's robust against missing or null data. After that, we quickly dump the slots data to the page just to double-check everything's working as intended.
Next, we focus on presenting the time slots nicely for the user. We use a foreach
loop to iterate through the times and display them as options. We also add some logic to handle cases where there might not be any slots available, just in case.
Finally, to test everything, we tweak the database to change up the working hours and make sure the number of slots adjusts correctly for different days. The end result is a dynamic list of time slots that updates based on the chosen date—so when the calendar changes, the available times do too. Now, users can see their real options, and we're all set to make those slots selectable in the next step!