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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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