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

44. Listing shipping options

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

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•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.