This episode is for members only

Sign up to access "Build an E-Commerce Platform" right now.

Get started
Already a member? Sign in to continue
Playing
29. Calculating the cart summary

Episodes

0%
Your progress
  • Total: 8h 42m
  • Played: 0m
  • Remaining: 8h 42m
Join or sign in to track your progress
01. Introduction and demo
9m 42s
0%
02. Installing Laravel, Breeze and Livewire
4m 47s
0%
03. Creating categories
9m 4s
0%
04. Recursively displaying categories
8m 21s
0%
05. Product model and migration
2m 50s
0%
06. Showing a product
7m 50s
0%
07. Product variation setup
10m 26s
0%
08. Creating the product selector
10m 34s
0%
09. Loading child variation dropdowns
4m 28s
0%
10. Faking adding the final variation
9m 33s
0%
11. Setting up product stock
4m 34s
0%
12. Calculating variation stock levels
9m 1s
0%
13. Adding product images with MediaLibrary
8m 50s
0%
14. Creating the product gallery
7m 28s
0%
15. Providing a fallback image
2m 56s
0%
16. Adding media to product variations
3m 37s
0%
17. Creating the cart model
3m 37s
0%
18. Registering the cart service
6m 34s
0%
19. Creating a cart session
11m 4s
0%
20. Showing the cart in the navigation
9m 19s
0%
21. Caching the cart instance
3m 2s
0%
22. Adding items to the cart
14m 1s
0%
23. Creating the notification component
8m 5s
0%
24. Showing the user's cart
6m 50s
0%
25. Outputting cart items
4m 50s
0%
26. Showing variation specifics
8m 8s
0%
27. Updating item quantity
8m 2s
0%
28. Removing an item from the cart
6m 1s
0%
29. Calculating the cart summary
8m 7s
0%
30. Showing the category products page
5m 1s
0%
31. Indexing products in Meilisearch
8m 32s
0%
32. Hooking up products to categories
4m 15s
0%
33. Building the product browser
13m 32s
0%
34. Showing child categories
1m 51s
0%
35. Indexing product variations for filtering
8m
0%
36. Outputting variations for filtering
12m 52s
0%
37. Hooking up product filters with Livewire
7m 48s
0%
38. Filtering products
12m 24s
0%
39. Filtering by price
9m 50s
0%
40. Adding global navigation search
7m 50s
0%
41. Handling products that are not live
3m 22s
0%
42. Price range category fix
1m 18s
0%
43. Scaffolding the checkout page
8m 6s
0%
44. Listing shipping options
9m 3s
0%
45. Calculating the cart totals
2m 52s
0%
46. Validating the account form
9m 10s
0%
47. Validating the shipping form
5m 47s
0%
48. Saving the shipping address
8m 4s
0%
49. Selecting a saved shipping address
6m 39s
0%
50. Fix shipping address error for non authenticated users
1m 7s
0%
51. Redirecting if the cart is empty
2m 42s
0%
52. Checking for quantity changes
7m 11s
0%
53. Syncing if quantities have changed
11m 59s
0%
54. Flashing a message when quantities have changed
5m 48s
0%
55. Setting up for orders
5m 17s
0%
56. Creating an order
13m 24s
0%
57. Attaching variations to order
6m 13s
0%
58. Reducing stock after ordering
2m 56s
0%
59. Meilisearch filter query fix
1m 33s
0%
60. Showing the order confirmation page
7m 39s
0%
61. Attaching orders for registering guest users
5m 17s
0%
62. Scaffolding the orders page
5m 30s
0%
63. Filling in order variation details
5m 24s
0%
64. Returning the order status
4m 39s
0%
65. Detecting order status changes
10m 49s
0%
66. Sending the order status change email
5m 12s
0%
67. Sending an order confirmation email
2m 47s
0%
68. Handling deleted cart records
4m 44s
0%
69. Transferring the guest cart
2m 44s
0%
70. Creating a presenter for the order status
4m 31s
0%
71. Setting up Stripe
3m 43s
0%
72. Creating and updating a PaymentIntent
16m 21s
0%
73. The Stripe card form
3m 35s
0%
74. Validating before payment
5m 34s
0%
75. Submitting a payment
6m 40s
0%
76. Checking for a successful payment
5m 47s
0%
77. Handling Stripe client errors
3m 11s
0%
78. Entangling Stripe customer data
2m 18s
0%

Transcript

00:00
so we're now going to focus on our cart summary which is going to give us a total price for all
00:05
of the items that we have including the quantities so if we had two of these white items for example and 10 of these of course the quantity is going to be higher now just before we do that you'll see that they sort of jumped around a little bit uh there's a couple of reasons for this the first one is well the sole reason for this isn't the fact we're not keying this but the
00:27
first thing that makes me think is we should be keying this every time we iterate through a item we want to make sure that we key it so it can be rendered properly so i'm going to go ahead and key this by the variation id so the item in here is unique that's not going to solve the problem because i have a feeling what we're doing is we're ordering these variations uh by something that has
00:49
a kind of default order in laravel we don't have time stamps on here and we probably wouldn't ever want to order the cart variation items by their time stamp but what we're going to do is order these by the id just to keep them in the same order or you could order them by something else but i think that kind of makes sense so if we come over to our cart and we look at our in fact now
01:11
our cart model and we look at our variations where we added our pivot we're going to go ahead and explicitly order the variations by their id so we're only ever going to order by id i think by default laravel will order by id and created that so let's now just chop and change these around a little bit and we shouldn't see them jump when we update them in the database which is what we want
01:36
we don't want that to happen okay that looks good so let's just set this to five and this to three and we're going to go ahead and work out our cart summary before we do that we're going to need some sort of markup so down here and under the cart summary i'm just going to paste in some pre-created markup in here let's just pull this in here as well and all this is is just a little summary
01:56
section here with a subtotal which at the moment doesn't exist that will go just here and we just have a checkout anchor which at the moment is looking a little bit plain but we'll create a separate component to deal with a button that goes through to a different location so the first and most important is the subtotal where are we going to get this from well we're going to do something
02:18
like this cart and subtotal i think that kind of makes sense and that needs to work out the subtotal of all the items that we've got and actually this is going to be the formatted subtotal that makes a lot more sense so if we come over to cart.php under app and cart let's go and create out a formatted subtotal method here and we know that's going to use our money package
02:45
and for now let's just return something just to mock this out zero dollars let's come over and there we go that's what we want but we actually want to implement this so it would be good to have another method in here just called subtotal where we can get the actual subtotal first and then in here do something like money this subtotal just so we've got two methods that are available
03:08
for use so in here i'm just going to return two thousand and if we come over now that gives us twenty dollars so this is the number now that we want to be able to extract out so for this we're going to go ahead and reduce down the variations collection with a carry value and increment that carry value as we reduce this so reduce is just a method of going through something taking a carry
03:32
value from the previous iteration and then adding on to it and that's exactly what we want to do so this is a method over on the laravel collection object and you'll find this in javascript and pretty much any programming language so we want to go ahead and grab the variations out here which is a laravel collection and then we want to go ahead and reduce this down so we can either pass
03:53
in a full callback in here or you could use a shorthand let's do the long way first just so we can focus on this so for each iteration here we're going to get a carry value and we're going to get each of the variations so at the moment if we come over and give this a refresh you can see that there is no value in here being returned properly so if we go ahead and return one for example
04:18
and give that a refresh we get 0.01 so this isn't actually doing anything it's not really adding anything up now what we want to do is take the variation price we want to multiply this by the quantity of that particular variation and remember this will iterate through twice because we've got two items in our cart two variations so we're multiplying the price of
04:43
each of the variations by the quantity so let's say that we had one white nike air force one and one black nike air force one this is ninety dollars or let's just keep it simple this is ten dollars and this is ten dollars and we have two quantity of each of these for the first iteration we're going to multiply two by ten of course that's 20 the second iteration let's just say
05:05
that's three we're going to iterate over and multiply three by ten that's 30 and then when with our carry value we can keep track of what we've done for each iteration so 20 would be plus 30 so we would just do that and that would equal 50 so hopefully that makes sense this is basically what this reduce function is doing so if we just leave it like this it's not going to work because
05:27
we're only going to end up with one of these variations being calculated what we need to do is take that carry value and add it on to what we've done here and we can just put these in brackets to make it simpler so for the first iteration this will be calculated and carried over and then for the second iteration it will be calculated and then we'll add to the previous
05:50
calculation so if we just come over here and give that refresh we now have 720 to simplify this we just go ahead and reduce these down by two so two times 90 is 180 180 times two is 360 so we know now this is working and of course because we're refreshing our cart and this summary exists within the overall cart component we are constantly calculating this every single time now aside
06:15
from the really large query we have when we perform actions on here let's just take a look at the queries that we've got and i don't think that looks too bad we're executing the same amount of queries every single time that's absolutely fine and again we can come back to that and optimize it a little bit later okay so finally this checkout button you of course can add more items in here
06:35
if you want to inside of the cart summary it's entirely up to you but let's go ahead and just modify the standard button component we get with laravelle breeze and change it into an anchor so i'm going to copy this over and i'm just going to manually create this out in our components directory and i'm going to call this anchor or button anchor dot blade dot php paste this in
06:59
it's going to look exactly the same at the moment so i'm going to change this to x button anchor and switch that to x button anchor as well at the moment it's just going to look like this but this is a submit button by default we just want something to go through to a particular location so we can modify our button anchor component just here to be an anchor of course that's the point of
07:26
doing this and for the attributes in here we can merge in get rid of type because we don't need that we can merge in the classes that's fine but we can also just merge in the href and by default we'll just set that to a hash so if we don't specify the href it'll just be a hash so if we come back over to cart.blade.php the href that i've defined in the markup that we've just pasted in
07:47
is slash checkout so if we just click on this we go through to checkout of course that can't be found at the moment but with that default in there if the href isn't included it will just go through to hash so there we go that is our cart summary let's bring our href back to checkout and eventually of course we'll be able to click on checkout and actually check out
78 episodes8 hrs 42 mins

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!