1 00:00:02,090 --> 00:00:06,090 Let's work on this page that shows us the cart content. 2 00:00:06,090 --> 00:00:09,973 It's a new page. So we need a new template of course. 3 00:00:10,900 --> 00:00:12,790 For this, I'll go to my views 4 00:00:12,790 --> 00:00:15,740 and there we have the customer cart area, 5 00:00:15,740 --> 00:00:18,520 where I wanna add a cart EJS file 6 00:00:18,520 --> 00:00:22,280 which is the page or which should be the page for showing us 7 00:00:22,280 --> 00:00:24,670 all the cart content. 8 00:00:24,670 --> 00:00:27,430 Now, as a base, I will again use the all products, 9 00:00:27,430 --> 00:00:31,070 EJS content and paste that in there, but then of course, 10 00:00:31,070 --> 00:00:32,680 I'll change the title 11 00:00:32,680 --> 00:00:33,940 to your 12 00:00:35,000 --> 00:00:36,275 cart here 13 00:00:36,275 --> 00:00:40,950 And I won't include any products, CSS file. 14 00:00:40,950 --> 00:00:42,162 Instead, 15 00:00:42,162 --> 00:00:46,537 I actually will already add a new import to cart CSS, 16 00:00:48,040 --> 00:00:51,150 which is a CSS file that we have yet to add, 17 00:00:51,150 --> 00:00:55,390 but we will add it soon with cart specific styles. 18 00:00:55,390 --> 00:00:59,010 I of course want to have my header, my main navigation, 19 00:00:59,010 --> 00:01:00,870 but then here in the main area, 20 00:01:00,870 --> 00:01:03,500 I'll say your cart 21 00:01:03,500 --> 00:01:04,732 and below that, 22 00:01:04,732 --> 00:01:09,650 I then want to output all these cart items. 23 00:01:09,650 --> 00:01:11,940 So for that, I'll add an unordered list 24 00:01:11,940 --> 00:01:14,460 with an idea of cart items 25 00:01:14,460 --> 00:01:16,393 which we can use for styling later. 26 00:01:17,610 --> 00:01:21,090 and below that, I then actually also want to show 27 00:01:21,090 --> 00:01:23,310 aggregation data for the cart, 28 00:01:23,310 --> 00:01:25,460 specifically the cart total 29 00:01:26,300 --> 00:01:28,700 and for styling purposes, 30 00:01:28,700 --> 00:01:33,523 I'll add a div here with an idea of let's say, cart total, 31 00:01:36,302 --> 00:01:37,803 And in that div here, 32 00:01:39,424 --> 00:01:43,123 I want to have a paragraph that says total, 33 00:01:43,123 --> 00:01:44,600 dollar sign, 34 00:01:44,600 --> 00:01:47,893 and then the total amount which we have to add dynamically. 35 00:01:49,760 --> 00:01:51,280 And next to that, 36 00:01:51,280 --> 00:01:54,010 I then also want to have a button 37 00:01:54,010 --> 00:01:57,420 that allows me to buy these products. 38 00:01:57,420 --> 00:01:58,970 For the moment I'll add a button 39 00:01:58,970 --> 00:02:03,460 with a class of BTN that says buy products 40 00:02:03,460 --> 00:02:07,023 we'll make the button to work and refine it later. 41 00:02:08,810 --> 00:02:10,460 Now in the unordered list, of course, 42 00:02:10,460 --> 00:02:14,783 I want to have all these cart items and here it's important 43 00:02:14,783 --> 00:02:16,710 to keep in mind that a cart item is not a product, 44 00:02:16,710 --> 00:02:20,940 but a group of products where one and the same product, 45 00:02:20,940 --> 00:02:22,940 can be added multiple times. 46 00:02:22,940 --> 00:02:26,550 Then it would only show up once here in that list. 47 00:02:26,550 --> 00:02:29,570 And we would simply have the quantity of that product, 48 00:02:29,570 --> 00:02:33,943 somewhere in that item data, which we're outputting here. 49 00:02:34,920 --> 00:02:37,160 So here we want to output list items, 50 00:02:37,160 --> 00:02:40,453 And specifically we want to output cart item data here. 51 00:02:41,620 --> 00:02:44,980 Now let's say as before a cart item is an article, 52 00:02:44,980 --> 00:02:46,770 not because it has to be, 53 00:02:46,770 --> 00:02:50,355 but because you could treat it as a standalone unit, 54 00:02:50,355 --> 00:02:53,270 a cart item could work on its own, 55 00:02:53,270 --> 00:02:56,330 but having the article here is totally optional, 56 00:02:56,330 --> 00:02:57,820 I will add it though, 57 00:02:57,820 --> 00:03:00,150 and I will give this a class of cart item 58 00:03:00,150 --> 00:03:01,950 for styling purposes 59 00:03:01,950 --> 00:03:06,093 And then in there, in this card item article, 60 00:03:07,520 --> 00:03:10,040 I want to have a div, 61 00:03:10,040 --> 00:03:13,250 with a class of card item dash info, 62 00:03:13,250 --> 00:03:16,000 which is only there for styling purposes 63 00:03:16,000 --> 00:03:19,200 because I want to position two items next to each other. 64 00:03:19,200 --> 00:03:23,763 And these two items would be the title of that card item 65 00:03:23,763 --> 00:03:26,900 wrapped in age two element. 66 00:03:26,900 --> 00:03:30,190 So that should be the title of the product. 67 00:03:30,190 --> 00:03:34,260 And next to that, thanks to that, Div and Flexbox 68 00:03:34,260 --> 00:03:35,580 we'll make it work. 69 00:03:35,580 --> 00:03:39,980 I want to have a paragraph where I output the total price 70 00:03:39,980 --> 00:03:44,510 for this product. So total price for this product, 71 00:03:44,510 --> 00:03:49,308 and then in parentheses thereafter, the price for a single 72 00:03:49,308 --> 00:03:53,230 product, because again our item can be the same product, 73 00:03:53,230 --> 00:03:54,840 added multiple times. 74 00:03:54,840 --> 00:03:56,580 That's why we have a total price, 75 00:03:56,580 --> 00:03:59,163 and a per unit price, so to say. 76 00:04:01,060 --> 00:04:03,410 so that's the first piece of information 77 00:04:03,410 --> 00:04:05,610 that I want to have in there. 78 00:04:05,610 --> 00:04:09,600 Next below that, below that div in the article, 79 00:04:09,600 --> 00:04:12,053 I want to have another div, 80 00:04:13,252 --> 00:04:17,502 with a class of cart item management. 81 00:04:18,749 --> 00:04:23,749 And in there, I like to have an input of type number, 82 00:04:23,770 --> 00:04:26,430 which shows me the number of cart items. 83 00:04:26,430 --> 00:04:29,583 And it's an input because you want to be able to change it. 84 00:04:30,470 --> 00:04:34,900 So this input is required and we'll set the value with EJS 85 00:04:34,900 --> 00:04:38,020 soon, and next to that input, 86 00:04:38,020 --> 00:04:43,020 I want to have a button which allows me to update this cart 87 00:04:43,100 --> 00:04:46,463 and I'll give this button a class of BTN and BTN-alt, 88 00:04:48,080 --> 00:04:51,190 so that when we change the number in this input and we then 89 00:04:51,190 --> 00:04:54,083 click update, we update this cart item. 90 00:04:55,040 --> 00:04:59,090 So that's the general structure for a cart item. 91 00:04:59,090 --> 00:05:01,350 And of course that should be repeated 92 00:05:01,350 --> 00:05:04,075 for every cart item we have in the cart. 93 00:05:04,075 --> 00:05:07,030 As before to keep this template lean, 94 00:05:07,030 --> 00:05:09,990 I'll actually cut this article and instead, 95 00:05:09,990 --> 00:05:14,060 add a brand new include, in this case next to cart, 96 00:05:14,060 --> 00:05:15,940 I'll add an includes folder, 97 00:05:15,940 --> 00:05:19,620 with the cart dash item EJS file inside of it, 98 00:05:19,620 --> 00:05:21,223 which contains this article. 99 00:05:22,540 --> 00:05:25,740 And then in cart EJS, instead of this list item, 100 00:05:25,740 --> 00:05:29,680 I do want to include this cart item file 101 00:05:29,680 --> 00:05:34,443 in the includes folder, that sits next to the cart EJS file. 102 00:05:36,010 --> 00:05:36,843 But again, here, 103 00:05:36,843 --> 00:05:39,500 we want to loop through cart items and for dispute, 104 00:05:39,500 --> 00:05:42,320 of course, need the cart data. 105 00:05:42,320 --> 00:05:46,290 Now, thankfully, thanks to our custom cart middleware, 106 00:05:46,290 --> 00:05:50,610 the cart is available on the locals property. 107 00:05:50,610 --> 00:05:53,320 So we actually don't need to fetch it from a database 108 00:05:53,320 --> 00:05:57,070 in some controller action, but instead in cart EJS, 109 00:05:57,070 --> 00:06:00,580 we can start right away by adding a for of loop, 110 00:06:00,580 --> 00:06:05,500 where we go through all the cart items 111 00:06:05,500 --> 00:06:10,500 of locals dot card dot items, 112 00:06:10,500 --> 00:06:13,860 accessing that cart that we store in this locals property, 113 00:06:13,860 --> 00:06:15,513 in our custom middleware. 114 00:06:16,550 --> 00:06:21,433 And then of course, here, we have to close this parenthesis. 115 00:06:22,390 --> 00:06:24,650 And with that, we've got access to the cart item. 116 00:06:24,650 --> 00:06:28,420 I now want to pass that to the cart item code snippet. 117 00:06:28,420 --> 00:06:30,920 And there let's say we expect to get an item 118 00:06:30,920 --> 00:06:33,310 and set this equal to the cart item 119 00:06:33,310 --> 00:06:36,900 that we have here in this loop. 120 00:06:36,900 --> 00:06:40,210 So that's how we pass that data into our item property 121 00:06:40,210 --> 00:06:41,910 in that snippet. 122 00:06:41,910 --> 00:06:45,750 And in that snippet, we can then use that for the title. 123 00:06:45,750 --> 00:06:46,583 For example, 124 00:06:46,583 --> 00:06:49,730 I want the product title that belongs to this cart item. 125 00:06:49,730 --> 00:06:52,110 So in here I can access item. 126 00:06:52,110 --> 00:06:54,673 Since I used item as a key here, 127 00:06:57,330 --> 00:06:58,820 Dot product, 128 00:06:58,820 --> 00:07:00,650 accessing the nested product 129 00:07:00,650 --> 00:07:04,273 that's stored for every cart item, dot title. 130 00:07:05,280 --> 00:07:08,120 Now for the total price for a given product, 131 00:07:08,120 --> 00:07:12,640 we access item, dot total price, 132 00:07:12,640 --> 00:07:14,963 And then for the per unit price, 133 00:07:15,840 --> 00:07:19,950 we can access item dot product dot price, 134 00:07:19,950 --> 00:07:22,813 which is the price of a single unit of that product. 135 00:07:24,960 --> 00:07:29,520 We also might want to put this into a little span, 136 00:07:29,520 --> 00:07:32,160 which we can also use for styling later, 137 00:07:32,160 --> 00:07:35,383 to make this Italic ,or anything like this. 138 00:07:36,330 --> 00:07:41,330 I'll give this span a class of cart product price, 139 00:07:43,850 --> 00:07:44,683 like this. 140 00:07:47,250 --> 00:07:49,650 Now I also want to output the current, 141 00:07:49,650 --> 00:07:52,680 number of products for this item, 142 00:07:52,680 --> 00:07:54,770 And I do this here in the input where I said 143 00:07:54,770 --> 00:07:59,770 value equal to item, dot total quantity. 144 00:08:00,510 --> 00:08:02,790 And of course the user will be able to change this 145 00:08:02,790 --> 00:08:04,080 and then click update, 146 00:08:04,080 --> 00:08:06,573 But that's the idea behind having this input. 147 00:08:08,820 --> 00:08:11,490 So with that, we have the cart EJS file, 148 00:08:11,490 --> 00:08:13,890 that outputs the cart items 149 00:08:13,890 --> 00:08:17,160 for the total down here in cart EJS, 150 00:08:17,160 --> 00:08:21,700 we can access local store cart dot total price, 151 00:08:21,700 --> 00:08:24,223 which is a property that exists on the cart. 152 00:08:25,510 --> 00:08:27,763 And that should be it actually. 153 00:08:30,080 --> 00:08:31,060 With that, 154 00:08:31,060 --> 00:08:34,940 We can now make sure that we can load cart EJS. 155 00:08:34,940 --> 00:08:35,773 And for this, 156 00:08:35,773 --> 00:08:37,970 we need to go to the cart controller, 157 00:08:37,970 --> 00:08:40,580 and add a brand new action, 158 00:08:40,580 --> 00:08:45,277 maybe here at the very top, which is named "get Cart". 159 00:08:46,500 --> 00:08:49,260 And in there we got request and response, 160 00:08:49,260 --> 00:08:52,050 The idea is to simply render, 161 00:08:52,050 --> 00:08:55,520 this cart template, we just worked on, 162 00:08:55,520 --> 00:08:57,670 which we find in the customer folder, 163 00:08:57,670 --> 00:09:01,620 there in the cart folder and there it was the cart EJS file 164 00:09:02,740 --> 00:09:06,080 And we don't need to pass any data to that render method 165 00:09:06,080 --> 00:09:09,410 because the only data we use in cart EJS 166 00:09:09,410 --> 00:09:12,180 is accessed on that locals key 167 00:09:12,180 --> 00:09:15,530 which is a available anyways, in all the views. 168 00:09:15,530 --> 00:09:18,133 That's the idea behind res locals. 169 00:09:19,790 --> 00:09:22,400 So now we just need to go to the cart controller 170 00:09:22,400 --> 00:09:26,000 and make, get cart available outside of this file, 171 00:09:26,000 --> 00:09:28,633 by adding it here, to the export object. 172 00:09:29,480 --> 00:09:33,350 And then we can go to the routes that we have, 173 00:09:33,350 --> 00:09:38,130 to the cart routes and register a brand new route here. 174 00:09:38,130 --> 00:09:41,380 Let's say router get slash 175 00:09:42,260 --> 00:09:43,140 and keep in mind, 176 00:09:43,140 --> 00:09:48,140 this will be slash card slash nothing because we only 177 00:09:48,370 --> 00:09:52,570 reached a card routes for requests that start with slash 178 00:09:52,570 --> 00:09:55,913 cart. Thanks to our app JS configuration. 179 00:09:56,840 --> 00:10:00,343 And here I then point at card controller, get cart. 180 00:10:01,990 --> 00:10:06,990 Now, with that, If we reload and click on cart here 181 00:10:07,740 --> 00:10:11,310 we see this and this doesn't look too bad, 182 00:10:11,310 --> 00:10:12,910 at least on first sight. 183 00:10:12,910 --> 00:10:15,493 I actually see a couple of problems here. 184 00:10:16,330 --> 00:10:17,460 And for example, 185 00:10:17,460 --> 00:10:20,540 the quantity is missing here in the input field. 186 00:10:20,540 --> 00:10:22,800 Of course the styling is also not final. 187 00:10:22,800 --> 00:10:24,580 We'll have to work on that, 188 00:10:24,580 --> 00:10:28,450 but also a big problem is that the total here doesn't match 189 00:10:28,450 --> 00:10:32,350 the total per product. Even though we only have one product, 190 00:10:32,350 --> 00:10:34,270 these values should be equal. 191 00:10:34,270 --> 00:10:37,483 It should be the single unit price times the quantity. 192 00:10:38,430 --> 00:10:41,700 And I also should have dollar signs here. 193 00:10:41,700 --> 00:10:44,280 So a couple of things we need to improve. 194 00:10:44,280 --> 00:10:45,993 Let's go there Step-by-step. 195 00:10:47,254 --> 00:10:50,020 and let's start with cart item EJS, 196 00:10:50,020 --> 00:10:52,220 by adding a dollar sign, 197 00:10:52,220 --> 00:10:56,253 in front of the product total price, and the per unit price. 198 00:10:57,100 --> 00:10:59,170 That's a simple quick win, 199 00:10:59,170 --> 00:11:00,793 And that already looks better. 200 00:11:02,390 --> 00:11:07,390 Now let's evaluate why this data is wrong here, 201 00:11:07,400 --> 00:11:10,770 probably because it was stored in the cart 202 00:11:10,770 --> 00:11:12,580 in an incorrect way. 203 00:11:12,580 --> 00:11:16,240 For this I will actually go to the application tab here 204 00:11:17,860 --> 00:11:21,940 and I just noticed I'm also getting a 4 0 1 error somehow 205 00:11:21,940 --> 00:11:24,230 we'll have to look into that as well, 206 00:11:24,230 --> 00:11:28,240 but I'll go into the application tab here and under cookies. 207 00:11:28,240 --> 00:11:30,770 I will actually clear that cookie, which I have here, 208 00:11:30,770 --> 00:11:31,890 which is my session cookie, 209 00:11:31,890 --> 00:11:34,830 which therefore resets my session for this user. 210 00:11:34,830 --> 00:11:37,810 Now, if I reload, I have nothing in the cart 211 00:11:37,810 --> 00:11:39,620 and now let's try this again. 212 00:11:39,620 --> 00:11:42,300 If I start adding this item to the cart, 213 00:11:42,300 --> 00:11:44,003 the number updates correctly, 214 00:11:45,200 --> 00:11:46,670 but this still is off. 215 00:11:46,670 --> 00:11:48,910 And now we also see another problem here. 216 00:11:48,910 --> 00:11:51,810 This is a JavaScript rounding thing, 217 00:11:51,810 --> 00:11:53,460 nothing to be worried about, 218 00:11:53,460 --> 00:11:56,160 We can fix this easily as I will show you in a second 219 00:11:57,080 --> 00:12:00,630 but why is it never adding more than two items 220 00:12:00,630 --> 00:12:04,470 as it seems here for calculating the product price 221 00:12:04,470 --> 00:12:07,090 and why is it not showing the quantity here? 222 00:12:07,090 --> 00:12:09,420 And why do we have this error, 223 00:12:09,420 --> 00:12:12,080 this 4 0 1 error here. 224 00:12:12,080 --> 00:12:14,040 Now let's start with the quantity. 225 00:12:14,040 --> 00:12:17,555 The reason for that is that it's not item dot total quantity 226 00:12:17,555 --> 00:12:20,490 but just item dot quantity. 227 00:12:20,490 --> 00:12:23,060 If we have a look at the cart model 228 00:12:24,062 --> 00:12:27,683 in add item, I'm updating card item dot quantity. 229 00:12:29,160 --> 00:12:32,520 So if I save that and reload, we see the quantity, 230 00:12:32,520 --> 00:12:36,130 which is wrong, now regarding that rounding error here, 231 00:12:36,130 --> 00:12:38,876 which JavaScript sometimes shows for some numbers, 232 00:12:38,876 --> 00:12:43,876 we can fix this by going to cart EJS and there on those 233 00:12:43,990 --> 00:12:46,690 numbers where you might be getting those errors, 234 00:12:46,690 --> 00:12:48,400 you can call a built in method, 235 00:12:48,400 --> 00:12:51,090 which exists on all numbers in JavaScript, 236 00:12:51,090 --> 00:12:53,320 And that's the to fixed number 237 00:12:53,320 --> 00:12:55,480 to which you can pass an argument of two, 238 00:12:55,480 --> 00:12:59,090 which will simply fix that number to two decimal places 239 00:12:59,090 --> 00:13:02,400 so that it always shows two decimal places, 240 00:13:02,400 --> 00:13:04,837 which is a great idea for prices anyways 241 00:13:04,837 --> 00:13:07,875 because, that also ensures that we show two zero's, 242 00:13:07,875 --> 00:13:10,550 for even prices. 243 00:13:10,550 --> 00:13:13,763 And that we simply always show prices in the same format. 244 00:13:14,940 --> 00:13:17,120 I also want to use this in a cart item 245 00:13:17,120 --> 00:13:22,120 on my item, total price, and then the product price here. 246 00:13:24,200 --> 00:13:27,490 If we now reload, that looks better 247 00:13:28,570 --> 00:13:30,820 but now still, why is the quantity 248 00:13:30,820 --> 00:13:33,357 and price for the product group incorrect, 249 00:13:33,357 --> 00:13:36,663 even though it seems to be correct for the overall cart? 250 00:13:38,020 --> 00:13:40,760 That has to be an error somewhere in our model, 251 00:13:40,760 --> 00:13:41,870 I would assume. 252 00:13:41,870 --> 00:13:43,210 And yes, it is. 253 00:13:43,210 --> 00:13:47,490 Here in my cart model, I make a mistake here. 254 00:13:47,490 --> 00:13:51,610 When I increase the quantity and price for an item, 255 00:13:51,610 --> 00:13:53,387 that is already part of the cart, 256 00:13:53,387 --> 00:13:57,710 I always increase the quantity and price of my cart item. 257 00:13:57,710 --> 00:14:00,511 Now I initialize that here and I initialize it to one 258 00:14:00,511 --> 00:14:02,730 and the product price, 259 00:14:02,730 --> 00:14:03,910 that's wrong. 260 00:14:03,910 --> 00:14:06,563 Instead I should increase the existing quantity 261 00:14:06,563 --> 00:14:11,563 of that existing item. So I should use item dot quantity, 262 00:14:12,750 --> 00:14:14,110 plus one here 263 00:14:14,110 --> 00:14:17,910 as a formula for setting my cart item quantity. 264 00:14:17,910 --> 00:14:21,370 And here it should be item dot total price, 265 00:14:21,370 --> 00:14:25,523 using the currently stored total price and quantity instead. 266 00:14:27,740 --> 00:14:30,170 with that, we can't fix the existing error, 267 00:14:30,170 --> 00:14:32,440 but of course I can open the div tools again, 268 00:14:32,440 --> 00:14:35,295 to go to the application and clear that cookie, 269 00:14:35,295 --> 00:14:39,276 so that I can reload here and then actually, 270 00:14:39,276 --> 00:14:42,380 add this product again. 271 00:14:42,380 --> 00:14:46,573 And now we should have a working set up here. 272 00:14:47,720 --> 00:14:50,163 Yeah. Now we have the correct quantity. 273 00:14:51,210 --> 00:14:53,270 If I add another product here, 274 00:14:53,270 --> 00:14:55,360 it's added as a brand new row here 275 00:14:55,360 --> 00:14:58,313 because it's a brand new item. So that is working. 276 00:14:59,670 --> 00:15:00,960 Last but not least though, 277 00:15:00,960 --> 00:15:04,310 Why am I getting this 4 0 1 error here? 278 00:15:04,310 --> 00:15:06,360 Where is this coming from? 279 00:15:06,360 --> 00:15:09,040 looks like somewhere, I'm sending some requests 280 00:15:09,040 --> 00:15:11,170 that's being blocked. 281 00:15:11,170 --> 00:15:15,080 And I would assume this is simply 282 00:15:16,150 --> 00:15:18,073 me requesting, 283 00:15:19,530 --> 00:15:24,530 the cart CSS file here, which doesn't exist yet. 284 00:15:24,840 --> 00:15:26,140 And therefore, actually 285 00:15:26,140 --> 00:15:29,110 that error is not being handled correctly. 286 00:15:29,110 --> 00:15:32,990 And hence, I'm seeing this strange, incorrect error message. 287 00:15:32,990 --> 00:15:35,920 If I add a cart CSS file here, 288 00:15:35,920 --> 00:15:39,060 because we'll need one soon anyways, 289 00:15:39,060 --> 00:15:44,060 and I now reload this page, this 4 0 1 message has gone. 290 00:15:45,340 --> 00:15:47,130 So that's not working. And therefore now, 291 00:15:47,130 --> 00:15:50,000 since we already added the cart CSS file, 292 00:15:50,000 --> 00:15:53,350 Let's now, make sure these items are properly styled, 293 00:15:53,350 --> 00:15:56,713 before we then add the logic for updating the cart items.