Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Livewire" right now.

Already a member? Sign in to continue

Playing

21. Scaffolding the checkout design

Episodes

0%

Your progress

Total: 3h 4m
Played: 0m
Remaining: 3h 4m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

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.

Episode summary

In this episode, we're moving on to scaffolding the checkout flow of our app now that the core functionality is out of the way. The main goal here is to let users select a professional (or employee) and a service, setting up the initial navigation for the checkout process.

We start by generating a new Livewire component specifically for the checkout. After creating the component, we hook it up to a new route (/checkout) that takes in the service and employee as parameters using their slugs. We also update our web routes and ensure that the links from the employee and service listings correctly take the user through to the checkout page.

To keep things moving quickly, we're using some pre-made markup from GitHub for the checkout page layout. We then bind the selected service and employee data into our checkout component using route model binding, making their details (like name, profile photo, duration, and price) available in the template.

By the end of the episode, we have a working checkout scaffold: clicking on a professional and a service leads to a populated checkout page showing their relevant details. This forms the base that we'll keep building on—next up, we'll dive into making some of these fields optional and handle more advanced flow cases!

Episode discussion

No comments, yet. Be the first!