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

45. Calculating the cart totals

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

In this episode, we're going to grab the subtotal of the cart

00:02

and the total, which is the subtotal plus shipping. Now, for the subtotal, we already know this because if we go back to our cart, we're already outputting this here. So we already have that information from our cart object.

00:15

So if we just come up to the subtotal here, that's very, very simple. We've already got our cart in this. So we just want to say subtotal. And let's go over, give that a refresh.

00:27

And there we go. We've got our subtotal in there. Now, that's the subtotal method, but we want the formatted subtotal method. And there we go.

00:34

It's as simple as that to grab out the subtotal. Now, for the total, let's think, what can we do? Well, a really good option here would be a computed property because the shipping is going to change.

00:45

So we want this to recompute to update the total. So much like we did for the getShippingType property, we can go ahead and create another computed property in here called getTotalProperty.

00:57

And that's going to return that to us as we need. So let's think about how this is going to work. We've got our subtotal. So let's say cart and inject this in, which we can do in here.

01:10

And we'll say subtotal. And then we could just say plus this shipping type and price. So we know what the shipping type is. This comes from this computed property here, which remember changes.

01:27

The cart has a subtotal. Remember, both of these values are in pence. So what we're going to get out when we access our total property is the following. And let's just roll with this and say this total.

01:41

And let's go over, give that a refresh. So that is technically the total. And if you check when we change the shipping option, that updates. Now, we want a formatted version of this.

01:51

And there's a couple of ways that we could do this. We could do this within here. So we could technically just switch this to a formatted total property. And there's even more ways that we could do this.

02:02

So we could wrap this completely in money, and that would work. So let's just keep that as total for now, just to keep things simple. You can see that we get 270 and, of course, 290 when we add the $20 shipping on. That's one option.

02:16

Or what we could do is we could grab the plain pence value here. We could go over, and we could wrap this in money within our template if we wanted to. I think for now, what we'll do is leave this within the template, because it just means that we don't have to format this within our Livewire component.

02:34

It just makes a little bit more sense to just grab the total property and add these two together. Although you can pretty much do what you want. It doesn't really matter. OK.

02:43

So there we go. We have our subtotal. We have the shipping that we know that we can choose, and that dynamically updates. And now we have the cart total in there.

Episode summary

In this episode, we dive into how to calculate the cart subtotals and the grand total (which includes shipping) in your shopping cart. We start by looking at the subtotal, which is pretty straightforward since we've already been outputting it from our cart object.

Next, we focus on how to get the total, accounting for dynamic shipping costs. To make things flexible, we create a computed property that adds together the cart's subtotal and the selected shipping price, so whenever the shipping option changes, the total automatically updates too.

There's also a quick discussion about formatting – we look at the different ways you could display your total as a money value, either formatting it right in the component or just handling it in the template. For now, we keep it simple and leave formatting in the template, so the component can focus on just providing the correct numbers.

By the end of the episode, you'll have a subtotal, dynamic shipping, and a live-updating total, with clear guidance on how to best format and use these amounts in your app.

Episode discussion

No comments, yet. Be the first!