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

25. Outputting cart items

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 let's fill in the markup for our car item. So if we head over to car item, again, I'm going to go ahead and paste in a load of markup here. This is quite a lot, but pretty simple.

00:09

We've just got an image. We've got the formatted price of each item, the product title, the variation ancestors. So eventually, we want something like white slash 8 slash.

00:20

And we could have even a customization option after that. It doesn't really matter. But we want to show every single detail about the variation that the user has selected.

00:28

And then down here, we've got a quantity dropdown. At the moment, all of this is hard-coded to 1. We'll be updating that. And then just a Remove button, which will

00:37

delete the item from the cart. So if we come over now and give that a refresh, we end up with something that looks like this for each of the items in our cart,

00:45

again, with that dropdown and that Remove button, which at the moment doesn't do anything. OK, so let's start out with the product image. We already added images for each variation

00:56

earlier on in the course. So we know that for a variation, we can do pretty much what we did with our main product because we have the media library

01:07

package attached to this. So we're going to go ahead and say variation, get first media URL. And we're going to pass in the collection, which

01:19

is just our default collection. And really importantly, that thumbnail that we generated when we uploaded that media. So that was thumb 200 by 200.

01:28

And again, if you need a reminder, if you just head over to your variation model, we know that down here, we registered that media conversion just here when we added that items, them items.

01:38

So now that we've added that in, let's just give that a refresh. And there we go. We've got our white shoe and our black shoe here. Of course, not much information on any of these

01:47

just at the moment. Now, just going to keep an eye on our queries as well. So that doesn't look too bad at the moment. We'll monitor that as we go.

01:56

Let's go over and look at our formatted price. So over in our variation model, we know that we already have a formatted price. Let's just search for that.

02:04

And there we go. It's just using that money library and grabbing the price for the individual variation that we've created.

02:10

So that's really easy. We just say variation, formatted price, and we're done. That's going to go ahead and show us $90 for each of these because both of these variations have exactly the same price.

02:21

Now, for the product title, let's just head over to our variation model and make sure we hooked up a product relationship. And we did.

02:30

So we can just access this product overall product relationship and grab the title out because remember, each of our variations is hooked up to the base product that we have over here.

02:42

So we can easily show that this is a Nike Air Force 1. So in our product title, we just want to go ahead and say variation, product, and title. And that should show us Nike Air Force 1.

02:56

Great. Now, the variation ancestors is a little bit more complex. We will cover that in the next episode. But let's go ahead and iterate through the quantities,

03:05

so the max quantity that we can actually update that to. And before we do that, let's go over to our stocks and just change that to 5 just so we've got a little bit of difference in both of these end

03:18

variations. OK, so let's go down to our quantity. We want to basically iterate through and show this option for every single quantity that we have

03:28

or max quantity that we actually have. So in here, we're going to go ahead and create a for loop, not a for each loop. We're going to start the quantity at 1.

03:38

We're going to go ahead and say while the quantity is, if we just get rid of that extra dollar, less than or equal to the variation stock count, so the maximum stock count that we actually have.

03:49

And we want to increment the quantity for every single loop. So we'll just say plus plus. So now if we end that for loop here and we come over, what we should see is 5 for this white shoe and 10 for this one.

04:04

Now, in terms of user experience, there are probably better ways of assessing quantity. But we'll just keep it really simple for now. So the value for each of these is just

04:12

going to be the quantity digit that we have in here. And the display is, again, just going to be the quantity digit that we have inside of here. So let's just get rid of that.

04:23

And if we come over, now we can choose five of these to add to our cart. And this will be a sort of hook within LiveWire to automatically update that quantity.

04:31

And the same for this as well. We can choose a maximum of 10 because there are currently 10 in stock. And that is it.

04:39

So we're going to go over to the next episode and focus on the variation ancestors. Show these out so we've got a full picture of the exact variation that we've added to our cart.

Episode summary

In this episode, we're diving into building out the cart item markup for our e-commerce site. We start by laying out all the necessary HTML for each cart item—it's quite a bit, but don't worry, most of it is straightforward. We make sure each item displays the product image, formatted price, product title, and details about the specific variation the user has chosen.

You'll see how to pull in the correct product image for each variation (using the thumbnail we set up earlier), show the nicely-formatted price, and fetch the base product's title from the variation's relationship. We also add a dropdown that allows users to select the quantity they want—this dropdown dynamically lists numbers based on the stock count for each variation, so for example, you'll be able to pick up to 5 if that's all that's in stock for one item, or up to 10 for another.

For now, everything is pretty static (the Remove button doesn't do anything yet), and we'll improve the user experience as we go. In the next episode, we'll tackle the more complex issue of displaying the 'variation ancestors'—those extra details that describe the specific customization or options a user picked for their product. But by the end of this video, you'll have a cart that accurately lists items, prices, and lets users adjust quantities up to what's in stock!

Episode discussion

No comments, yet. Be the first!