This episode is for members only
Sign up to access "Build an Appointment Booking System With Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
23. Scaffolding the checkout
Episodes
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
Transcript
00:00
We know that we want the checkout to work in slightly different ways
00:03
depending on if we choose a employee first and then a service or just a service. So the first thing that we're going to do is scaffold out the checkout in the normal way if we have an employee and a service, which we can pass down to the URL and work out the availability for that employee.
00:21
But in the next episode, we'll look at how we can do this by just going through to the checkout only with a service and sort of nulling the employee until we have selected a time slot. So let's do the first thing first. We'll go and click on any of these and go through to a checkout page
00:39
with some basic scaffolding and show all that information. Okay, so let's go over to our web routes and we will create out a new controller for this and pretty obviously this is going to be a checkout controller. So let's say checkout controller and we'll define a route out for this down here.
00:58
So the checkout controller is going to look like this. Checkout, we're going to pass a service in by the slug and then we're going to pass an employee in by the slug as well. Now remember this is eventually going to be optional,
01:11
but we'll look at that in the next episode. So our checkout controller, let's just call this checkout. Now really importantly what I want to add to the end of this is scope bindings. What this will do is it will take the employee
01:25
and make sure that this belongs to the service. We don't want to have anyone pass in an employee that can't perform a service. We want to error if that happens and I'll show you that in a second. So let's go over to our checkout controller.
01:38
Let's create our invoke magic method and we know that we're accepting in a service here. So let's pull that in and an employee. So let's pull that in and for now, let's just do nothing in here.
01:49
So I'm going to link through to this over in our service component. I'm not directly going to link through into here because this is going to be different depending on whether we select it over here or if we select it here.
02:03
So we're going to get rid of the href in here. We're going to go over to our employee page and we're going to link the href directly in here. So let's say href root
02:13
and we know that this requires the employee and the service. So let's define the checkout in here and let's just check what comes first, the service first. So service and the employees, that's all we need to do to build that route up.
02:29
So now from this page specifically, we now have a link through to that checkout. Now it's not doing anything at the moment because we haven't returned an inertial response, but let's do that quickly and then we'll see trying to change around the URL.
02:42
So over in our checkout controller, let's just return an inertial response in here and we'll render out of course a checkout page and let's create this out in our pages section.
02:59
And we'll just define this out really quickly with not much at all, with checkout and we'll see what happens. So when I click on this now, we go through to the checkout. Now we've got hair performed by Alex.
03:10
We know that Mabel can't perform beard. She can only perform hair. So for example, with that scope bindings that I added to the route, if I do choose Mabel in here, it's going to give us a 404 not found.
03:21
So that's a really handy feature within Laravel to automatically scope this so you don't have to add an if statement to your controllers. Okay, so now that we have got the checkout page working, let's pass the data down that we need in here, the very basic data,
03:35
which is just going to be the service and the employee for now. So again, pretty straightforward. We already know how to do this. Let's go ahead and grab the employee resource, make this out for
03:46
the employee and we'll do the same for the service here as well and switch both of these out, change this to our service resource and we are done. We should have these available now. So in our checkout, let's bring in our script section once again and
04:01
let's define out our base layout first of all. So base layout, pull that in and define our options in here with the layout, just our base layout and then we'll define our props in here and we're going to need these a little bit later.
04:17
So I'm going to define these as props when we set everything up. We're going to need to access these props directly within our script section. So we'll give these a variable and then we've just got our employee in here, which is an object and the same thing for our service as well.
04:31
Great. So once again, let's just dump these on the page just to make sure that we've got them and we'll be good to go and there we go. Perfect.
04:41
We've got everything we need. Okay, so we're confident we've got the right data. Let's go and just scaffold out everything that we need within our checkout. So the first thing is this entire thing is going to be a form.
04:51
We're not submitting this in the traditional sense, but the button at the end here is going to submit this overall form, call a method within our JavaScript file here or in the script section and it's going to create the appointment.
05:03
Okay, so again, what we're going to do is treat this like a kind of container with sections. So we're going to space everything out by 10 and then in here we're going to have another H2 and once again,
05:14
we'll just take this from one of our other pages, get rid of that margin top and let's just change the title over to here's what you're booking and the top section is just going to be a summary of everything that we've booked. So let's create out a container in here.
05:30
We are going to set a margin on the top here of six. We're going to make this flex. We're going to space everything out in the x-axis by three and we'll set a background of say slate 100 make this rounded large and
05:43
we'll add some padding to this and this is just basically going to hold all of the details for the employee. Okay, so inside of here we are first of all going to have an image and that's going to be of the employee.
05:55
So let's bind in the source and let's say employee profile photo URL. We'll get rid of the alt just for now. Again, we'll add some styling to this.
06:05
So let's say rounded large size 14 and we're done and then next to this we're going to have another container with all of the information. So this is going to have a width of full and then that's going to sit next to that with all of them details here and
06:20
then the price will be over here. So let's output these details just within basic containers here. So let's add the service title and then we'll add the service duration inside of here.
06:33
So service duration and of course that is in minutes. So let's just add minutes onto there and then down here we're going to have the service price. And let's just take a look at that there, but we want this to sit next to each other.
06:49
So we'll just say flex and justify between and there we go. So now the other information can come down here as well. So why don't we just again just add another container inside of here, add this to that container and then underneath we'll have the employee name.
07:08
And then we'll set this to be a font of semi bold. And I think that should be enough just for that. Great, so we've got the service that we want, the employee and we're good. Now just underneath this section, so if we just close this off,
07:23
we're going to have another section in here, which is going to be the booking calendar. So we can pretty much get rid of all of this stuff in here. We'll keep this in here, but this is going to be the picker and then here we're going to have a sort of step.
07:37
So we're going to say when for and then underneath this we're going to have the ability to choose a slot. Let's just get rid of this background rounded and padding and the space X on there as well, that will get rid of all of that.
07:50
And then down here we're going to have choose a slot. Great, and then this is going to be the slots inside of here. And then the last step is going to be the customers details. So we'll just say your details and book and this will be our form.
08:11
So we're pretty much set up for each section of our checkout. We've got what we're booking and then we're just going to fill in each of these sections as we go through the course. Now, like I said, we can potentially have no employee.
08:25
We just want to look at who's available for beard. At the moment, that's not going to work. So let's head over to the next section and do that and update the UI and then we can carry on with the rest of these sections in our checkout.
39 episodes•5 hrs 0 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 Inertia (using Vue), 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 Inertia!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!