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

43. Scaffolding the checkout page

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

So at the end of this episode, we're going to have the checkout page scaffolded out

00:04

and we're going to list all of the products that are in our cart and then we can move on to things like grabbing the cart totals, choosing shipping and all that other stuff that's going to bring our checkout together. So before we do anything, let's just head over to the database and we're going to go ahead and set this product back as live. Now to be able to get that back in here

00:23

properly, we're going to have to go and just re-index with Laravel Scout. So let's say scout import and of course app models and product and let's come over and there we go. So at the moment we did add some variations for this so we can technically add this to our cart which is great. Let's go ahead and find this Air Force One and we'll add one of these in here as well. So that

00:52

will be it for now. Now of course over on the checkout page at the moment we don't have anything so that's the page that we're going to be building and pretty much listing things out like we have here just in a very slightly different way as we saw from the introduction. So the first thing to do would be to create our controller for this so let's go ahead and make a controller. Let's call

01:11

this checkout index controller and once we're done we will head over to our routes and let's go ahead and just create this down here doesn't really matter for now. Call that checkout and checkout index controller. Great. So over to checkout index controller we'll just create an invocable magic method here and let's just go ahead and return a view in here and we'll just of course

01:39

call that checkout and for this we need to be authenticated so let's go ahead and add in our middleware here and we'll say auth. In fact we don't because we're implementing guest checkout so let's leave that out of there and let's just create our checkout page. So resources and views we'll just create checkout.blade.php. Won't bother putting that in a subfolder and for this we're

02:04

just going to have the same sort of scaffolding as we have before with the checkout at the top then we're going to have a checkout live wire component which we're going to be building here. So if we do head over to checkout now this is pretty much what we see and we're going to have the majority of this stuff inside of a live wire component because this is going to be pretty

02:22

dynamic we're going to be choosing addresses that we want to input of course processing our payment and all that other stuff. So let's go ahead and create that live wire component out now we'll go ahead and pull across a markup we'll go through it together and then we'll finish off by outputting a list of the products that are actually in our cart. So let's use live wire and make and we'll

02:41

just call this checkout and let's go ahead and add that in here live wire checkout now we don't need to pass anything through from here because we can access our checkout or our cart from this checkout component so we're going to head over to checkout.blade.php under live wire and once again I'm just going to go ahead and pull out some pre-built markup now there's a lot here so we're

03:04

going to go through this together let's just take a look at it really quickly and you can see here that we've got the account details here which will only be shown if the user is not authenticated if they are authenticated of course we're already going to have their email address we've got the ability to enter some shipping details here all of the form errors under here as well which we can of

03:22

course toggle and also an ability to choose a pre-saved address if the user is authenticated and does have pre-saved addresses and also the delivery option just here as well so you can add more to these later on but we'll just keep this really basic for now and then adding things later on it's going to be really simple same with shipping options as well of course down here

03:44

we've got our stripe card form which we'll be implementing later and then of course here we have the products that are currently in our cart with all the subtotals the total including the shipping as well and of course the shipping and the confirm order and pay button which will confirm the order and make a payment okay so let's just focus on this for now so we've got something out

04:05

here to start with if we just go through the markup again we've just got all of this information here have a really good look through we're not going to waste time building all of this markup up we've got our select boxes here that we built earlier and all of this stuff so have a really good look at that so we're going to go over to our livewire component which is checkout.php

04:24

and let's open that up and let's first of all just look at grabbing all of the products and iterating through them so for this we can keep it really simple and just go ahead and pull our cart in with our cart interface and we can just pass that down to our view so cart and cart and we can just use that to iterate through all of the products and out of the title so let's go ahead

04:46

and just look for formatted price and this is what we want to iterate through just here so this one so let's go ahead and say for each cart contents as product and let's go down and that for each and pull that in let's actually call this variation because we know that we've been doing that throughout the course that makes a lot more sense so of course as you would expect we have two

05:17

items in our cart because we've got two products in here let's go ahead and start with the variation image which we've already seen a couple of times already so let's say variation get first media url and then really importantly passing that thumb in let's choose the collection name first of all which is default and it's thumb 200 by 200 i think let's have a look and there we go there are two

05:42

products in there and the next thing to do is formatted price again all this stuff is pretty straightforward we'll just say variation and formatted price we'll do the title while we're here as well which is the product title remember so really importantly from the variation we go up to the product and grab the title let's go over give that a refresh and there we go two products

06:06

in the cart we just need to grab the quantity now and again we know that we've got that pivot in there so we can very easily say variation and pivot on that pivot table between the cart and the variations and then say quantity and that will tell us how many we have in that cart which is one of each at the moment let's just change one of them to two just so we've got a little bit more

06:30

in there and then we just want to go through our ancestors again so much like we did over here where we went through our ancestors and output the size the color whatever other variation types you have we can do exactly the same down here so let's go ahead and do a for each here on variation that's really annoying as well we need to grab the ancestors and self

06:54

remember because that includes the variation we're currently within as ancestor and we'll end that for each there and then we'll output the ancestor title so ancestor let's just pull that in and title and let's have a look great eight and black 12 and rainbow we know that's the case and we can either use css or just a quick if statement on that last object that we get

07:21

through when we do a for each loop so we can say if and let's just separate this loop and alert oh no not alert sorry last and end if and that should be if not last because we want to show that if we're not on the last one and if we head over there we go that will just about do for now so now as we're browsing through the categories adding products to our cart seeing

07:45

them in here and changing quantities we can finally go through to a checkout page where we can see very clearly the products we are about to order let's head over to the next part and before we get to the subtotal and the total we're going to work on displaying the available shipping options and being able to choose one of these

Episode summary

In this episode, we're setting up (or scaffolding) the checkout page for our store. First, we get our products ready in the database and re-index everything so the cart has some items to display. Once that's set, we dive straight into building the basic structure for the checkout page: creating a controller, adding a route, and generating the new Blade view file.

After that, we move things over to Livewire to take advantage of its dynamic features. The episode shows how we wire up the Livewire component, pull in pre-built markup, and explain what each section is for, like where users will enter their shipping details, choose delivery options, and eventually fill in payment info. We focus on getting the main layout done and displaying the products in the cart, showing their images, names, quantities, and any variation attributes (like size or color).

By the end, you’ll have a functioning checkout page that lists out all the products in your cart with their details, setting the stage for adding totals, shipping options, and payment in the next steps. This is a key foundation for making the rest of the checkout process work smoothly!

Episode discussion

No comments, yet. Be the first!