1 00:00:00,630 --> 00:00:01,320 Welcome back. 2 00:00:01,890 --> 00:00:06,180 Now it's time to work on extra features that we could add to our project. 3 00:00:06,600 --> 00:00:16,140 And the the first feature that I'm going to add is the number of items that we have in the cart above 4 00:00:16,260 --> 00:00:18,300 this cart, above this cart. 5 00:00:18,300 --> 00:00:24,270 So whenever the user has something in the cart, we need to display the number of items. 6 00:00:24,600 --> 00:00:28,980 So to do this, the first step is that we need to calculate the number of items. 7 00:00:35,270 --> 00:00:39,440 So in the project, the first thing that I'm going to do is that I'm going to open up the cart and it's 8 00:00:39,440 --> 00:00:41,360 called calculate cart. 9 00:00:41,900 --> 00:00:48,410 And we can use this function to calculate also the number, the total cart we can calculate. 10 00:00:48,410 --> 00:00:53,300 We can use this function to count, to calculate the number of items that we have. 11 00:00:54,710 --> 00:00:58,730 So to do this, we can here, as you can see here, we have this quantity. 12 00:00:59,330 --> 00:01:04,400 This quantity A is is the quantity of each single product. 13 00:01:04,820 --> 00:01:11,750 And if we add the quantities of each single product up, if we add them up, we will get the total quantity. 14 00:01:12,470 --> 00:01:17,600 So let's see you get your total quantity. 15 00:01:17,600 --> 00:01:20,640 I'm going to say total underscore 180. 16 00:01:23,870 --> 00:01:25,460 So initially it's going to be zero. 17 00:01:25,940 --> 00:01:28,130 And then here's what I'm going to do, is that I'm going to say. 18 00:01:29,780 --> 00:01:33,830 Total underscore quantity. 19 00:01:35,360 --> 00:01:39,590 And then it's going to be equal to quantity. 20 00:01:40,780 --> 00:01:44,800 Plus total quantity, plus quantity. 21 00:01:45,190 --> 00:01:50,380 So we get the initial quantity and then we keep adding the quantities of each single product. 22 00:01:50,980 --> 00:01:56,920 And in order to differentiate between the quantity and the price, I'm going to say you total price. 23 00:01:59,460 --> 00:02:01,140 And a year, I'm going to say total. 24 00:02:02,130 --> 00:02:03,780 Total rice. 25 00:02:05,460 --> 00:02:09,450 And here, don't tell Rice. 26 00:02:10,620 --> 00:02:11,820 So that's it to hear. 27 00:02:11,820 --> 00:02:14,040 Also total rice. 28 00:02:15,150 --> 00:02:16,890 And I'm going to create a new session. 29 00:02:18,520 --> 00:02:22,120 Variable called total. 30 00:02:24,280 --> 00:02:27,070 Quantity or quantity, let's say quantity. 31 00:02:27,130 --> 00:02:27,970 Just quantity. 32 00:02:30,570 --> 00:02:35,010 So the quantity here is going to be equal to the total quantity. 33 00:02:35,520 --> 00:02:36,090 Granted. 34 00:02:36,570 --> 00:02:37,470 Now, let me save. 35 00:02:39,060 --> 00:02:43,800 And this is going to calculate the total quantity if a user adds something to the card, or even if 36 00:02:43,800 --> 00:02:50,220 a user remove something from the cart, it's always going to recalculate the total price. 37 00:02:50,220 --> 00:02:51,240 Any total quantity? 38 00:02:52,460 --> 00:02:54,090 But this is the logic. 39 00:02:54,110 --> 00:02:56,120 Now it's time to work on the design. 40 00:02:56,630 --> 00:03:03,000 So we need to use the design in order to display the, the number of years. 41 00:03:03,000 --> 00:03:05,420 So before I, before I what are the design? 42 00:03:05,420 --> 00:03:06,160 Let's see this. 43 00:03:06,200 --> 00:03:09,080 Let's continue with the logic. 44 00:03:09,410 --> 00:03:12,860 So remember in the header and the header. 45 00:03:14,640 --> 00:03:15,360 In the header. 46 00:03:15,750 --> 00:03:17,250 We have this in the header. 47 00:03:17,250 --> 00:03:24,750 We have this card icon now inside this card icon inside the I I'm going to say P, I'm going to say 48 00:03:24,750 --> 00:03:25,710 a span. 49 00:03:26,880 --> 00:03:27,510 Stan. 50 00:03:28,650 --> 00:03:32,640 And then I'm going to display a number here just to show you where I'm going to be displaying. 51 00:03:32,650 --> 00:03:34,260 Let's display any number. 52 00:03:35,190 --> 00:03:36,240 Now, if I refresh. 53 00:03:37,350 --> 00:03:38,760 The number will be displayed here. 54 00:03:39,120 --> 00:03:42,200 Of course, I'm going to be working on the design later, but now we are going. 55 00:03:42,210 --> 00:03:42,980 I'm just go. 56 00:03:43,020 --> 00:03:45,870 I'm just working on the logic. 57 00:03:46,410 --> 00:03:51,760 So to get the actual number of items from the cart, we do use BHP. 58 00:03:52,890 --> 00:03:57,240 So here, what I'm going to do is that I'm going to add this in in a new line. 59 00:03:58,440 --> 00:04:00,120 First, I'm going to add this in a new line. 60 00:04:01,930 --> 00:04:04,840 And then I'm going to add also this in a new line. 61 00:04:07,010 --> 00:04:08,180 And this in a new line. 62 00:04:17,030 --> 00:04:19,600 And then let me show you what I'm going to do. 63 00:04:21,640 --> 00:04:25,570 So what I'm going to do is that I'm going to using your app, I'm going to up in a tweet and I'm going 64 00:04:25,570 --> 00:04:25,930 to say. 65 00:04:27,180 --> 00:04:27,810 BHP. 66 00:04:29,530 --> 00:04:32,530 And then I'm going to see if session. 67 00:04:33,630 --> 00:04:34,860 A session. 68 00:04:39,350 --> 00:04:41,570 Session quantity. 69 00:04:45,940 --> 00:04:46,930 And. 70 00:04:47,650 --> 00:04:50,290 And session. 71 00:04:52,100 --> 00:04:52,700 Session. 72 00:04:54,570 --> 00:04:55,510 Quantity. 73 00:04:59,030 --> 00:05:00,890 Is not equal to zero. 74 00:05:02,430 --> 00:05:09,390 Then I'm going to open a year actually bracket and then I'm going to here classically bracket. 75 00:05:11,120 --> 00:05:13,250 And then I'm going to close it up. 76 00:05:13,730 --> 00:05:16,130 And in between I'm going to explain the number. 77 00:05:16,130 --> 00:05:18,140 By using this plan, I'm going to say Span. 78 00:05:20,100 --> 00:05:24,510 And then in between I'm going to say BHP. 79 00:05:26,190 --> 00:05:28,560 And then I'm going to say Echo. 80 00:05:31,240 --> 00:05:33,880 SItIon and then. 81 00:05:34,890 --> 00:05:38,520 Quantity and then semicolon. 82 00:05:39,210 --> 00:05:42,090 Let me now save Lainey here, then over to the browser and refresh. 83 00:05:42,540 --> 00:05:44,600 If I refresh, nothing will be displayed here. 84 00:05:44,610 --> 00:05:46,770 As you can see, there's nothing here. 85 00:05:47,400 --> 00:05:49,170 There's absolutely nothing here. 86 00:05:50,720 --> 00:05:54,710 But if I add something to the card, let me add something to the card. 87 00:05:55,550 --> 00:05:57,200 Maybe you click on by now. 88 00:05:58,190 --> 00:05:59,540 Allow me click on Add to Cart. 89 00:06:00,530 --> 00:06:04,190 So now if I add to Cart, as you can see here, it's going to display one. 90 00:06:04,670 --> 00:06:06,050 One has been displayed. 91 00:06:06,500 --> 00:06:13,520 If I increase the card, if I say here three and if I click on it, it it's going to say here three 92 00:06:13,520 --> 00:06:14,300 immediately. 93 00:06:14,720 --> 00:06:18,010 However, if you go to another page, it's not going to be displayed. 94 00:06:18,020 --> 00:06:19,520 As you can see, it's not going to be displayed. 95 00:06:20,150 --> 00:06:26,270 And the reason is because we need to initialize the session in the header here in the header. 96 00:06:27,110 --> 00:06:29,510 I'm using the session, but I am not. 97 00:06:29,510 --> 00:06:33,260 I didn't initialize the session at the top of the header. 98 00:06:33,620 --> 00:06:44,900 We need to say B2B and then session starts and then semicolon and then click on file and then table. 99 00:06:45,290 --> 00:06:52,660 Now if I refresh, the number of items in the cart will be displayed in every single page in our website. 100 00:06:52,670 --> 00:06:58,190 It doesn't it doesn't matter which page, the the cart will or the number of items will be displayed 101 00:06:58,400 --> 00:06:59,660 above this cart icon.