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
44. Listing shipping options
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
We're going to keep shipping types really simple and just have a flat list of shipping types with a fixed price associated with each one. If you wanted to later, you could go ahead and update this
00:10
based on any kind of weight or dimension. But for now, we'll just keep things as simple as we can to get started. So we're going to go ahead and create our model.
00:19
And this is going to be shipping type. We'll create a migration, of course, alongside of that as well. So we can go ahead and add this to the database
00:27
and fill these in. So create shipping types table. Let's head down, and let's just attach some simple information to this.
00:34
The only thing we really need is a title here. And of course, you could add more information. And really importantly, we need a price, which again, will be stored in pence.
00:43
So we'll be using the pence value for that and formatting it in a very similar way that we've been doing with our variations. So let's go ahead and migrate the changes here.
00:53
And we can just fill in a couple of really simple example shipping types. So let's just say UPS standard in here. And in fact, let's do a free option and set that to zero.
01:07
Kind of makes sense. And let's go ahead and duplicate this down and just do standard. And set that to say 2,000.
01:19
I think that'll be enough for now. Now, the good thing about this is a little bit later on, what we could do is we could attach shipping types to different variations.
01:28
So you might have shipping types that are explicitly only available for certain variations. And this would actually be quite simple, because instead of just accessing the shipping
01:38
types directly from the database, you would just access them via the variations. So you could do that a little bit later. But again, we're just going to keep things really simple
01:47
for now, just kind of thinking out loud. OK, so we're going to get them into this form and iterate through them. How are we going to do that?
01:55
Well, over in checkout component here, we can just very simply pass these down as shipping types. And I'm just going to pull these out of the database really, really simply by saying shipping type and get.
02:05
And we could order these by the price, maybe. So let's order these in ascending order by price. So of course, the cheapest will be at the top. OK, so just making sure we've got that model pulled in,
02:18
let's head over to our template now. And let's go over to the shipping type section, which is just here. Well, no, it's down here.
02:26
And let's go through and iterate over them. Shipping types. Shipping types as shipping type. And end that off.
02:39
Pull that in. And let's output the title of this. So shipping type title. And let's go over.
02:48
And there we go. You've got UPS free, UPS standard. Now, we need the price of this. Once again, what we can do is just
02:55
lean on something we've already got. And we really should move this over to some sort of trait. But that's the formatted price. So we're just going to go ahead and grab this,
03:04
go over to the shipping type model, and just put this into here. So it pretty much does exactly the same thing, just formats the price for us.
03:11
And then in here, of course, what we can do is just go ahead and say shipping type formatted price. And that's going to give us out the dollar value of that shipping option.
03:22
OK, now we want to hook this up to our component. Because obviously, when we hit that checkout button, or even before that, when we start to calculate the total, we need to know which shipping type we have chosen.
03:34
So inside of here, we're going to set the value of each of the options we're iterating through to the shipping type. And let's just use the ID for now.
03:45
And then we're going to hook the select up with a wire model to shipping type ID. Now, the reason that we're doing this is now what we can do is create a computed property within LiveWire
03:56
to look this up in the database by the ID. And then we've got all of the information we need about it. We don't need to directly just sort of bind all this data to this property.
04:06
So let's grab shipping type ID, come over to our checkout component, and just put this at the top as a public property. So public shipping type ID, and it's in there.
04:16
So now what we can do is if we just head over to checkout, maybe just above this, let's output our shipping type ID. And let's just see what happens when we change this around. And sure enough, that changes for us.
04:29
Now you'll notice that when we refresh this, when we first land on this page, nothing is hooked up. So what we should really do is over in our checkout component when we mount this by default, choose the first option.
04:42
So let's go ahead and implement the mount method here. And then let's set the shipping type ID to this shipping types, which we don't have at the moment, which we'll get around first and ID.
04:55
There are probably easier ways to do this, but let's go ahead and leave it like that for now. So we don't have this at the moment because we're doing this directly down here
05:03
and grabbing all of our shipping types. So let's also reference this shipping types in here. And then let's go up and do this here. So this shipping types,
05:16
and set that to what we get back from the database. So grabbing all of the shipping options from the database, setting the shipping type ID to the first one. And then of course, going ahead and referencing
05:25
the overall shipping types that we've grabbed when we mounted this component. That kind of makes more sense because the render method is gonna be updated
05:33
every time we hit the LiveWire component through the backend. So it means that we're not repulling these out of the database every single time.
05:40
Now for the shipping types property, we're gonna wanna make that protected. The reason being is that we don't wanna serialize this or do anything with this whatsoever
05:47
when this comes through to the client. So you can see now that we've got one selected by default, but it still works by changing this over. Now this doesn't, and I have a feeling
05:57
this is because we set this to a protected property. I think this, yeah, this will work as a public property. So yeah, if we change that now. Yeah, so the reason that that didn't work
06:06
is when this is protected, LiveWire doesn't know about it on the client side, so it can't refresh this information. So by setting that public, that's absolutely fine.
06:14
And technically what we could do is instead of passing this down here, we could now, just to clean things up a little bit, just say shipping type to shipping type,
06:26
and that will be still picked up by LiveWire because it's automatically shared with our component. So let's get rid of the shipping type ID here. What we want to do now is when we do choose an option,
06:38
grab this option from either the database or that existing collection. So we can show the shipping over here. So let's fill that in now actually,
06:46
because just showing the shipping over here isn't too much trouble. So what we're going to do is create a computed property out in here.
06:53
So let's go ahead and say, get shipping type, not shipping type ID, and that's going to be property on the end. So we actually create a property from that.
07:03
And for now, let's just go ahead and return this shipping types and first. So let's just see what we get when we try and access the shipping type property within our checkout.
07:14
So let's go over to the place where we're actually going to use this. So let's find shipping type. That's just here.
07:19
And let's just dump it down here. So we're just going to dump out this shipping type with a lowercase S and see what happens. So if we give that a refresh, there we go.
07:28
We get UPS free. If we change this around, nothing's going to happen because we're not dynamically changing this. But now what we can do if we come over to checkout
07:36
is we can find this based on the shipping type ID. So although this is a Laravel collection, we're not relooking this up in the database. Technically, what we could do now is say find
07:46
because find does exist on a Laravel collection. And we can go ahead and say this shipping type ID. So every time we change that shipping type ID, this computed property will give us back
07:56
the shipping type that we need. So now what's going to happen is over here, when we change this, we get a different shipping option output here.
08:04
And then from here, we can just extract the information that we need. So we know that in here for the actual shipping type, we can just output this shipping type title.
08:16
So if we come over, that starts off as UPS free, but then changes over to UPS standard. And of course, we already know that we've got that formatted method in here.
08:25
So let's just get rid of them curly braces and say shipping type formatted price. And we should be showing that. So at the moment, of course, it's free.
08:35
As soon as we change that over, we get $20. So really, really simple with Livewire to have this output to a form from the database, and then just go ahead and update this in a different place
08:45
using the entire model so we can grab all of the information that we need. Later, of course, we'll be adding this to the total, which is added onto the subtotal,
08:56
and that will include the price that we pay. But there we go. There are our very simple shipping options and updating these in our checkout.
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!