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
48. Saving the shipping address

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, after we hit the confirm order and pay button and the payment and the order has gone through successfully, we want to go ahead and store the shipping address so it can be selected next time.
00:12
Now there's a couple of important details around this. The first one is, of course, we don't want to store this if the user is not authenticated like we are at the moment, unauthenticated, because obviously we can't attach it to anything. And second of all, we want to make sure that we don't store the same address more than
00:29
once. So, if we had an address like A, B, and C, we don't want that to be stored more than once if the user types it multiple times. So let's figure this out.
00:42
Before we do anything, of course, we don't even have a model which represents a shipping address. Now, with this shipping address, of course, we want to attach this to an order as well, so it's a really important part of our app.
00:54
So let's go ahead and make a model here and just call this shipping address and, of course, we will generate a migration. So let's head over to create shipping addresses table and let's fill in the information that we need.
01:11
Now, of course, this can be attached to a user. So let's go ahead and say foreign ID and user ID. However, we want to store a shipping address because we want it to be attached to an order for a guest, but if the user is not authenticated and we store the shipping address, there's
01:30
going to be no user to attach it to. So we want to make sure we include nullable and we're going to set a constraint on this just for database integrity and then we can just fill the rest of the information in. So we're going to have a string for the address and let's fill in the city and, of course,
01:50
lastly, the postcode and, of course, feel free to update this with any other information you need. Okay, let's go ahead and migrate here and then we're going to head straight over to the user model and we're going to add in a shipping addresses relationship in here.
02:12
So this has many and the user has many shipping addresses and then we're going to do sort of the opposite of this for the actual shipping address itself and we know that this belongs to a user. So the user here, we're just going to say this belongs to and, of course, pass the user
02:37
model in. Okay, so now what we can do is actually create a shipping address in the database over here at checkout and then we can potentially attach it to the currently authenticated user. Let's first of all look at uniquely creating a shipping address regardless of how many
02:54
times we type the same one in. So we're also going to assign it at the same time, really important because we want to attach that to our order. So I'm going to assign that, we'll just set this to null for now, we'll go ahead and create
03:09
our shipping address property up here and, again, that could potentially be protected but we'll leave it public for now and this is going to be the result of the creation of the shipping address. So we're literally just going to grab the shipping address model and we don't want to
03:29
just say create because if we do that then it's always going to create it. So instead what we're going to do is say first or create. So that will always get that back but it will only create it on a certain condition with things that match and we're just going to go ahead and pass into here the shipping form
03:48
because that matches up with what we have in our database. Let's just check out what happens when we run this. So we'll keep our database open under our shipping addresses. Let's just store one of these.
04:01
So let's just say ABC like we demonstrated earlier, click confirm and pay and, yeah, the email address is filled as required so let's fill this in. There we go, yeah, of course, we've already got an account and, yeah, so we just need to add some details to our shipping address or change this up so we don't protect it but
04:25
let's go ahead and just set the fillable columns in here explicitly. You could say unguarded as well but let's go ahead and just add these in, city and postcode. Great and let's come over and just try this again. Okay, so let's switch this over to Billy again and there we go.
04:48
So we should have created that over in the database and we have. Now if we click it again, let's come over and give that a refresh, you can see it has not been created a second time, really, really important. We don't want to just keep storing the same address over and over again in the database.
05:03
Now we're going to change this up a little bit later because we need to take our pre-selected addresses into account eventually but this is enough for now. Now if we are signed in, we want to assign this to the user. We can actually do this all in one line.
05:18
So I'm going to go ahead and just wrap this in brackets so we can start to chain onto it and that is going to be a conditional user on this and then going ahead and associating the currently signed in user and then going ahead and saving it. So bear with me.
05:42
We'll go ahead and sign in and see how this works. So let's go ahead and log in and let's go over to our cart, hit checkout and let's do A, B and C, hit confirm order and pay. If we come over to the database now, you can see that has now been assigned to that user.
06:03
Now once again, this isn't perfect at the moment because we need to take into account the pre-saved addresses but if I just switch this up to say C, D, E and click confirm, that's also going to create the address and assign it to my user as well and this looks good.
06:19
Now there is one issue we need to fix up before we do anything. If we just take a look at our other users, we don't have any at the moment so I'm just going to go ahead and create another user in here just so we can demo this out. So let's save this.
06:33
So let's say Billy, completely unrelated to Alex and they have an address C, D, E. What's going to happen when I enter the same address? Well, the way that we've got it set up at the moment, it's going to look up this address and assign it back to me.
06:50
That's not what we want. We're effectively stealing someone else's address. If we click on this, you'll see what I mean. That's just switching it back to my user and then it will have disappeared from Billy's
06:59
account. So ideally what we want to do in here is have a little where condition. So we're going to say where belongs to and auth user and let's try this out. So let's go back to, set that to two, hit this again, come over.
07:20
That's not done anything. It's just recreated a second address attached to my ID. So that's a much better solution so we don't just swap user IDs around for each of the addresses.
07:31
And all of this is done in one line. It could have been done in a couple of lines. I just like doing things like this. Just makes a little bit more sense to me to sort of do it all in one thing, but feel free
07:40
to chop and change it around if you want to. Okay. So we'll tweak this a lot a little bit later. It's not perfect at the moment because like I said, we need to take into account a pre-saved
07:49
address as well, which we will do. That is for now storing a user shipping address, attaching it to a user if they are signed in and of course just saving it so we can eventually attach it to an order if they're not signed in.
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!