This episode is for members only
Sign up to access "Build an Appointment Booking System With Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
22. Making the employee optional
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
Transcript
00:00
To make the employee optional, we're
00:01
going to start with our web routes. And we're just going to add a question mark onto the end of the employee, which means it can be nullable within our routes.
00:08
Otherwise, it's always going to expect an employee. The next thing we want to do is head over to our checkout and make sure that this is also potentially a null value, because we might not have that in there.
00:19
And now we're going to go over to our home page, where we are going directly through to this service here. This is going to need an href now. So if we pass this href in as a route to the checkout,
00:32
remember that caused an error before, we can just pass through here the service. And we don't need the employee now, because it's optional within our web routes.
00:41
So if we head over now, we shouldn't see an error. And yeah, we do. So let's just check. And yeah, we just need to get rid of, well,
00:49
let's take service, not services. We were passing the entire object in. Now it's working. So we can click through normally onto the service
00:57
that we want for each of these employees. But now we can click directly through to here. And we just need to do a little bit of tidying up in our template, because of course, we
01:06
don't have an employee in there. So let's head over to our checkout. And we'll bring back this empty placeholder. And of course, what we want to do
01:14
is just wrap this in an if statement. So if we do have an employee available, we want to show their profile photo. So let's go and say if employee.
01:23
And otherwise, so let's just pull this into an else. We are just going to show the placeholder in there. Again, the same with the name as well. So we want to say employee name.
01:34
Or we'll just do a sort of shorthand in here and say any employee, because later on, as soon as we select a slot from here, that will pick up on the next available employee.
01:46
And it will update the employee that we have within this Livewire component. And then of course, it will re-render and show that employee in there.
36 episodes•3 hrs 4 mins•1 year ago
Overview
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course.
Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments.
For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots).
To finish up, we’ll create an entire booking flow with Livewire, including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment.
Phew. We’ve got a lot to learn — let’s build a booking system with Livewire!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!