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
21. Scaffolding the checkout design
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
So now all of our core functionality is built, we're going to go ahead and scaffold out a checkout. Now the first thing that we're going to do is work on this where we select a professional or an employee
00:10
and then we choose a service. Later on, we'll go through to how we deal with just choosing a service, not having an employee available.
00:19
OK, let's go over and just start to build everything out. So we're going to go and create out a checkout component with Livewire, so the same as we've done before. So let's say Livewire make,
00:30
and we'll just call this checkout. OK, now that's done, let's go and register our route for our checkout. And of course, this is just going to be slash checkout.
00:40
Then we're going to have a service that we want to take in and we're going to do that by the slug. And then we're going to have an employee also by the slug. And of course, let's give this a name of just checkout
00:54
and let's reference the checkout component that we've just created within Livewire. OK, so we'll head straight over to the checkout.blade.php file.
01:04
And once again, in the GitHub repository, you'll find the markup for the entire checkout, just for us to save a little bit of time. OK, let's go ahead and hook up the service
01:14
that we're using to go through to this. So if we head over to our employee index or employee show, this is where we want to hook this up. So what we can do is we can just pass through
01:27
an href in here, and this is going to be through, of course, to the checkout. And we know that we've got an employee in here and we've got a service.
01:35
So we can pass the service through, pass the employee through for route model binding, and we should be good. And yeah, sure enough, let's come over to our web routes
01:44
and just finish that off. OK, so I can click on an employee, I can click on a service, and that should go through to the checkout.
01:50
Now it's not working at the moment. That is just because over in our service component, we are not binding in this href. So let's just do that now.
01:59
So we can just take in the href there, pop it in there, and we should be able to click through, go through to the checkout. So this is what the checkout looks like.
02:07
We've already seen it from the introduction. We'll either have an empty placeholder here for the profile photo of the employee if they're not available,
02:15
or we'll have the employee name and their picture. We'll have the duration of the service, the price, and then we have our picker here, which we're obviously going to need to build out,
02:24
all of our slots, our details, our error, if the slot has been taken while we've been in checkout, all pretty standard stuff. OK, so now that we've got this going,
02:33
let's go over to our checkout component and just start to fill in some of this basic stuff. And we don't have these available yet, so let's go over to the checkout component
02:43
and let's take in these with route model binding directly into here. So we'll have a service here and we will have an employee.
02:51
OK, great. So that'll be available in our template now. So let's go and just grab the service title and let's grab the duration in minutes.
03:07
And we know that we can grab the price as well. That's pretty straightforward because we're already casting this. So let's just grab that service price, have a look.
03:15
And yeah, there we go. We've got pretty much everything we need. So the employee here is a little bit different. So we're just going to output the employee
03:22
and then we'll go into the next episode and look at how we can make this optional. So let's say employee name for the profile photo up here. Let's get rid of this empty one for now.
03:33
And let's go ahead and add in the employee profile photo URL. And let's check this out. There we go with Alex.
03:41
And that's pretty much it for now. So we've got this top section completely done. We've scaffolded out the checkout. Let's jump over and just look out how to make this optional.
03:51
So we can go through and just click on our hair. Obviously at the moment it's broken because we're expecting an href on our homepage for each of them services.
36 episodes•3 hrs 4 mins•3 months 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!
Comments
No comments, yet. Be the first to leave a comment.