This episode is for members only

Sign up to access "Build an E-Commerce Platform" right now.

Get started
Already a member? Sign in to continue
Playing
46. Validating the account form

Episodes

0%
Your progress
  • Total: 8h 42m
  • Played: 0m
  • Remaining: 8h 42m
Join or sign in to track your progress
01. Introduction and demo
9m 42s
0%
02. Installing Laravel, Breeze and Livewire
4m 47s
0%
03. Creating categories
9m 4s
0%
04. Recursively displaying categories
8m 21s
0%
05. Product model and migration
2m 50s
0%
06. Showing a product
7m 50s
0%
07. Product variation setup
10m 26s
0%
08. Creating the product selector
10m 34s
0%
09. Loading child variation dropdowns
4m 28s
0%
10. Faking adding the final variation
9m 33s
0%
11. Setting up product stock
4m 34s
0%
12. Calculating variation stock levels
9m 1s
0%
13. Adding product images with MediaLibrary
8m 50s
0%
14. Creating the product gallery
7m 28s
0%
15. Providing a fallback image
2m 56s
0%
16. Adding media to product variations
3m 37s
0%
17. Creating the cart model
3m 37s
0%
18. Registering the cart service
6m 34s
0%
19. Creating a cart session
11m 4s
0%
20. Showing the cart in the navigation
9m 19s
0%
21. Caching the cart instance
3m 2s
0%
22. Adding items to the cart
14m 1s
0%
23. Creating the notification component
8m 5s
0%
24. Showing the user's cart
6m 50s
0%
25. Outputting cart items
4m 50s
0%
26. Showing variation specifics
8m 8s
0%
27. Updating item quantity
8m 2s
0%
28. Removing an item from the cart
6m 1s
0%
29. Calculating the cart summary
8m 7s
0%
30. Showing the category products page
5m 1s
0%
31. Indexing products in Meilisearch
8m 32s
0%
32. Hooking up products to categories
4m 15s
0%
33. Building the product browser
13m 32s
0%
34. Showing child categories
1m 51s
0%
35. Indexing product variations for filtering
8m
0%
36. Outputting variations for filtering
12m 52s
0%
37. Hooking up product filters with Livewire
7m 48s
0%
38. Filtering products
12m 24s
0%
39. Filtering by price
9m 50s
0%
40. Adding global navigation search
7m 50s
0%
41. Handling products that are not live
3m 22s
0%
42. Price range category fix
1m 18s
0%
43. Scaffolding the checkout page
8m 6s
0%
44. Listing shipping options
9m 3s
0%
45. Calculating the cart totals
2m 52s
0%
46. Validating the account form
9m 10s
0%
47. Validating the shipping form
5m 47s
0%
48. Saving the shipping address
8m 4s
0%
49. Selecting a saved shipping address
6m 39s
0%
50. Fix shipping address error for non authenticated users
1m 7s
0%
51. Redirecting if the cart is empty
2m 42s
0%
52. Checking for quantity changes
7m 11s
0%
53. Syncing if quantities have changed
11m 59s
0%
54. Flashing a message when quantities have changed
5m 48s
0%
55. Setting up for orders
5m 17s
0%
56. Creating an order
13m 24s
0%
57. Attaching variations to order
6m 13s
0%
58. Reducing stock after ordering
2m 56s
0%
59. Meilisearch filter query fix
1m 33s
0%
60. Showing the order confirmation page
7m 39s
0%
61. Attaching orders for registering guest users
5m 17s
0%
62. Scaffolding the orders page
5m 30s
0%
63. Filling in order variation details
5m 24s
0%
64. Returning the order status
4m 39s
0%
65. Detecting order status changes
10m 49s
0%
66. Sending the order status change email
5m 12s
0%
67. Sending an order confirmation email
2m 47s
0%
68. Handling deleted cart records
4m 44s
0%
69. Transferring the guest cart
2m 44s
0%
70. Creating a presenter for the order status
4m 31s
0%
71. Setting up Stripe
3m 43s
0%
72. Creating and updating a PaymentIntent
16m 21s
0%
73. The Stripe card form
3m 35s
0%
74. Validating before payment
5m 34s
0%
75. Submitting a payment
6m 40s
0%
76. Checking for a successful payment
5m 47s
0%
77. Handling Stripe client errors
3m 11s
0%
78. Entangling Stripe customer data
2m 18s
0%

Transcript

00:00
So we're now going to focus on validating this email field, which sounds really easy, but we have to think about this in terms of whether the user's signed in or they're not
00:08
signed in. So we're going to tackle that first of all and just come over to the checkout template. And at the top here under account details, we're not going to need this at all if the user is signed in. So we can actually just go ahead and wrap this in a guest directive. So let's go ahead and end that directive there and pull that in. And at the moment,
00:30
we are signed out. So we see it, which is great. But as soon as we sign in, that's going to disappear. Now we can go ahead and validate this and say that it's required. But if we hiding it for a user that signed in, then surely is not going to be required because we're already signed in. So let's go ahead and just figure this out and how we're going to bind it in inside of our
00:52
component. And then we'll figure out the validation rules around that. So this is our input. We've got our validation error just down here, which we'll test out. Let's head over to checkout and we're going to create an array just up here and kind of separate out all of the sections here. So we're going to have our account form completely separate just to make things a little bit easier
01:12
to manage. And we'll go ahead and pre-fill this with just an empty string for the email. Now, if we come over to checkout, we can go ahead and use wire model in here. And we can really importantly defer this because we don't want to send a request through to Livewire for every single key we type and just say account form and email. Great. So that's all hooked up. Let's just make
01:34
sure this is hooked up by just going ahead and outputting the account form just up here. And yeah, of course, we just need to do a print R on this. And let's give that a refresh. And let's just type something. Now, at the moment, because we've deferred this, we're not actually going to see any value in here until we submit this. So just while we're testing this, why don't
01:54
we just create out a checkout method and just do nothing. And then over in checkout, let's go up here and say wire submit. And I think we're going to need to add prevent in there. And we'll just say checkout. And let's go over. Let's type our email in. Let's hit this. And there we go. So that now comes through, of course, because we have defer on there. So we're not making too many requests
02:23
to our back end. OK, so let's come down to where our account form is just here. And let's think about the validation for this. So there are lots of different ways that we can define validation out within Livewire. Let's just look at a really simple way of defining out a rules method. Now, I always tend to reach for a method because if, for example, you want to start adding custom
02:49
objects in here, like you had some sort of rule that you wanted to create, it's much easier if this is a method to start with rather than a property. You can define these as properties if you want to. So a much easier way is just to have a rules method that returns an array. So for account form.email, what are the rules we want to reply here? Well, we want this to be
03:09
required. We want this to be an email address. We want this to be a max255, for example. And really importantly, we want this to be unique to the users table because if the user is a guest and they're trying to use an email address that's already registered, we want to send them a very specific message and tell them they need to sign in. Of course, that's completely up to you, but
03:31
it makes more sense. So for this rule, we're just saying that it's unique on the users table for the email column. Now, if we just go and copy this just to keep things simple, we're going to create another method in here, which is going to contain the validation attributes to name these properly. In fact, let's use a method. Let's use a property for this
03:54
because I don't think it really matters too much. I'm just going to pop this up here. So this is going to be a validation attributes property. And we just define it in the same way. So account form email. What do we want this to be called? Well, we just want it to be called email address. And we can be a little bit
04:14
more specific with some of the other fields. So when we do show errors, it makes a little bit more sense. And then what we can also do is customize the validation messages, which is pretty important specifically for this unique account form email. So let's go ahead and say messages. And for this, for the unique rule, we want to say something like, in fact, I'm going to pull the copy over
04:36
that I have in my notes. And since you already have an account, please sign in to place an order. OK, great. So let's go over to our checkout page. Let's wrap this in our error check. So we're just going to say error account form email. And we can go ahead and end that error here. And in here, we can grab the message that's given if this is wrong. And that's just a single.
05:04
OK, so let's go over. Let's hit confirm. And it looks like at the moment that's not showing anything. Ah, we didn't call validate. That would help. So let's go ahead and actually explicitly call validate before we go ahead and create an order, process a payment, any of that kind of stuff. And there we go. The email address field. This is the attribute that we gave it is required.
05:27
If I go ahead and type in my email address, which I think is already registered. There we go. It seems like you already have an account. Please sign in to place an order. OK, so now we're going to head over and actually log in. So let's sign in with that account and let's see what happens. So we'll go over to our cart. Remember, the cart's transferred automatically here.
05:47
And if we check out, we don't see that information. But when I click, let's just die dump something so we can see that we're progressing past our validation. So let's just say create order. And let's come over. And nothing's happening. So obviously, the validation here is failing. But we obviously don't need to enter an email address because we're already
06:09
signed in. So there are a couple of ways around this. You can create a specific rule for this to ignore the email address if the user is signed in. That is, however, a little bit too complex. The easiest thing to do here would just be to pre-populate the email address here if the user is already signed in. So let's just go down to mount and just make this incredibly simple.
06:36
And down here, we're going to go ahead and grab the user at the same time. As not checking it, we can just grab the user. So we're kind of checking in this if statement and assigning it at the same time. And if that's the case, let's go ahead and assign the email in the account form to that user's email address. Great. So rather than a complex
06:59
validation rule, which doesn't really make sense because that's hidden, we can just go ahead and pre-fill it. When we click on this, we should see that we're checked out. Let's give that a refresh. And yeah, it's not working. So let's have a look here. Let's die dump on this user to make sure we actually have a user. And we do. So that should be being filled. And yeah, I think, yeah, okay.
07:24
So the reason that this is not working is because we've got this unique rule in here, but we're not excluding the currently authenticated user. Now to do that, just to give you a preview, if we just head over to users, my user ID is one. So what I could do is just do comma and one, and that would ignore that. So if we come back over and hit this, you can see it works and we can create an order.
07:46
But for this, we need to make this a little bit more dynamic. So what we can do is just concatenate onto the end of this, a quick check, auth user. And if that's the case, just do a comma. And if that's the case, just do a comma and then concatenate on the auth user's ID. Again, this is getting a little bit long, otherwise just an empty string. So basically, if the user is
08:09
signed in, output a comma with their user ID. And there's a load of different ways we can do this. We could pull the unique class in, which would probably be a little bit tidier. But let's get this working first of all. So there we go. We can create an order. That's great. And if we just go ahead and log out real quick, and of course, that's cleared out our cart, so we can fix that
08:29
up later. Let's go and just add another item to our cart and checkout. And let's enter my email address again, just to make sure that unique rule is still working. And there we go, it is. So for something that seemed pretty simple at the start, actually a little bit more complex, because we have to deal with two different states, the user being logged in and logged out.
08:51
But that is now our account details section done. And of course, you can add more details to that if you need to collect any more information from guests like their first and last name. Feel free to go ahead and add that information. Next, let's move on to validating our shipping form before we go ahead and pre-save addresses.
78 episodes8 hrs 42 mins

Overview

Build a robust e-commerce platform with a Laravel and Livewire. Features products with unlimited and flexible variations, a product browser with filters and price range slider, global product search, guest checkout, shipping and payment implementation, order status tracking and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!