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

0%
Your progress
  • Total: 3h 4m
  • Played: 0m
  • Remaining: 3h 4m
Join or sign in to track your progress

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 episodes3 hrs 4 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!