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

24. Showing the user's cart

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 now going to create a very basic cart page, look at how we're going to structure this so we can refresh the cart when things change and then we're going to output a very basic

00:10

list of our items and we'll refine that in the next episode. So to start with let's go ahead and create out a controller which we can hit to show our view. So we're going to make a controller in here and we're going to call that cart index controller

00:26

and let's go over to our roots and web file and let's add this in here. So we could just copy this one and add in get cart and cart index controller. Great! Okay so over in cart index controller let's make this invocable and we want to

00:45

return in here a view that's just going to be cart.index and we can go ahead and create that out now. So let's come down to where our views live, create out a cart folder and in here index.blade.php that is our cart. So we should be able to

01:02

access that now if we just head over to slash cart there is our cart. Now is that hooked up? Yes! So our cart page is pretty much going to look like our dashboard page with a header and then some content.

01:14

So we can just copy this over and just paste this into here and go ahead and add cart at the top for our header and then down here we are probably not going to need any of this so let's just stick with this here with the maximum width

01:30

and then this is going to be where all of our items show. So this is where our cart details show. Of course we've got our header. Now in here this is where we're going to create out a live wire component because ideally what we want to do is refresh

01:44

the entire cart when things change. This might not be the best solution right now. We can always change this later but what we're going to do is anytime anything in our cart changes we're just going to refresh the entire thing because inside of here is also going to be our

01:58

cart summary which will give us a total amount based on quantities. So let's create out a live wire component for this. Like I said we'll be keeping an eye on our query count. So let's do live wire make and we're just going to call this cart. So let's create that component out

02:13

and then in here let's say live wire and cart and we'll just leave it at that for now. So let's go over. Nothing changes because we've just got our empty live wire component in here but over in the live wire component for cart I'm going to paste in some pre-made

02:28

markup once again. This is basically just something on the left and something on the right so you can go ahead and grab these from the course resources if you're following it along. So that is the cart items section and this is the cart summary. Now the

02:40

margins here look a little bit weird. Don't worry about that just yet. That's just because when we go ahead and create this we're going to have a list of items and we're going to have a sort of negative margin at the top to account for the spacing

02:52

and we can always get rid of this rounded section as well just to make that look a little bit even. Okay so our goal now is to output the cart items that we have in our cart. Now at the moment we don't have

03:07

too many different items. We have two variations which is fine because they're both going to show up as separate products. So if we just come over to our product section for Nike Air Force One we've got two different variations essentially size eight

03:21

and size nine for black and white. So that will do for now. We can just add in the white ones and the black ones and see them both in the cart. So over in cart.php as in the live wire component this is where we want to pass down the cart itself. So we can just inject in

03:38

our cart interface here and we can just go ahead and pass that down to the component like so and we can just start to use it. So we can grab the contents of the cart out as we need them. So if we come over to cart.blade.php

03:52

we just dump out the cart in here. Probably won't work but let's just go ahead and try it. Yeah so it's just because it's a class so we could say cart contents and there we go. They are the contents of our cart. So we've only got one item in here at the moment.

04:08

Let's just add another one before we start to iterate through this. So let's come over to our product and we don't have anything in stock in white so we're going to need to go ahead and add a stock for that. Let's bump this up as well and we'll choose the variation

04:22

id size eight in white. So let's go back and let's add in white size eight and there we go. So now when we come over to our cart we've got two items up here. We have two products in our cart or two end variations. So we can start to iterate through them

04:39

now and just show some basic information about them just for now. So we already know how to do that. Let's grab cart contents and let's just create a for each loop in here to iterate over them and we'll just call that variation like so

04:52

and we'll end that for each just in there. So for this now we can just extract pretty much any information we want out of this variation. So we could grab the variation title. At the moment that's not useful on its own.

05:05

In the next couple of parts when we start to refine this we're going to traverse upwards to grab the end product and we're also going to go across each of the variations. So as you saw from the introduction the goal isn't just to show size eight without any other information because

05:19

that doesn't make any sense whatsoever. We're going to show size eight the color that we've chosen or whatever other variation we've chosen and then the end product as well in there. So we'll leave this as it is for now just to make things simple

05:33

but what we will do is create out a separate live wire component for each of our cart items. We're going to try and avoid creating too many nested components but in our case for each of the items that we create we need to do dynamic things like update the

05:48

quantity that we have chosen for this. So I'm going to cut this out of here. I'm going to go ahead and create another live wire component and we're going to call this cart item and then inside of cartitem.blade.php we can go ahead and pop that variation title

06:02

into there. Now for cart item if we just open up the live wire class for this let's go down and we know that we're expecting in a variation here so we can set that as a public property variation and that's pretty much all we need to do in here for now. So now

06:19

over in our cart class we can just say live wire cart item and we can pass the variation into there and we should be good. Let's go over and we shouldn't see anything different apart from the fact that we've got a div wrapping them now so they are on

06:35

two different lines. So we're now kind of outputting the products that we have in the cart. Let's go over to the next episode though and just refine this so we can output some more useful information mainly the overarching product title.

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

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!