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
08. Showing all services by an employee

Episodes

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

Transcript

00:00
When we click on one of these employees, we basically just want to see a list of services that they can perform. So we just need another route for this, another component,
00:07
and we just want to output this to the page in exactly the same way that we see here. OK, so to get started, let's go ahead and actually create a component for this.
00:15
So let's make out a Livewire component. And we're going to call this Employee Show. And again, we're going to register this directly in our routes.
00:24
So let's head over to our routes, grab this, and we'll go ahead and call this Employees. And then we will take the employee with route model binding, but we'll
00:33
grab them by their slug so this looks a little bit nicer. OK, so we can go ahead and hook that up to the Employee Show component that we've just created. And we'll say Employees.show, and we
00:44
can start to link through to this. OK, so let's go back over to our home page, and we'll link this up. So the href here is now going to be a route to Employees.show,
00:56
and we want to pass that employee through for route model binding. So we should now be able to click on each of these. Great.
01:04
OK, we just need this page created now. So we can basically just take the entire structure of this. Let's go over to our Employee Show component, paste this in, and then we can get rid of the first section just here
01:16
so we don't need this first section. And we're going to say choose a service from, and then we want the employee's name. We haven't pulled that in just yet,
01:28
but let's go ahead and just add that in there for now. And then this is going to be the employee services directly from that relationship, and we should see exactly the same thing.
01:38
OK, so obviously this isn't going to work at the moment because we're not passing this employee through or accepting it in. So if we open up the Employee Show component,
01:49
we basically just want to take this as a property, and that will be pulled in directly from model binding, and we should be able to see everything that we need. And there we go.
02:00
Great. So if we go back, when we click on Alex, we see two services. When we click on Mabel, of course, we just see one. And these components are going to operate
02:08
in exactly the same way. They're going to go through to the checkout, whether we have chosen an employee or whether we just want to choose a service first.

Episode summary

In this episode, we're building out the feature that lets you click on an employee and view all the services they can perform. Here's how we do it:

First, we set up a new Livewire component called EmployeeShow. We also register a new route for showing individual employees, cleanly using route model binding with their slugs for nicer URLs.

Next, we hook this new route up to our links on the homepage—so now, when you click on an employee, it takes you to that employee's dedicated page. Inside the new component, we reuse some of our existing structure to list out the services, adjust the heading, and make sure we're showing the employee's name at the top.

We make sure the component accepts the correct employee (with all their services) via route model binding. Once that's set, clicking on any employee displays a list of only the services they offer, perfectly tailored per employee—and everything's hooked up so that if you click further, you go through to checkout just like before.

Nice and tidy! This is a great foundational piece for making the site more user-friendly and dynamic.

Episode discussion

No comments, yet. Be the first!