Selecting a saved shipping address: Build an E-Commerce Platform

00:03

we should be able to see them in this list. Click on them. No longer see this because, of course, it doesn't make sense to click on this

00:10

and then show the address. Or we could pre-populate the pre-saved address into these so it could be modified. And that should be it.

00:18

We should just be able to pre-select a saved address. So we already have the relationship set up in our user model, the shipping addresses. So we can just very easily access this.

00:29

Now I'm going to go ahead and create out a computed property within LiveWire to do this. So let's say getUserShippingAddresses property. That's purely just so we can reference this conveniently

00:43

within this component if we need to pluck one out. I'm going to go ahead and say auth user. But be really careful because, remember, the user's not always going to be signed in.

00:54

And we're going to say shipping addresses like that. Let's just make sure we spelled that correctly. Yeah, we did. OK, so now we can use this userShippingAddresses property

01:04

to list through these over in our checkout. So let's go and say pre-saved address. Great. And we're going to go ahead and iterate through these.

01:15

Now this one here should be disabled for each this userShippingAddresses as, let's just call this address, and that forEach. And then here, we want to show that address.

01:33

So let's just show part of the address. And then we'll create a little helper to format this so we can see it nicely. So let's just say address, address.

01:41

And then for the value here, let's say address ID. OK, let's go over and check this out. And of course, we have A and C, which are the two that we have stored.

01:50

Of course, they're not great. So we want to show these a little bit better. So if we come over to our shipping address model, let's create out a little helper in here

02:05

that's going to give us the formatted address. So all we want to do here is just combine all of the addresses we've got. A couple of ways we could do this.

02:15

We could use sprintf if we wanted to. And in here, we could use something like s, s, s. And then in here, we could pass an array of the values. So we could say this address, this city, and this postcode.

02:40

Or if you want to, you could just concatenate this together. I'm going to leave it like this because it's a little bit neater.

02:45

So let's grab the formatted address here. Go over to checkout. And instead, call that formatted address method. And four arguments are required to given.

02:54

Let's just have a look here. So of course, we passed an array in here when what we should be doing is just passing these values directly in.

03:05

So we'll leave it formatted like this so it makes a little bit more sense. OK, so now you can see that we've got a, b, c, c, d, e. Of course, these aren't real addresses,

03:14

but this will do for now. Now, choose a pre-saved address isn't selected at the moment. That's because I disabled it. Maybe that's not the best option.

03:24

Let's just get rid of that so we have this selected by default. OK, so let's wire this up to a property in Livewire. So this overall select will say wire model. And let's call this user shipping address ID.

03:43

I think that will do for now. So we've got a value in here. We've got this wired up. Let's go over to Checkout at the top.

03:51

And let's create this out here. What we can do is watch for this changing. And then when it does change, we can pre-populate the shipping form so that goes into the shipping form.

04:03

Then what we do is get the benefit of being able to modify that if we need to. Or we could just hide all of this if one of these is selected.

04:11

We'll decide in a moment, but let's go ahead and look at pre-populating the shipping form when this changes. So to watch for a change on this,

04:18

let's go all the way down here. And we're just sort of creating these in random orders at the moment. We're going to say updated user shipping address ID.

04:28

That now becomes a Livewire hook. So let's die dump on ID and see what we get. So let's come over. There we go.

04:39

That's ID of one, and that's ID of three. So we are now die dumping on that. When that changes, that's not what we want to do. The first thing we want to do is if the ID is null or empty,

04:51

we just want to return. That will be if we're here and we go back to choose a pre-saved address, because then we don't want to do anything.

04:57

And then otherwise, we're going to go ahead and set the shipping form to the details from that address. Now, we can leverage the user shipping addresses property so we don't have to replug these out of the database.

05:13

So we're going to say this user shipping addresses. And let's just match that up. Yep. And we can say find again on that collection find ID.

05:24

And then what we can do from this is say that we only want certain fields to assign to shipping form in this array. So we'll just say address, city, and postcode.

05:36

So now when this changes, as long as it does have an ID, all of them details are going to be set from the particular record we're choosing in this collection. So let's go over and let's choose this.

05:47

And there we go. And there we go. So I think we can leave it like this. I think it makes a lot more sense

05:52

to be able to click on this and then potentially modify this if we need to, because you might have a very slight variation on an address. Or if you want to, you could hide that with an if statement.

06:03

It's entirely up to you. But we'll leave it like it is for now. So let's just play around with this. Let's go ahead and create our ABC.

06:09

But let's say the first letter is now X. Let's click Confirm Order and Pay. And let's come over to the database. And we know that that should have created a new record

06:17

because we have an update to that. And if we choose a pre-populated one like CDE and click Confirm, that shouldn't be created again because it already exists

06:28

and it is attached to that user. So that's working really nicely. And we now have a pre-populated shipping address option here, which is going to save the user a lot of time.

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

Episodes

Transcript

Episode summary

Episode discussion