1 00:00:02,280 --> 00:00:03,113 Now for this, 2 00:00:03,113 --> 00:00:05,250 I start on the product-details.ejs file 3 00:00:05,250 --> 00:00:08,130 because there, we have the addToCart button. 4 00:00:08,130 --> 00:00:10,210 And it's now this button which I wanna handle 5 00:00:10,210 --> 00:00:11,623 with JavaScript. 6 00:00:12,490 --> 00:00:14,530 Now to make it selectable, 7 00:00:14,530 --> 00:00:19,460 we could add an ID or we use this ID on the main section 8 00:00:19,460 --> 00:00:21,610 and then look for the first and only button 9 00:00:21,610 --> 00:00:24,260 that we have somewhere as a child 10 00:00:24,260 --> 00:00:27,730 or as a descendant element in that main element, 11 00:00:27,730 --> 00:00:29,513 and that's the approach I'll use. 12 00:00:30,810 --> 00:00:32,750 So therefor all we got to do here 13 00:00:32,750 --> 00:00:35,840 is add a new public script, 14 00:00:35,840 --> 00:00:37,730 so a browser site script, 15 00:00:37,730 --> 00:00:41,103 which I'll name cart-management.js. 16 00:00:42,080 --> 00:00:45,820 And in there, I want to get access to that button 17 00:00:45,820 --> 00:00:47,080 I just explained, 18 00:00:47,080 --> 00:00:49,780 and then trigger a function that sends a request 19 00:00:49,780 --> 00:00:52,453 to add a item whenever we click that button. 20 00:00:53,660 --> 00:00:58,640 So the addToCartButtonElement can be accessed 21 00:00:58,640 --> 00:01:02,880 by using document query selector like this. 22 00:01:02,880 --> 00:01:07,360 And then, I want to select the item with this ID 23 00:01:07,360 --> 00:01:10,293 with product details and then the button in there. 24 00:01:11,300 --> 00:01:14,920 So #product-details to select the item by ID 25 00:01:14,920 --> 00:01:17,380 and then change the CSS selector to this 26 00:01:17,380 --> 00:01:21,020 to select the first matching button descendant element 27 00:01:21,020 --> 00:01:25,030 that's anywhere in an element with the product details ID, 28 00:01:25,030 --> 00:01:26,330 that's what else liked here, 29 00:01:26,330 --> 00:01:28,823 and this will be my addToCart button. 30 00:01:30,460 --> 00:01:32,960 Then I add a function, addToCart, 31 00:01:34,140 --> 00:01:35,970 that's my function here. 32 00:01:35,970 --> 00:01:39,510 And I wanna connect this with a click listener 33 00:01:39,510 --> 00:01:42,200 by adding addEventListener click here 34 00:01:42,200 --> 00:01:44,310 to my addToCart button element 35 00:01:44,310 --> 00:01:47,783 and a point at the addToCart function here. 36 00:01:49,260 --> 00:01:53,630 Inside of addToCart, I now need to send this request. 37 00:01:53,630 --> 00:01:55,960 And for this, I need to target a route 38 00:01:55,960 --> 00:01:58,170 which we have yet to add. 39 00:01:58,170 --> 00:02:00,000 So let's go to the routes folder 40 00:02:00,000 --> 00:02:04,750 and actually add a brand new cart.routes.js file 41 00:02:04,750 --> 00:02:07,570 to keep our routes organized. 42 00:02:07,570 --> 00:02:09,800 And here, I'll just copy the routes set up 43 00:02:09,800 --> 00:02:14,770 from the auth.routes file, paste it in there, 44 00:02:14,770 --> 00:02:17,420 but remove the authController import, 45 00:02:17,420 --> 00:02:20,880 and instead, add the cartController import 46 00:02:20,880 --> 00:02:23,720 by requiring going up one level, 47 00:02:23,720 --> 00:02:28,263 controllers/cart.controller, like this. 48 00:02:29,140 --> 00:02:31,750 And then of course get rid of these routes. 49 00:02:31,750 --> 00:02:36,020 And instead, now I wanna add a new route, a post route. 50 00:02:36,020 --> 00:02:39,330 You could also argue for put or even patch 51 00:02:39,330 --> 00:02:41,200 since adding an item to a cart 52 00:02:41,200 --> 00:02:44,750 could also be considered an update to a cart. 53 00:02:44,750 --> 00:02:46,980 But I'll go for a post. 54 00:02:46,980 --> 00:02:51,980 And the path here should actually be /cart/items 55 00:02:53,040 --> 00:02:55,760 so that we can send the request to this path 56 00:02:55,760 --> 00:02:57,093 to add a new item. 57 00:02:57,970 --> 00:03:00,820 This is one way of writing this. 58 00:03:00,820 --> 00:03:03,720 And actually just as with the admin routes, 59 00:03:03,720 --> 00:03:05,800 all my cart related routes 60 00:03:05,800 --> 00:03:08,000 should start with /cart, 61 00:03:08,000 --> 00:03:09,970 therefor I will omit this here 62 00:03:11,120 --> 00:03:13,560 and just connect this here 63 00:03:13,560 --> 00:03:17,073 to the addCartItem action in the cart controller. 64 00:03:18,350 --> 00:03:23,170 And add this /cart prefix in app.js 65 00:03:23,170 --> 00:03:25,023 as I did it for the admin routes. 66 00:03:25,910 --> 00:03:30,910 So here in app.js, I will import my cart routes 67 00:03:31,040 --> 00:03:36,040 by requiring ./routes/cart.routes, 68 00:03:38,470 --> 00:03:42,480 and I will register them down here 69 00:03:42,480 --> 00:03:45,340 before I have the protect routes middleware 70 00:03:45,340 --> 00:03:47,740 because the cart routes should be accessible 71 00:03:47,740 --> 00:03:50,320 to unauthenticated users, 72 00:03:50,320 --> 00:03:52,973 so here, I'll add cart routes like this. 73 00:03:54,040 --> 00:03:56,820 And now, I will actually add a prefix here 74 00:03:56,820 --> 00:04:01,820 of ./cart so that only requests that start with ./cart, 75 00:04:02,490 --> 00:04:05,480 so where the path starts with ./cart 76 00:04:05,480 --> 00:04:07,620 will make it into the cart routes. 77 00:04:07,620 --> 00:04:10,810 And then the prefix or this part off the path 78 00:04:10,810 --> 00:04:12,520 will be removed by express 79 00:04:12,520 --> 00:04:15,390 and the rest of the path will be evaluated 80 00:04:15,390 --> 00:04:17,260 by the cart routes. 81 00:04:17,260 --> 00:04:22,240 So this here is still reached with /cart/items, 82 00:04:22,240 --> 00:04:25,460 but in this file here, it's just /items, 83 00:04:25,460 --> 00:04:29,133 just as we defined it before for the admin routes. 84 00:04:30,710 --> 00:04:34,730 So, that is the post route for addCartItem, 85 00:04:34,730 --> 00:04:37,070 and with that back in cart management, 86 00:04:37,070 --> 00:04:40,663 we can now send such a post request to that route. 87 00:04:41,970 --> 00:04:44,490 For this I'll again use the fetch function, 88 00:04:44,490 --> 00:04:47,690 this is built into the browser and it returns a promise, 89 00:04:47,690 --> 00:04:50,260 so I'll handled this with async await here 90 00:04:50,260 --> 00:04:52,210 to get the response. 91 00:04:52,210 --> 00:04:54,310 But first of all, we need a path, 92 00:04:54,310 --> 00:04:58,860 and the path is /cart/items as we just saw, 93 00:04:58,860 --> 00:05:01,630 and then we need to configure this request. 94 00:05:01,630 --> 00:05:05,160 And here we got a couple of things that we have to do. 95 00:05:05,160 --> 00:05:08,460 For example, we need to set the method here to post 96 00:05:08,460 --> 00:05:10,710 so to be send the post request, 97 00:05:10,710 --> 00:05:13,940 and then we also have to add a body to that request, 98 00:05:13,940 --> 00:05:16,853 so the data that we wanna attach to the request. 99 00:05:17,830 --> 00:05:21,140 This has to be in the so-called JSON format, 100 00:05:21,140 --> 00:05:25,600 and we can convert an object from Java script to JSON 101 00:05:25,600 --> 00:05:28,540 with the built in JSON class, 102 00:05:28,540 --> 00:05:31,650 which has to static stringify method, 103 00:05:31,650 --> 00:05:34,010 which converts a JavaScript object 104 00:05:34,010 --> 00:05:35,950 into a JSON formatted string, 105 00:05:35,950 --> 00:05:38,933 so into text that follows the JSON format. 106 00:05:40,540 --> 00:05:43,000 I'll pass the object that should be transformed 107 00:05:43,000 --> 00:05:44,880 to JSON stringify, 108 00:05:44,880 --> 00:05:48,770 and then there, I wanna provide the product ID 109 00:05:48,770 --> 00:05:51,423 of the product that should be added to the cart. 110 00:05:52,440 --> 00:05:55,650 We need to do that because in the cart controller, 111 00:05:55,650 --> 00:05:57,760 we do actually look for that. 112 00:05:57,760 --> 00:06:00,370 Here, I'm trying to get the product ID 113 00:06:00,370 --> 00:06:02,293 from the incoming request body. 114 00:06:03,950 --> 00:06:07,650 That of course, means that in the cart.management.js file, 115 00:06:07,650 --> 00:06:10,050 we need that product ID. 116 00:06:10,050 --> 00:06:13,390 And for this, we can again use data attributes. 117 00:06:13,390 --> 00:06:15,460 In the product details view, 118 00:06:15,460 --> 00:06:17,720 on this button which will be clicked, 119 00:06:17,720 --> 00:06:22,380 we can add the data-productid attribute 120 00:06:22,380 --> 00:06:26,913 and populate that with EJS, like this, for example. 121 00:06:27,760 --> 00:06:31,170 This then sets this data-productid attribute, 122 00:06:31,170 --> 00:06:34,530 and we can access this and our front-end JavaScript code 123 00:06:34,530 --> 00:06:36,900 to get hold of that product ID, 124 00:06:36,900 --> 00:06:39,363 which we do wanna add to the cart there. 125 00:06:40,710 --> 00:06:43,650 So now here in addToCart in this function, 126 00:06:43,650 --> 00:06:46,700 which will be triggered upon a click on this button, 127 00:06:46,700 --> 00:06:51,210 we can get the productId by reaching out to this button 128 00:06:51,210 --> 00:06:55,553 on which we added the data property, the data attribute, 129 00:06:56,590 --> 00:06:58,390 and we can access .dataset 130 00:06:58,390 --> 00:07:02,510 to get access to all the data-attribute values. 131 00:07:02,510 --> 00:07:05,940 And then product ID was the name I chose 132 00:07:05,940 --> 00:07:08,140 here after the -productid, 133 00:07:09,660 --> 00:07:12,140 so that's therefor what we access on the dataset, 134 00:07:12,140 --> 00:07:13,970 and that stand this productid 135 00:07:13,970 --> 00:07:16,363 which we set with EJS in the template. 136 00:07:17,390 --> 00:07:19,900 So therefor that is standard value I wanna store 137 00:07:19,900 --> 00:07:22,690 in the productId field in this object 138 00:07:22,690 --> 00:07:23,963 that will be stringified. 139 00:07:25,270 --> 00:07:28,720 Now last, but definitely not least and very important, 140 00:07:28,720 --> 00:07:31,400 for this case that we're sending a body 141 00:07:31,400 --> 00:07:34,870 along with that Ajax request, 142 00:07:34,870 --> 00:07:37,310 we also need to set headers. 143 00:07:37,310 --> 00:07:39,390 Headers are extra metadata 144 00:07:39,390 --> 00:07:42,710 that are added to both requests and responses, 145 00:07:42,710 --> 00:07:46,020 and the browser does add a lot of metadata by default, 146 00:07:46,020 --> 00:07:49,780 for example, it sends our cookie automatically by default, 147 00:07:49,780 --> 00:07:51,180 our session cookie, 148 00:07:51,180 --> 00:07:54,820 but we sometimes need to add our own metadata. 149 00:07:54,820 --> 00:07:57,470 And here, we need to add one specific header 150 00:07:57,470 --> 00:07:59,683 the Content-Type header. 151 00:08:00,600 --> 00:08:04,720 That's a header our backend code will later look for 152 00:08:04,720 --> 00:08:08,400 to correctly parse the incoming request data. 153 00:08:08,400 --> 00:08:10,687 With content type, we describe the kind of data 154 00:08:10,687 --> 00:08:13,810 that will be sent and for forward submissions 155 00:08:13,810 --> 00:08:16,880 that are not handled manually with JavaScript, 156 00:08:16,880 --> 00:08:20,500 this header will be set automatically by the browser. 157 00:08:20,500 --> 00:08:23,030 But for our custom HTTP requests 158 00:08:23,030 --> 00:08:27,160 that are sent with JavaScript, we wanna set it ourselves. 159 00:08:27,160 --> 00:08:29,350 And here, I'm sending some JSON data 160 00:08:29,350 --> 00:08:32,133 so to content type is application/json. 161 00:08:33,440 --> 00:08:35,250 And that's very important, 162 00:08:35,250 --> 00:08:38,712 otherwise the backend later won't work correctly. 163 00:08:39,780 --> 00:08:41,830 And actually, later is now. 164 00:08:41,830 --> 00:08:43,770 We are sending this kind of request 165 00:08:43,770 --> 00:08:45,440 with data attached to it, 166 00:08:45,440 --> 00:08:49,013 and currently, our backend is not prepared for that. 167 00:08:50,040 --> 00:08:52,550 In app.js in our backend code, 168 00:08:52,550 --> 00:08:55,200 we are using this middleware, 169 00:08:55,200 --> 00:09:00,200 express.urlencoded to extract incoming requests data 170 00:09:00,560 --> 00:09:04,793 for requests that were sent upon form submissions. 171 00:09:05,910 --> 00:09:09,810 Now we also have requests that are sent as Ajax requests 172 00:09:09,810 --> 00:09:11,383 and that carry data. 173 00:09:12,490 --> 00:09:16,150 To extract data in the JSON format from such requests, 174 00:09:16,150 --> 00:09:18,540 we need to register and never middleware, 175 00:09:18,540 --> 00:09:21,023 a another middleware built into express, 176 00:09:22,080 --> 00:09:25,370 and that would be the JSON middleware. 177 00:09:25,370 --> 00:09:28,560 We execute JSON and this function then returns 178 00:09:28,560 --> 00:09:29,810 the middleware function, 179 00:09:29,810 --> 00:09:32,860 which is then registered as a middleware. 180 00:09:32,860 --> 00:09:34,920 And now all incoming requests 181 00:09:34,920 --> 00:09:37,320 are checked for JSON data as well, 182 00:09:37,320 --> 00:09:39,860 and that's where we need the extra header 183 00:09:39,860 --> 00:09:41,940 because this tells the backend, 184 00:09:41,940 --> 00:09:43,810 hey, I got some JSON data, 185 00:09:43,810 --> 00:09:46,850 please parse me with the appropriate middleware, 186 00:09:46,850 --> 00:09:48,103 so that's important. 187 00:09:49,300 --> 00:09:50,680 Then we can await this 188 00:09:50,680 --> 00:09:53,840 and ultimately, we'll get back a response. 189 00:09:53,840 --> 00:09:57,040 And we can then check if the response 190 00:09:57,040 --> 00:09:59,120 is maybe not okay, 191 00:09:59,120 --> 00:10:01,640 in which case, I'll just show an alert where I say 192 00:10:01,640 --> 00:10:05,750 something went wrong and I return, 193 00:10:05,750 --> 00:10:07,393 and otherwise, we continue. 194 00:10:08,330 --> 00:10:11,550 Actually, this could also fail for a technical reasons 195 00:10:11,550 --> 00:10:13,410 as you learned before in the course, 196 00:10:13,410 --> 00:10:15,720 so can all Ajax requests. 197 00:10:15,720 --> 00:10:17,640 So you could consider wrapping this 198 00:10:17,640 --> 00:10:19,603 into a try catch block, 199 00:10:21,800 --> 00:10:23,330 like this, 200 00:10:23,330 --> 00:10:26,910 and then also showing an error if we have a technical error. 201 00:10:26,910 --> 00:10:29,850 So not an error response code, 202 00:10:29,850 --> 00:10:31,540 which is a successful response, 203 00:10:31,540 --> 00:10:33,610 but has an error response code, 204 00:10:33,610 --> 00:10:37,880 but a technical error where we don't even get a response. 205 00:10:37,880 --> 00:10:39,980 That could occur if we, for example, 206 00:10:39,980 --> 00:10:44,130 lose connectivity whilst working on this website. 207 00:10:44,130 --> 00:10:48,480 In that case, I'll also show this something went wrong error 208 00:10:48,480 --> 00:10:49,883 and return. 209 00:10:51,880 --> 00:10:53,880 Now, in order to be able to use the response 210 00:10:53,880 --> 00:10:55,570 outside of the try block, 211 00:10:55,570 --> 00:10:57,980 I'll again, turn it into a variable 212 00:10:57,980 --> 00:10:59,850 which I set inside of try, 213 00:10:59,850 --> 00:11:02,940 and therefore it's also available after try, 214 00:11:02,940 --> 00:11:04,513 for example, in this if check. 215 00:11:05,460 --> 00:11:07,530 If we made it past this if check, 216 00:11:07,530 --> 00:11:09,640 and we had no error before, 217 00:11:09,640 --> 00:11:12,270 then we know we have a valid response, 218 00:11:12,270 --> 00:11:14,970 and in that case, I wanna look into the response, 219 00:11:14,970 --> 00:11:17,290 extract the response data, 220 00:11:17,290 --> 00:11:22,100 and in my case, then use this new total items key 221 00:11:22,100 --> 00:11:25,860 that will be part of the response sent back by the server 222 00:11:25,860 --> 00:11:28,820 to update my badge in the navigation. 223 00:11:28,820 --> 00:11:32,010 So therefore now, we need to get the response data 224 00:11:32,010 --> 00:11:35,340 in our front-end JavaScript code here. 225 00:11:35,340 --> 00:11:38,303 We can get this by awaiting response.json, 226 00:11:39,470 --> 00:11:43,130 which is a JSON method that exists on the response object 227 00:11:43,130 --> 00:11:44,870 in the front-end code. 228 00:11:44,870 --> 00:11:48,270 This is a method which will decode the response data 229 00:11:48,270 --> 00:11:51,760 from the JSON format to regular JavaScript, 230 00:11:51,760 --> 00:11:53,120 but it yields a promise 231 00:11:53,120 --> 00:11:54,970 and therefore, we have to await this. 232 00:11:55,920 --> 00:11:59,170 And then once we got the decoded response data, 233 00:11:59,170 --> 00:12:02,180 which will be a regular JavaScript object then, 234 00:12:02,180 --> 00:12:04,927 we can get our newTotalQuantity 235 00:12:06,190 --> 00:12:08,220 by accessing responseData., 236 00:12:09,580 --> 00:12:11,827 and then I named it a newTotalItems, 237 00:12:11,827 --> 00:12:13,853 so .newTotalItems here. 238 00:12:15,340 --> 00:12:18,623 And now we wanna update the badge here in the navigation. 239 00:12:19,820 --> 00:12:21,770 Now, to get hold of that badge, 240 00:12:21,770 --> 00:12:25,090 we need a way of uniquely selecting it, 241 00:12:25,090 --> 00:12:27,740 and if we have a look at our nav items, 242 00:12:27,740 --> 00:12:30,080 where I have the badge here, 243 00:12:30,080 --> 00:12:32,030 we see that we should be good 244 00:12:32,030 --> 00:12:35,310 if we select the first item with a class of badge 245 00:12:35,310 --> 00:12:38,090 instead of an item with a class of nav-items, 246 00:12:38,090 --> 00:12:42,023 that should uniquely identify this badge next to the cart. 247 00:12:43,500 --> 00:12:45,190 So in cart-management.js, 248 00:12:45,190 --> 00:12:50,190 we can get hold of that badge or that cartBadge element 249 00:12:51,170 --> 00:12:54,870 by accessing document querySelector, 250 00:12:54,870 --> 00:12:57,600 and then there, nav-items. 251 00:12:57,600 --> 00:13:01,380 Whoops, class of nav-items. 252 00:13:01,380 --> 00:13:04,423 And in there, the first item with a class of badge. 253 00:13:06,170 --> 00:13:07,960 Keep in mind that query selector 254 00:13:07,960 --> 00:13:09,780 selects the first matching item, 255 00:13:09,780 --> 00:13:11,650 so this will give us the first badge 256 00:13:11,650 --> 00:13:13,570 that's a child or descendant 257 00:13:13,570 --> 00:13:16,440 of any element with a nav-items class, 258 00:13:16,440 --> 00:13:19,240 and that will be that cart badge in that navigation 259 00:13:19,240 --> 00:13:20,253 in our case. 260 00:13:21,420 --> 00:13:23,470 So then it's this cartBadge element, 261 00:13:23,470 --> 00:13:25,920 which I'll use here at the end of my function 262 00:13:26,880 --> 00:13:29,260 to update its text content 263 00:13:29,260 --> 00:13:32,153 and set that equal to the new total quantity. 264 00:13:33,810 --> 00:13:36,090 This should do the trick. 265 00:13:36,090 --> 00:13:37,750 Now we can test this, 266 00:13:37,750 --> 00:13:39,440 and for this, we have to make sure 267 00:13:39,440 --> 00:13:41,670 that the cart.management.js file 268 00:13:41,670 --> 00:13:44,300 is executed on our pages, 269 00:13:44,300 --> 00:13:46,753 to be precise, on the product detail page. 270 00:13:47,670 --> 00:13:49,930 So in product.details.ejs, 271 00:13:49,930 --> 00:13:51,930 at the end of the head section, 272 00:13:51,930 --> 00:13:54,230 we want to add a script import 273 00:13:54,230 --> 00:13:59,230 and import/scripts/cart-management.js 274 00:13:59,600 --> 00:14:03,070 and defer this as always. 275 00:14:03,070 --> 00:14:05,710 And whilst I'm here, I'll also update the title, 276 00:14:05,710 --> 00:14:06,890 the page title, 277 00:14:06,890 --> 00:14:11,890 and actually set this equal to product.title, 278 00:14:12,140 --> 00:14:14,050 but that's just a side note, 279 00:14:14,050 --> 00:14:16,493 more important is that we add that script. 280 00:14:17,490 --> 00:14:18,920 And once that is done, 281 00:14:18,920 --> 00:14:21,080 if we reload and open the dev tools 282 00:14:21,080 --> 00:14:23,510 to see any potential errors, 283 00:14:23,510 --> 00:14:27,380 if I do actually click addToCart, 284 00:14:27,380 --> 00:14:29,023 I get an error. 285 00:14:29,940 --> 00:14:33,453 And do you have an idea which error that could be? 286 00:14:34,500 --> 00:14:36,840 Well it's related to CSRF. 287 00:14:36,840 --> 00:14:39,740 Because when I do send a request here 288 00:14:39,740 --> 00:14:41,780 from inside my JavaScript code, 289 00:14:41,780 --> 00:14:44,350 still, we have to add the CSRF token 290 00:14:44,350 --> 00:14:46,450 If it's not a GET request, 291 00:14:46,450 --> 00:14:49,300 those are exempt by default. 292 00:14:49,300 --> 00:14:50,540 This is a POST request, 293 00:14:50,540 --> 00:14:53,140 so we have add the CSRF token, 294 00:14:53,140 --> 00:14:57,390 hence we should add an _csrf field to our data 295 00:14:57,390 --> 00:14:59,660 that we're sending with the request. 296 00:14:59,660 --> 00:15:01,810 And now to get a villas token, 297 00:15:01,810 --> 00:15:04,770 we can go to product-details.ejs 298 00:15:04,770 --> 00:15:07,070 and there to the button, 299 00:15:07,070 --> 00:15:09,180 besides adding the product ID, 300 00:15:09,180 --> 00:15:11,580 we can also add the CSRF token 301 00:15:12,910 --> 00:15:15,373 like this with locals.csrfToken. 302 00:15:17,650 --> 00:15:21,283 And then data-csrf is my data attribute. 303 00:15:23,010 --> 00:15:24,830 And with that added, 304 00:15:24,830 --> 00:15:28,400 we can go here into our JavaScript code, 305 00:15:28,400 --> 00:15:32,570 and there, not just extract the product ID from the dataset, 306 00:15:32,570 --> 00:15:34,050 but also the csrfToken 307 00:15:35,090 --> 00:15:39,863 by adding addToCartButtonElement.dataset.csrfToken. 308 00:15:41,760 --> 00:15:43,790 Then we have the csrfToken here, 309 00:15:43,790 --> 00:15:48,530 which we set as a value for _csrf in this request data. 310 00:15:48,530 --> 00:15:52,343 And actually this here should be csrf not csrfToken. 311 00:15:53,250 --> 00:15:54,380 Because on the dataset, 312 00:15:54,380 --> 00:15:57,870 we have to access the property that we set in the template, 313 00:15:57,870 --> 00:16:01,200 and in my case, that's data-csrf, 314 00:16:01,200 --> 00:16:03,793 so that's the key we can access on the dataset. 315 00:16:05,480 --> 00:16:07,513 And if we do that and save this, 316 00:16:08,450 --> 00:16:10,320 if I click addToCart, 317 00:16:10,320 --> 00:16:12,143 now this updates correctly. 318 00:16:13,190 --> 00:16:15,460 Only once though, if I click this multiple times, 319 00:16:15,460 --> 00:16:17,233 it does not update again. 320 00:16:18,340 --> 00:16:21,290 And if I reload, it's even set back to zero. 321 00:16:21,290 --> 00:16:23,190 So it looks like my cart data 322 00:16:23,190 --> 00:16:27,490 is not really being saved in my cart, 323 00:16:27,490 --> 00:16:31,690 some things still seems to not work correctly here. 324 00:16:31,690 --> 00:16:33,840 The reason for dat can be found 325 00:16:33,840 --> 00:16:36,770 in our cart middleware though, here. 326 00:16:36,770 --> 00:16:38,860 When I am initializing a cart 327 00:16:38,860 --> 00:16:42,180 based on data that was already stored in the cart, 328 00:16:42,180 --> 00:16:45,510 it's not enough to just provide the existing items, 329 00:16:45,510 --> 00:16:49,580 instead here in the constructor of the cart model, 330 00:16:49,580 --> 00:16:53,140 we always expect to get the total quantity and total price. 331 00:16:53,140 --> 00:16:55,190 The defaults here are only good 332 00:16:55,190 --> 00:16:58,453 if we are first creating a cart, not thereafter. 333 00:16:59,600 --> 00:17:00,560 So therefor of course, 334 00:17:00,560 --> 00:17:02,720 we should all to provide that data here 335 00:17:02,720 --> 00:17:05,103 when we are re initializing our cart. 336 00:17:06,150 --> 00:17:08,329 For that, I'll add a little helper variable, 337 00:17:08,329 --> 00:17:11,800 sessionCart, which is req.session.cart. 338 00:17:11,800 --> 00:17:16,310 And then I can use my sessionCart here to access the items, 339 00:17:16,310 --> 00:17:20,470 thereafter, also the total quantity, 340 00:17:20,470 --> 00:17:22,970 and thereafter, where I want the price, 341 00:17:22,970 --> 00:17:25,803 I access the total price, like this. 342 00:17:27,750 --> 00:17:30,710 With that if we save this middleware, 343 00:17:30,710 --> 00:17:34,800 now, the cart one value here survives. 344 00:17:34,800 --> 00:17:37,290 And now I can increase this to higher numbers, 345 00:17:37,290 --> 00:17:40,043 and if I reload, that's all the persisted. 346 00:17:41,350 --> 00:17:44,090 So now we can add items to the cart, 347 00:17:44,090 --> 00:17:47,740 next of course, we should add functionality to view the cart 348 00:17:47,740 --> 00:17:49,670 and then all the managed to cart 349 00:17:49,670 --> 00:17:52,463 from inside that cart specific page.