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

49. Selecting a saved 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

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

Now that we are signed in and we have saved a few addresses,

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.

78 episodes•8 hrs 42 mins•2 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!

Comments

No comments, yet. Be the first to leave a comment.