Build an E-Commerce Platform

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

47. Validating the shipping 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

02. Installing Laravel, Breeze and Livewire

03. Creating categories

04. Recursively displaying categories

05. Product model and migration

06. Showing a product

07. Product variation setup

08. Creating the product selector

09. Loading child variation dropdowns

10. Faking adding the final variation

11. Setting up product stock

12. Calculating variation stock levels

13. Adding product images with MediaLibrary

14. Creating the product gallery

15. Providing a fallback image

16. Adding media to product variations

17. Creating the cart model

18. Registering the cart service

19. Creating a cart session

20. Showing the cart in the navigation

21. Caching the cart instance

22. Adding items to the cart

23. Creating the notification component

24. Showing the user's cart

25. Outputting cart items

26. Showing variation specifics

27. Updating item quantity

28. Removing an item from the cart

29. Calculating the cart summary

30. Showing the category products page

31. Indexing products in Meilisearch

32. Hooking up products to categories

33. Building the product browser

34. Showing child categories

35. Indexing product variations for filtering

36. Outputting variations for filtering

37. Hooking up product filters with Livewire

38. Filtering products

39. Filtering by price

40. Adding global navigation search

41. Handling products that are not live

42. Price range category fix

43. Scaffolding the checkout page

44. Listing shipping options

45. Calculating the cart totals

46. Validating the account form

47. Validating the shipping form

48. Saving the shipping address

49. Selecting a saved shipping address

50. Fix shipping address error for non authenticated users

51. Redirecting if the cart is empty

52. Checking for quantity changes

53. Syncing if quantities have changed

54. Flashing a message when quantities have changed

55. Setting up for orders

56. Creating an order

57. Attaching variations to order

58. Reducing stock after ordering

59. Meilisearch filter query fix

60. Showing the order confirmation page

61. Attaching orders for registering guest users

62. Scaffolding the orders page

63. Filling in order variation details

64. Returning the order status

65. Detecting order status changes

66. Sending the order status change email

67. Sending an order confirmation email

68. Handling deleted cart records

69. Transferring the guest cart

70. Creating a presenter for the order status

71. Setting up Stripe

72. Creating and updating a PaymentIntent

73. The Stripe card form

74. Validating before payment

75. Submitting a payment

76. Checking for a successful payment

77. Handling Stripe client errors

78. Entangling Stripe customer data

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.

Episode summary

In this episode, we're focusing on validating our shipping form. We're skipping the pre-saved address functionality for now (we'll get to that in the next episode), and we're making sure that users provide all the required information: address, city, and postal code. We also include the delivery/shipping type to ensure it's valid and hasn't been tampered with on the frontend.

You'll see how to set up form fields using Livewire's wire:model.defer so updates don't bombard the server with requests on every keystroke. We go through wiring up each field (shipping_form.address, shipping_form.city, and shipping_form.postcode) in our form, and make sure they're properly hooked up in our Livewire data structure.

We then create basic validation rules in the component: each field is required and has a reasonable maximum length. You'll see validation in action, with error messages displaying below each input. To make error messages clearer for users, we customize validation attribute names so the feedback is user-friendly (like "Your shipping address is required" instead of technical field names).

Finally, we add validation for the shipping type to ensure the selected option actually exists in the database. We show how trying to submit an invalid shipping type is prevented. By the end of this episode, our shipping form checks all the main fields and provides solid error feedback to the user.

In the next episode, we'll move on to storing the shipping address in the database.

Episode discussion

No comments, yet. Be the first!