Adding Basket Summary

[00:00 - 00:10] While we were checking adding and removing basket items, I noticed that when the basket count is 1, it doesn't remove it from the state. Let me show it to you.

[00:11 - 00:19] Clicking on remove and nothing happens but if I refresh, it's gone. Now let's see why it's happening.

[00:20 - 00:39] It's happening because inside the store context dot tss file, the condition should check if the item index is more than or equal to 0 because the index can also be 0 and this will fix the issue. We also noticed that this is not aligned properly.

[00:40 - 00:58] So what we can do is give it some more margin. So what I'll do is go to the navigation dot sss file and here rather than giving it adding 10 pixels from top and bottom and 20 on left and right, I can just make it 20 for all the places.

[00:59 - 01:06] Also I would like to change the color of the card to color gray dark one. Please make this change as well.

[01:07 - 01:15] Now the next thing we want to do is to show the basket summary. We need to show the total amount and also the button to go to the checkout page .

[01:16 - 01:30] First of all, we'll have to calculate the total. Let's go to our basket page and we will use a reduce function which takes an initial value and it keeps on accumulating the subsequent values.

[01:31 - 01:43] So let's create a new variable and let's call it total. Then we will use the reduce on basket not items.

[01:44 - 02:11] We want to get the sum and we do have the access to the individual item inside the basket. What we'll do is we will add the sum with the item dot price and as the third argument we will provide zero which is the starting or the initial value.

[02:12 - 02:29] Now what it will do is it will go through every item in the basket and will add its price to the sum variable which will start from zero. Also inside the basket count we can either return the length or we can return zero.

[02:30 - 02:36] So if there is a length we will return that length otherwise we will return zero. Now let's work on its appearance.

[02:37 - 02:48] I want to show it on the right of the basket table on bigger screen and on top of it I can use it above the table. We will again use flexbox to give this orientation.

[02:49 - 03:05] On top of the table here I can create a new variable and let's call it basket page_body. This will be the parent for both our table and our summary.

[03:06 - 03:33] And what we can do is put our table inside here. Also I will wrap my table in another div and I can copy this and paste it here and I can add body_table and let me add dot and now I can press tab.

[03:34 - 03:41] And I can put the table inside the div. For the summary I will create a new div.

[03:42 - 03:57] So what I can do is copy this and paste it here and rather than calling it a table I will call it summary and I can get rid of this table here. Now inside the summary we need an h2 tag which will just say total.

[03:58 - 04:09] So let's make an h2 tag and it will say total. So that a new div which will be summary total and will contain the total.

[04:10 - 04:38] So here I can copy this class and paste it with underscore underscore total. Now I can add a dollar sign because our currency for now is dollar and inside I can check if we have total which means it's more than zero then we will show the total otherwise we will simply show zero.

[04:39 - 04:59] Finally we need a checkout button which will simply say checkout. Again like all the time I will copy this class paste it below and this time it will be summary underscore checkout and it will just say checkout.

[05:00 - 05:24] We can wrap it with a link tag which will take this to the checkout page. So link and let's close it here and it will go to the checkout page slash checkout and let's import it using quick fix and import link module from react out of DOM.

[05:25 - 05:54] Now this summary part is only necessary when there is something in the cart. So what we can do is put a condition we have a lot of ways to implement this for now what I'll do is cut this summary part and we'll check if there is a total which means there are items in the basket only then show us this summary and I don't know from where this came but yeah everything's fine here.

[05:55 - 06:27] We can also show the price with currency while rendering it on the basket table . So for this what we will do is go to this column and inside price we can use render here and with render we will have access to the price which will be of type number and here we can simply render a div which will have a dollar sign followed by the price.

[06:28 - 06:37] Now I have given the new basket dot sas file inside the code below. Please replace the old one with this new file.

[06:38 - 07:10] So go to the basket dot sas and just to replace it with a new one it has our summary style for our table and media queries as well so that it looks better on smaller screens and if you open the browser and the basket page this will how it will look on the browser. Now if I remove something I see the price getting updated and if I click on it again we see that cart function is working and we don't see the summary page because we don't need it.

[07:11 - 07:29] Also we see a zero here so what I will do is go back to the code and where we are checking total we can check if the total is more than zero only then display this to us. Now let's go back to the browser and yeah now it's gone.

[07:30 - 07:32] Let's add the add to cart button in the description page in the next lesson.