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
47. Validating the shipping form
Episodes
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 let's go ahead and validate the shipping form just here. We're going to ignore the pre-saved address for now,
00:05
and we're going to store that in the next episode. But at least we'll go ahead and get the address, the city, the postal code, and we're going to include delivery in this just to make sure that the delivery type is valid,
00:17
because, of course, that can be modified. So the first thing to do really is just hook this up. So let's go over to our shipping section. And like I said, we're going to ignore the pre-saved address
00:26
for now. For the address itself, let's figure out where we're going to store this just with wire model. And again, really importantly, make sure we defer this
00:35
so we're not sending a request down to LiveWire or through LiveWire every single time we type. I'm going to copy this as well so we can apply it to our city.
00:43
So we're just saying address. Let's actually prefix that, because remember, we want to have some sort of form array. So let's say shipping form.address.
00:54
That makes sense. And we'll do the same thing for the city. Say city. And I've purposely just included a few things in here
01:04
just to keep things simple. So that's going to be postcode. And let's change that up as well, postcode. In fact, we don't really need the name.
01:15
Or we need the ID, so let's change that to postcode. Postcode, so that makes sense. And make sure these are hooked up as well. City, and change that to city as well.
01:28
And that one should just be address. Great, OK, so these should all be hooked up nicely. OK, so for the errors, these are pretty straightforward. They're just going to look like this.
01:40
So we may as well add these in here now. So that's going to be shipping form address. And let's copy this. This is going to be shipping form city.
01:56
And this is going to be shipping form postcode. Now, of course, once we're done, you can include as much information if you need, or as you need from the user in this form.
02:06
OK, so let's go and just start to validate this over in Checkout. So under our rules array that we're returning from here, let's say shipping form address.
02:18
And again, we're going to keep this really simple. Just say it's required. And we'll say a max of 255. So for this city, we'll do the same.
02:30
And for the postcode, we'll do the same as well. OK, so let's go over and just hit Confirm Order and Pay. And yeah, of course, we didn't actually create the array up here.
02:41
So let's do that now. So this is our shipping form. And remember, we've got address in here, city, and postcode. Great.
02:54
OK, let's go over, give that a refresh, click on here. And there we go. We've got all of these errors in here. Now, at the moment, they look a bit odd
03:01
because it's the shipping form dot city filled as required. Not great for users. So what we can do is we can change around the validation attributes.
03:10
So let's do that now. So we've got shipping form address. And of course, we can just call that something really simple, like shipping address.
03:21
And same for the city as well. City. And the same for the postcode. Let's change postcode to shipping postal code.
03:33
And let's try the errors again. And there we go. That kind of makes a little bit more sense for the user. Now, you could further customize these if you want.
03:41
We won't do it here. But you could change the messages around for this. We've already seen this in action here. So for example, if you wanted this to be a little bit
03:50
or make a little bit more sense, say, shipping form address required, you might want to say something like your attribute, which is what we defined here.
04:03
So your shipping address is required. That makes a little bit more sense than the shipping address field is required. So you can see now that when we submit this through,
04:13
your shipping address is required. So we'll leave that one in there just to demonstrate this attribute placeholder. But for the rest of them, feel free to go ahead
04:21
and add them in nicely. OK, so we've got all of the standard fields validated. What about our shipping type? Now, if we just come up here, we know
04:34
that we've got shipping type ID stored as a public property, which means we can validate it. So under our rules, we can just normally say shipping type ID. So that's passing the ID through.
04:48
We can say this is required. And we can say exists within the shipping types table. And although you don't need to explicitly define this, that is an ID.
04:59
So now if we try and modify this in any way, so let's just try and do this. And let's change the second one to an ID of 10, which, of course, doesn't exist.
05:10
And we choose that. Not only are we going to get an error, but when we click through here, it's not going to work. We don't have any error messages under here,
05:17
but that's just not going to allow that to go through. So it is now at this point that once we have entered all of the information which we need, which for the purpose of this course
05:27
isn't that much information, it's just the email address and the shipping address, city, and postal code, when we click this, we want to go ahead and store that in the database.
05:36
And we are going to store the shipping address first to get this down before we start to create an order. So let's head over to the next episode and look at storing a shipping address.
78 episodes•8 hrs 42 mins•3 years ago
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!