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
24. Building Alpine plugins
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 for the fun part, we're going to start working on our calendar.
00:03
Now, over the next few episodes, we're going to slowly build this up. But before we do anything, I just want to talk about building out Alpine plugins.
00:11
So what we don't really want to do is just dump all of our code directly within here. We're going to create a directive where we can do something like x-picker, and that's
00:20
going to turn this input into a date picker for us. But before we dive straight into that, let's get everything set up so we can access Alpine on its own, and we
00:30
can register out a plugin which creates this directive. OK, so a little bit of background. If we come over to app.js, which is in our resources directory, we don't see anything in here.
00:41
Now, Livewire depends heavily and works basically on Alpine to do all of its client-side stuff. So what we need to do is we need to plug Alpine out directly in order to modify it or add plugins to it
00:57
or anything like that. So inside of app, we're going to go ahead and manually import Livewire and Alpine, and we're going to pull that in from, and we need to go back into our vendor folder
01:08
here, into Livewire, into Livewire again, into the distribution folder, and we need to pull in livewire.esm. OK, so now that we've done that, what we can do
01:21
is we can start Livewire manually now. So we're going to say Livewire start, and that means that in between here, we can do things like Alpine plugin,
01:33
and we can register our picker plugin, which we're eventually going to pull in. Now, at the moment, this isn't quite going to work. We're going to come over to our layout app,
01:40
and just down at the bottom of the page, we're going to include this Livewire script config directive. So that's going to go ahead and disable everything for us
01:49
so we can manually start this out. So if we head over to the browser, everything should still work. We shouldn't see any errors in our console.
01:58
Let's just pull this down and check. And yeah, aside from one of the plugins I have in my browser, everything looks good. So now what we can do is start to build out a plugin.
02:07
So let's go ahead and do that now. So inside of just our JS directory, it doesn't really matter where we put it, I'm going to go ahead and create our picker.js file.
02:16
This is going to be our plugin. So inside of here, we're going to go and export this so we can import it within our main app file. We're going to go and register this as a function.
02:28
Alpine will be passed into this when we register it. And then we can go ahead and do things like create our directive. So let's create our directive called picker.
02:38
And into this, we're going to go ahead and get a closure. And we can just do something. So let's just console log something out for now, and then we'll fill this in in the next episode.
02:46
So we'll say picker registered. Great. OK, so now that we've got this, we can go ahead and import it from here.
02:52
So let's import that picker from picker.js. And then down here, we're going to say Alpine, which we can now access, plugin, and picker. And there we go.
03:03
We've registered it. So now, if we head over to our checkout, we can say x picker. And sure enough, if we head over and check our console, we have registered a directive with Alpine.
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!