This episode is for members only
Sign up to access "Build a File Marketplace with Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
19. Flashing an update message
Episodes
01. Introduction and setting up
02. Onboarding with Stripe
03. Creating products
08. Setting up and listing products
10m 54s
0%
09. Installing Livewire
2m 49s
0%
10. Building the production creation form
15m 1s
0%
11. Automatically generating the slug from the product title
1m 28s
0%
12. Validating and creating a product
6m 23s
0%
13. Handling product file uploads
8m 14s
0%
14. Attaching files to a product
6m 45s
0%
04. Editing products
05. User subdomains
06. Product checkout
07. Storing sales
08. Accessing purchased files
Transcript
00:00
At the moment, when we save this product information, we don't get confirmation that anything has really happened. So we're going to add in a really simple notification at the top of the page
00:09
and control what we flash the message as through Livewire. Now, the first thing that we want to do is head over to our component section under our views and create out a new component that we can register globally.
00:22
So I've got the source code for this in the course downloads. This is basically just a markup for a very simple notification, which is going to sit at the top right of our page. So we're going to add this over in app.blade.php so it's global.
00:38
We can put this just down here. So we're going to say X alert. So let's head over to that alert component. And just within this paragraph here, that is where the text is going to live.
00:49
So we can just flash a little message there. Now, to get this working, we're going to use Alpine JS, which is already included when we install Laravel Breeze. Alpine is a very lightweight JavaScript library,
01:04
which is going to allow us to really nicely show this only if we have a certain value in there. Now, to give you an idea of how Alpine works, let's just pull down the div just here so we have these attributes on each line.
01:18
And to initialize a component within Alpine, we set X data. Now, inside of here is going to be an object and that's going to contain a show property. Whether this component, e.g.
01:31
this entire div is shown and it's going to contain the body of the message. So if we just put this is saved inside of the body, what we can do is down here, get rid of this. And in the paragraph here, say X text and then reference
01:47
that property within this component so we can just reference body in there. And if we head over, you can see that this just looks like a normal component, but we have a little bit of dynamic data in here. Now, if we set the X show attribute on here to the show value,
02:04
this is now going to be hidden. You can see it's disappeared. That is because this is false. If we set this to true, sure enough, it's going to be shown.
02:13
Now, what we can actually do is within our Alpine component. So within edit product, we can actually fire off a global JavaScript event in here. We can go ahead and pick this up within here, set show to true
02:28
and then set body to the message that we want to show. So we're going to get rid of the body for now, because that by default is just going to be an empty string. And then in here, we can set up an X on.
02:40
We can say alert.window. So a global window event called alert. We're then going to do something when that rolls in. So we're going to go ahead and set show to true.
02:51
And then we're going to set the body to and within this context, we get event dot detail, which contains whatever we've passed into here. So let's look at how this works directly from Alpine, and then we'll just tidy this up a little bit so it works nicely.
03:07
So this JavaScript event, we can actually go ahead and say dispatch browser event. We know that the event we're picking up is alert. So we can go ahead and choose the name for that. And then in here, this is that detail that we set just here.
03:21
So that is going to be the actual flash message itself. So let's just say product updated. And we're pretty much done. So if we head over now and we go and click edit product.
03:32
Sure enough, that now shows with the text that we dispatched via Livewire. Remember, Livewire communicates via JavaScript. So that's why we can do stuff like that directly within our Livewire components. Now, there's a problem here.
03:46
We can't close this off at the moment and there's no real delay on it for it closing off itself. So we're going to go over to our component again and we're going to update this with a timeout directly within here.
03:58
So to do this, we're going to go ahead and use the native set timeout method inside of JavaScript or function within JavaScript. And then what do we want to happen after a certain amount of time? Let's choose this as two seconds, 2000 milliseconds.
04:12
And in here we want to set show back to false and we want to set the body back to an empty string. So now what's going to happen is we just head back over. When we click edit product, that timer is going to kick in.
04:25
And two seconds later, it's going to reset the state of that particular component. We can do a similar thing with the button down here to close this by saying an X on click and going ahead and saying show to false. And setting the body back to an empty string,
04:43
or we could have a standard reset method in here, which did this here and did this here, but we'll leave it at that for now, because it's pretty simple. So let's try this out as well. Let's edit, click X and it disappears.
34 episodes•3 hrs 32 mins•1 year ago
Overview
Build a marketplace where sellers can list and sell files, while we take a cut of each sale using Stripe Connect.
We'll cover onboarding users with Stripe Connect, creating products and uploading files, payments, and delivering purchased files to your customers.
Here's everything we'll cover:
- The Stripe Connect onboarding flow
- Effortlessly creating products (and uploading files) with Livewire forms
- Subdomains for your user's marketplace
- Stripe Checkout for a beautiful, secure payment flow
- Securely delivering files with Signed URLs in Laravel
- Showing sales stats on a dashboard
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.