Listing shipping options: Build an E-Commerce Platform

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.

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

Episodes

Transcript

Episode summary

Episode discussion