1 00:00:02,220 --> 00:00:05,360 We've got this nice add to cart button. 2 00:00:05,360 --> 00:00:08,010 This button currently doesn't do anything. 3 00:00:08,010 --> 00:00:10,368 Let's make sure it does something. 4 00:00:10,368 --> 00:00:11,201 And for this, 5 00:00:11,201 --> 00:00:14,740 I'll start simple by giving it a class of BTN, 6 00:00:14,740 --> 00:00:17,440 so that it at least looks differently. 7 00:00:17,440 --> 00:00:18,943 And now that it looks differently, 8 00:00:18,943 --> 00:00:21,650 I'd like to connect it to some logic 9 00:00:21,650 --> 00:00:23,830 so that when we click it, 10 00:00:23,830 --> 00:00:27,570 we actually take that product for which we click it, 11 00:00:27,570 --> 00:00:29,600 we add that to the cart 12 00:00:29,600 --> 00:00:33,660 and that cart has to be stored on the server side somehow. 13 00:00:33,660 --> 00:00:36,630 And that cart has to be connected to this user, 14 00:00:36,630 --> 00:00:38,730 even if the user is not logged in. 15 00:00:38,730 --> 00:00:41,800 We can make this work with sessions, thankfully. 16 00:00:41,800 --> 00:00:45,120 And then I also want to show a number 17 00:00:45,120 --> 00:00:47,740 next to the cart here in the navigation, 18 00:00:47,740 --> 00:00:50,550 so that we see how many items are in the cart. 19 00:00:50,550 --> 00:00:52,010 And when we click cart, 20 00:00:52,010 --> 00:00:54,937 I of course want to have a detail page where we can see 21 00:00:54,937 --> 00:00:59,030 the entire cart contents, and we can see the cart items 22 00:00:59,030 --> 00:01:02,730 and we can even manage the cart items from in there. 23 00:01:02,730 --> 00:01:04,500 That's the plan. 24 00:01:04,500 --> 00:01:08,230 And for this to achieve this goal, 25 00:01:08,230 --> 00:01:11,130 we of course get a couple of things to do. 26 00:01:11,130 --> 00:01:13,210 For example, we'll need a new model 27 00:01:13,210 --> 00:01:15,030 because we'll have brand new data 28 00:01:15,030 --> 00:01:16,730 with which we work on the backend. 29 00:01:16,730 --> 00:01:19,660 We have the cart with which we work there. 30 00:01:19,660 --> 00:01:24,660 Hence I'll add a cart.model.js file in the models folder. 31 00:01:24,840 --> 00:01:27,650 And in addition, in controllers, 32 00:01:27,650 --> 00:01:30,660 I'll add the cart.controller.js file, 33 00:01:30,660 --> 00:01:34,240 since we'll have cart-related controller actions 34 00:01:34,240 --> 00:01:35,073 that we need. 35 00:01:36,280 --> 00:01:38,770 Now let's start in the cart model, 36 00:01:38,770 --> 00:01:41,090 Here, I'll create my cart class, 37 00:01:41,090 --> 00:01:43,507 as I've done it for other kinds of models as well. 38 00:01:43,507 --> 00:01:46,622 And I will add a constructor here, 39 00:01:46,622 --> 00:01:48,970 so that we can create instances 40 00:01:48,970 --> 00:01:51,253 based on this model in our code. 41 00:01:52,370 --> 00:01:55,219 Now, every cart that we create in our code, 42 00:01:55,219 --> 00:01:59,244 ultimately you should be created with some items, 43 00:01:59,244 --> 00:02:01,811 because whilst a cart might be empty 44 00:02:01,811 --> 00:02:04,620 the first time we visit a page, 45 00:02:04,620 --> 00:02:06,890 once we navigate around on the page, 46 00:02:06,890 --> 00:02:08,800 and we start adding some items, 47 00:02:08,800 --> 00:02:12,001 I want to be able to populate a cart on the backend 48 00:02:12,001 --> 00:02:13,970 for a given user, 49 00:02:13,970 --> 00:02:17,750 with the items the user added to the cart before. 50 00:02:17,750 --> 00:02:21,410 And you'll see how that works throughout this section. 51 00:02:21,410 --> 00:02:24,410 So then I add an items property with the this keyword, 52 00:02:24,410 --> 00:02:26,750 and we set this equal to the items we get here 53 00:02:26,750 --> 00:02:28,730 as a parameter value. 54 00:02:28,730 --> 00:02:31,023 And actually I will use a feature here 55 00:02:31,023 --> 00:02:33,820 about which we learned in this course as well. 56 00:02:33,820 --> 00:02:38,210 I'll give this items parameter a default value like this, 57 00:02:38,210 --> 00:02:41,960 so that if this cart is created without any values 58 00:02:41,960 --> 00:02:43,640 passed into the constructor, 59 00:02:43,640 --> 00:02:47,003 we automatically use an empty array for our items, 60 00:02:48,070 --> 00:02:51,630 so that the first time we create a cart for a given user 61 00:02:51,630 --> 00:02:54,754 it's empty, it has no items in there. 62 00:02:54,754 --> 00:02:57,350 That's the first step. 63 00:02:57,350 --> 00:02:59,062 The next thing I want to add here 64 00:02:59,062 --> 00:03:01,400 is an add item method, 65 00:03:01,400 --> 00:03:04,660 which allows us to add a new item, a new product, 66 00:03:04,660 --> 00:03:06,300 to this cart. 67 00:03:06,300 --> 00:03:07,220 So here in the end, 68 00:03:07,220 --> 00:03:12,220 I expect to get the product object full of product data 69 00:03:12,460 --> 00:03:13,955 as a parameter value. 70 00:03:13,955 --> 00:03:18,955 Now here for the cart, unlike for the product is on, 71 00:03:19,360 --> 00:03:23,376 we will not talk to an individual carts collection 72 00:03:23,376 --> 00:03:24,690 in the database. 73 00:03:24,690 --> 00:03:25,597 We could do that, 74 00:03:25,597 --> 00:03:29,011 but instead here, I plan on storing the cart 75 00:03:29,011 --> 00:03:32,172 inside of a user's session. 76 00:03:32,172 --> 00:03:35,890 Keep in mind that in a user session you can store data. 77 00:03:35,890 --> 00:03:38,620 We are storing data in a session, actually, 78 00:03:38,620 --> 00:03:43,620 when we authenticate in our util folder 79 00:03:43,800 --> 00:03:46,370 in the authentication.js file, 80 00:03:46,370 --> 00:03:48,580 we are writing data into the session 81 00:03:48,580 --> 00:03:50,647 to store the user ID there. 82 00:03:50,647 --> 00:03:53,370 And we can not just store the user ID there. 83 00:03:53,370 --> 00:03:55,870 We can also store the cart there. 84 00:03:55,870 --> 00:03:59,560 The advantage of this is that our session is automatically 85 00:03:59,560 --> 00:04:01,960 tied to a specific visitor, 86 00:04:01,960 --> 00:04:03,819 because that's how sessions work. 87 00:04:03,819 --> 00:04:08,050 Every visitor of a website gets his or her own session, 88 00:04:08,050 --> 00:04:10,450 and a cookie with an ID of that session, 89 00:04:10,450 --> 00:04:13,121 that allows the backend to connect requests, 90 00:04:13,121 --> 00:04:16,240 incoming requests to a given session. 91 00:04:16,240 --> 00:04:19,040 And since we therefore have such a session 92 00:04:19,040 --> 00:04:23,295 for every visitor, even visitors who are not logged in, 93 00:04:23,295 --> 00:04:25,750 we can store the cart in that session, 94 00:04:25,750 --> 00:04:28,380 and we'll then have a cart per visitor 95 00:04:28,380 --> 00:04:32,010 without forcing the visitor to log in. 96 00:04:32,010 --> 00:04:33,950 And of course the visitors should be able 97 00:04:33,950 --> 00:04:38,213 to add items to a cart without logging in first. 98 00:04:38,213 --> 00:04:41,210 So therefore I'll store to cart in a session, 99 00:04:41,210 --> 00:04:45,320 not in a database, and therefore here in add item, 100 00:04:45,320 --> 00:04:48,602 I will not store any data anywhere in the database. 101 00:04:48,602 --> 00:04:52,890 Instead. I really just want to manipulate my items property, 102 00:04:52,890 --> 00:04:55,290 which is an array and add the product 103 00:04:55,290 --> 00:04:58,802 that we're adding to cart to this array. 104 00:04:58,802 --> 00:05:01,407 Now you could think that all we have to do 105 00:05:01,407 --> 00:05:04,070 is call this item's push, 106 00:05:04,070 --> 00:05:07,012 and push a product into this array like this. 107 00:05:07,012 --> 00:05:10,460 Every array in JavaScript has a push method, 108 00:05:10,460 --> 00:05:12,330 and this does what the name implies. 109 00:05:12,330 --> 00:05:15,640 It pushes a new element into that array. 110 00:05:15,640 --> 00:05:17,723 It adds it at the end of the array. 111 00:05:18,593 --> 00:05:21,520 This would kind of work, 112 00:05:21,520 --> 00:05:22,810 but it also means 113 00:05:22,810 --> 00:05:26,232 that if we add the same product multiple times, 114 00:05:26,232 --> 00:05:30,140 we actually start adding multiple items to this array, 115 00:05:30,140 --> 00:05:32,370 even though it's the same product. 116 00:05:32,370 --> 00:05:35,530 And I would like to consolidate the same product. 117 00:05:35,530 --> 00:05:39,430 I would like to aggregate product data in the cart, 118 00:05:39,430 --> 00:05:42,447 so that if we add the same item, the same product, 119 00:05:42,447 --> 00:05:44,680 to the cart, multiple times, 120 00:05:44,680 --> 00:05:47,080 we only have one item in this array. 121 00:05:47,080 --> 00:05:48,630 But in that item, 122 00:05:48,630 --> 00:05:51,660 we keep track of the quantity of the item, 123 00:05:51,660 --> 00:05:54,480 so did we still know that product X 124 00:05:54,480 --> 00:05:56,341 has been added five times, 125 00:05:56,341 --> 00:05:59,260 but we don't have five items in the array, 126 00:05:59,260 --> 00:06:01,673 but instead we store a quantity of five 127 00:06:01,673 --> 00:06:03,663 for that given product. 128 00:06:04,580 --> 00:06:06,552 And this means that pushing is only correct 129 00:06:06,552 --> 00:06:10,750 if a product is not part of this items array yet. 130 00:06:10,750 --> 00:06:14,070 Therefore what we'll have to do here in add item, 131 00:06:14,070 --> 00:06:16,670 is we'll have to check if that product 132 00:06:16,670 --> 00:06:19,250 is already part of the items array. 133 00:06:19,250 --> 00:06:22,430 And we can do this in a couple of different ways. 134 00:06:22,430 --> 00:06:24,230 One way of achieving this 135 00:06:24,230 --> 00:06:28,708 would be to use a regular for loop with this syntax, 136 00:06:28,708 --> 00:06:33,520 where we start with a simple helper variable set to zero. 137 00:06:33,520 --> 00:06:35,860 And then after the semicolon, 138 00:06:35,860 --> 00:06:37,744 we have the condition, 139 00:06:37,744 --> 00:06:40,351 which defines how long we want to loop, 140 00:06:40,351 --> 00:06:42,760 in this case, as long as I 141 00:06:42,760 --> 00:06:45,723 is smaller than this items length. 142 00:06:46,560 --> 00:06:49,170 And then after another of semicolon, 143 00:06:49,170 --> 00:06:53,480 we have code that should execute after every loop iteration, 144 00:06:53,480 --> 00:06:58,120 which in this case is I plus plus to increment I by one, 145 00:06:58,120 --> 00:07:01,440 so that it gets bigger and bigger after every iteration, 146 00:07:01,440 --> 00:07:03,771 until we don't meet this condition anymore, 147 00:07:03,771 --> 00:07:06,423 and therefore, we exit the loop. 148 00:07:07,640 --> 00:07:11,193 With that, I'm looping from I to zero, 149 00:07:11,193 --> 00:07:16,193 up to the number of items we have in the items array, 150 00:07:16,990 --> 00:07:19,710 minus one, because this is smaller, 151 00:07:19,710 --> 00:07:22,228 and not smaller or equal. 152 00:07:22,228 --> 00:07:25,470 And that of course means that we can get access 153 00:07:25,470 --> 00:07:26,995 to the items that are stored 154 00:07:26,995 --> 00:07:30,090 in the items property array here, 155 00:07:30,090 --> 00:07:31,816 by accessing this dot items 156 00:07:31,816 --> 00:07:36,790 by that I, which we can use as an index. 157 00:07:36,790 --> 00:07:39,270 And this will be zero in the first iteration, 158 00:07:39,270 --> 00:07:40,990 one in the next iteration. 159 00:07:40,990 --> 00:07:43,770 And this gives us access to all the items we have 160 00:07:43,770 --> 00:07:45,253 in this array. 161 00:07:47,110 --> 00:07:49,310 We could use a for of loop, 162 00:07:49,310 --> 00:07:53,152 but I actually want to get access to the index here. 163 00:07:53,152 --> 00:07:56,330 That's why I'm using this regular for loop instead. 164 00:07:56,330 --> 00:08:00,120 I also want to practice working with that for loop 165 00:08:00,120 --> 00:08:02,183 with this kind for loop again, 166 00:08:03,240 --> 00:08:06,910 because here in the for loop, we now of course, 167 00:08:06,910 --> 00:08:11,410 want to check if the item we are currently looking at, 168 00:08:11,410 --> 00:08:13,410 and we will look at all the items, 169 00:08:13,410 --> 00:08:15,340 thanks to this loop logic. 170 00:08:15,340 --> 00:08:19,890 If that item has, let's say, a stored product, 171 00:08:19,890 --> 00:08:22,730 so a product that's attached to this item, 172 00:08:22,730 --> 00:08:26,973 which ID is equal to the product ID 173 00:08:26,973 --> 00:08:30,976 of the product we're trying to add here. 174 00:08:30,976 --> 00:08:34,559 Now this assumes that every item in this items array 175 00:08:34,559 --> 00:08:37,577 will have a product property, which holds a nested object, 176 00:08:37,577 --> 00:08:39,570 which is of kind product. 177 00:08:39,570 --> 00:08:42,110 And that is simply something we can implement 178 00:08:42,110 --> 00:08:44,070 in the next steps. 179 00:08:44,070 --> 00:08:46,920 It would mean that the item we push into items array 180 00:08:46,920 --> 00:08:49,970 is not just a product, but instead an object, 181 00:08:49,970 --> 00:08:54,201 where product is a nested object, under a product key. 182 00:08:54,201 --> 00:08:57,073 And therefore, we might want to change this now. 183 00:08:57,073 --> 00:09:00,540 And actually before we continue in the for loop, 184 00:09:00,540 --> 00:09:03,332 add a cart item constant here, maybe, 185 00:09:03,332 --> 00:09:07,090 which is a regular JavaScript object created on the fly 186 00:09:07,090 --> 00:09:09,333 with the object literal notation, 187 00:09:09,333 --> 00:09:14,333 where we add a product key which points at this product, 188 00:09:14,580 --> 00:09:17,580 in addition, I'll add a quantity key, 189 00:09:17,580 --> 00:09:19,550 and I'll set it to one here. 190 00:09:19,550 --> 00:09:22,110 We might change this down here, 191 00:09:22,110 --> 00:09:24,320 but I will set it to one as a default, 192 00:09:24,320 --> 00:09:27,833 assuming that it's the first time we add a given product. 193 00:09:28,687 --> 00:09:31,660 And I'll also add a total price here, 194 00:09:31,660 --> 00:09:34,500 which is the total price for this item, 195 00:09:34,500 --> 00:09:36,430 which could be more than one product. 196 00:09:36,430 --> 00:09:38,840 It's one initially, but it could be more later. 197 00:09:38,840 --> 00:09:40,950 And then for initially of course, the price, 198 00:09:40,950 --> 00:09:43,310 the total price, is product dot price, 199 00:09:43,310 --> 00:09:46,790 since we assumed that just one product gets added. 200 00:09:46,790 --> 00:09:48,320 Now that's just the initial state. 201 00:09:48,320 --> 00:09:50,820 We will change it in this for loop. 202 00:09:50,820 --> 00:09:53,230 But it's this cart item, which I want to push here. 203 00:09:53,230 --> 00:09:57,660 And therefore, that's structure our cart items we'll have. 204 00:09:57,660 --> 00:09:59,530 And here's this product property, 205 00:09:59,530 --> 00:10:01,810 which points at the nested product object, 206 00:10:01,810 --> 00:10:03,960 which I use in this if check to get the ID 207 00:10:03,960 --> 00:10:05,970 of this nest of product. 208 00:10:05,970 --> 00:10:08,450 And I compare data to the ID of the product, 209 00:10:08,450 --> 00:10:09,800 which is about to be added. 210 00:10:10,950 --> 00:10:12,770 Now, if I have a match here. 211 00:10:12,770 --> 00:10:15,710 So if for a given item I'm looking at, 212 00:10:15,710 --> 00:10:17,900 the next product that you should be equal 213 00:10:17,900 --> 00:10:21,260 to the product ID of the product I want to add, 214 00:10:21,260 --> 00:10:23,312 then I know that the product I want to add 215 00:10:23,312 --> 00:10:26,390 is already part of the cart. 216 00:10:26,390 --> 00:10:27,487 And in that case, 217 00:10:27,487 --> 00:10:29,790 I'll go to my cart item here, 218 00:10:29,790 --> 00:10:31,190 to this constant, 219 00:10:31,190 --> 00:10:33,217 and I'll change some of these properties. 220 00:10:33,217 --> 00:10:35,499 I'll set the quantity 221 00:10:35,499 --> 00:10:39,660 to cart item dot quantity plus one, for example, 222 00:10:39,660 --> 00:10:41,530 increasing it by one. 223 00:10:41,530 --> 00:10:45,388 in case you wonder why I am able to edit a object 224 00:10:45,388 --> 00:10:47,970 that's marked as const, 225 00:10:47,970 --> 00:10:50,150 please note that I also talked about this 226 00:10:50,150 --> 00:10:51,400 earlier in the course. 227 00:10:51,400 --> 00:10:54,790 This works due to the way JavaScript objects and arrays 228 00:10:54,790 --> 00:10:56,970 are managed under the hood. 229 00:10:56,970 --> 00:10:59,874 They are managed as so-called reference values, 230 00:10:59,874 --> 00:11:02,640 which means in a constant or variable, 231 00:11:02,640 --> 00:11:05,570 we don't store the object or array itself, 232 00:11:05,570 --> 00:11:07,860 instead, just the memory address, 233 00:11:07,860 --> 00:11:11,630 so the address in memory of that object or array. 234 00:11:11,630 --> 00:11:13,850 And that address hasn't changed. 235 00:11:13,850 --> 00:11:16,290 That's why it's still a const, 236 00:11:16,290 --> 00:11:18,150 because I'm not storing the object, 237 00:11:18,150 --> 00:11:21,160 but just a pointer to debt place in memory, 238 00:11:21,160 --> 00:11:22,926 where the object is stored. 239 00:11:22,926 --> 00:11:25,400 And that pointer hasn't changed. 240 00:11:25,400 --> 00:11:28,619 Hence this is a constant, and I can still use that pointer, 241 00:11:28,619 --> 00:11:30,170 which is what I'm doing here, 242 00:11:30,170 --> 00:11:34,480 to change the object that is stored at that address. 243 00:11:34,480 --> 00:11:35,640 That is simply how 244 00:11:35,640 --> 00:11:39,830 so-called reference values in JavaScript work. 245 00:11:39,830 --> 00:11:44,200 And objects and arrays are reference values. 246 00:11:44,200 --> 00:11:47,515 Numbers and strings are not objects, and arrays are. 247 00:11:47,515 --> 00:11:51,050 So that's why I am able to add it here. 248 00:11:51,050 --> 00:11:53,660 Attached you'll find a link to an article and a video 249 00:11:53,660 --> 00:11:55,323 that explains this in greater detail 250 00:11:55,323 --> 00:11:57,503 in case it's still unclear. 251 00:11:58,810 --> 00:12:02,970 So here I'm setting this cart item quantity. 252 00:12:02,970 --> 00:12:03,803 And of course, 253 00:12:03,803 --> 00:12:06,440 now I also want to update the total price, 254 00:12:06,440 --> 00:12:09,050 and that's the old cart item total price, 255 00:12:09,050 --> 00:12:13,313 plus the product dot price of course, like this, 256 00:12:14,590 --> 00:12:16,440 because I added one item, 257 00:12:16,440 --> 00:12:19,823 one entity of that product to my cart item. 258 00:12:21,100 --> 00:12:23,920 So now I update this cart item like this. 259 00:12:23,920 --> 00:12:27,760 And now I have to replace the item in the items array 260 00:12:27,760 --> 00:12:30,600 with that updated cart item. 261 00:12:30,600 --> 00:12:32,000 The product still is the product. 262 00:12:32,000 --> 00:12:33,750 We don't need to override that. 263 00:12:33,750 --> 00:12:37,240 But we did override quantity and total price. 264 00:12:37,240 --> 00:12:39,840 And now you're inside of this if check, 265 00:12:39,840 --> 00:12:41,770 of course, now that I have a match, 266 00:12:41,770 --> 00:12:43,258 and I updated my cart item, 267 00:12:43,258 --> 00:12:47,700 I can reach out to this items for the given index. 268 00:12:47,700 --> 00:12:50,190 That's why I'm using this kind of for loop, 269 00:12:50,190 --> 00:12:53,420 so that I have access to the index of the item 270 00:12:53,420 --> 00:12:55,699 I'm trying to replace like this. 271 00:12:55,699 --> 00:12:59,720 And I replaced this with my updated cart item. 272 00:12:59,720 --> 00:13:00,993 That's what I do here. 273 00:13:02,730 --> 00:13:05,190 So that's how we do add a product, 274 00:13:05,190 --> 00:13:07,540 if it already is part of the cart. 275 00:13:07,540 --> 00:13:11,544 And here after this line, I actually want to return here. 276 00:13:11,544 --> 00:13:16,150 I don't want to continue with this line of code, 277 00:13:16,150 --> 00:13:17,230 for example, 278 00:13:17,230 --> 00:13:19,923 because now I already did add my product 279 00:13:19,923 --> 00:13:22,763 simply by updating an existing item. 280 00:13:23,710 --> 00:13:24,730 And therefore I return, 281 00:13:24,730 --> 00:13:27,460 because the rest of this loop and of this function 282 00:13:27,460 --> 00:13:29,003 shouldn't execute anymore. 283 00:13:29,890 --> 00:13:31,900 And that's what return will achieve here, 284 00:13:31,900 --> 00:13:34,623 since we now returned from this add item function. 285 00:13:35,500 --> 00:13:38,703 So this is a add item function that should do the trick. 286 00:13:38,703 --> 00:13:40,300 Now, of course, 287 00:13:40,300 --> 00:13:43,660 we need a controller action that will trigger this function, 288 00:13:43,660 --> 00:13:46,893 and then a route that points at this controller action. 289 00:13:48,020 --> 00:13:50,800 So Dale for let's go to the cart controller now, 290 00:13:50,800 --> 00:13:54,060 and add a new function, add cart item 291 00:13:54,060 --> 00:13:57,160 could be the name of that function. 292 00:13:57,160 --> 00:13:58,970 And of course we want to make it available 293 00:13:58,970 --> 00:14:00,230 outside of this file. 294 00:14:00,230 --> 00:14:02,120 And it won't be the only action. 295 00:14:02,120 --> 00:14:06,350 Hence I'll export an object, where I export it like this, 296 00:14:06,350 --> 00:14:09,460 make it available like this, outside of the file. 297 00:14:09,460 --> 00:14:12,610 And we get the request and the response here. 298 00:14:12,610 --> 00:14:17,370 And with that, we now need to access the cart of that user. 299 00:14:17,370 --> 00:14:20,420 So we need to dive into the session that belongs to a user 300 00:14:20,420 --> 00:14:23,170 and access the cart that's stored there, 301 00:14:23,170 --> 00:14:25,130 and manipulate that cart. 302 00:14:25,130 --> 00:14:27,713 We need to call the add item method there. 303 00:14:28,650 --> 00:14:31,980 Now for this, I will actually add an extra middleware, 304 00:14:31,980 --> 00:14:34,310 which will name cart dot JS, 305 00:14:34,310 --> 00:14:37,490 which has the job of looking at an incoming request, 306 00:14:37,490 --> 00:14:39,900 and determining whether it's coming from a user 307 00:14:39,900 --> 00:14:43,990 who already has a cart or who doesn't have a cart yet. 308 00:14:43,990 --> 00:14:44,823 And either way, 309 00:14:44,823 --> 00:14:47,493 the cart should then be initialized correctly. 310 00:14:48,790 --> 00:14:52,110 So therefore I'll add a function, initialize cart here 311 00:14:54,090 --> 00:14:54,923 like this. 312 00:14:56,350 --> 00:15:00,430 And there, I will export this initialize cart function 313 00:15:00,430 --> 00:15:03,220 in this cart dot JS middleware file. 314 00:15:03,220 --> 00:15:06,680 And here we get the regular middleware parameter values, 315 00:15:06,680 --> 00:15:08,363 rec, res, and next, 316 00:15:09,490 --> 00:15:13,130 and then here I'll add a cart variable, 317 00:15:13,130 --> 00:15:16,820 because I want to check if we don't have a cart yet, 318 00:15:16,820 --> 00:15:18,950 let's say if in the request session, 319 00:15:18,950 --> 00:15:22,892 the cart property is undefined, as it will be initially 320 00:15:22,892 --> 00:15:25,758 if a user visits this page for the first time. 321 00:15:25,758 --> 00:15:30,758 And in that case, I'll set my cart equal to new cart. 322 00:15:32,560 --> 00:15:34,630 And here I want to use my model. 323 00:15:34,630 --> 00:15:37,300 So I will import my cart model, 324 00:15:37,300 --> 00:15:41,020 by requiring going up one level, dive into models, 325 00:15:41,020 --> 00:15:42,033 cart model. 326 00:15:43,122 --> 00:15:47,490 Then we can initialize a cart like this here, 327 00:15:47,490 --> 00:15:50,280 a new empty cart with no items. 328 00:15:50,280 --> 00:15:53,860 That's where our default empty array 329 00:15:53,860 --> 00:15:57,203 for the items parameter value will become handy. 330 00:15:58,230 --> 00:16:01,074 ELLs, if we find a cart in the session already, 331 00:16:01,074 --> 00:16:03,020 we know that for this user, 332 00:16:03,020 --> 00:16:05,550 we did create a cart in the past. 333 00:16:05,550 --> 00:16:06,575 And in that case, 334 00:16:06,575 --> 00:16:10,690 my cart variable will be set equal to new cart, 335 00:16:10,690 --> 00:16:12,751 but I'll take the items 336 00:16:12,751 --> 00:16:15,330 with which I want to initialize that cart, 337 00:16:15,330 --> 00:16:19,413 from the cart that was already stored in my session. 338 00:16:20,340 --> 00:16:21,930 So therefore here we can now access 339 00:16:21,930 --> 00:16:24,423 rec dot session dot cart dot items, 340 00:16:25,530 --> 00:16:28,810 because a cart object when stored in a session 341 00:16:28,810 --> 00:16:30,989 should be off this kind of cart. 342 00:16:30,989 --> 00:16:34,620 Hence we should have our items property, 343 00:16:34,620 --> 00:16:39,058 because data is what our blueprint says for cart objects. 344 00:16:39,058 --> 00:16:42,840 So we should be able to access the items property here 345 00:16:42,840 --> 00:16:43,850 in the middleware, 346 00:16:43,850 --> 00:16:47,295 and then create a new cart object based on that. 347 00:16:47,295 --> 00:16:49,196 And then I want to make that available 348 00:16:49,196 --> 00:16:52,100 for this request response cycle 349 00:16:52,100 --> 00:16:55,460 in all the other middleware functions and my views, 350 00:16:55,460 --> 00:16:58,670 with help of the good old rest dot locals property 351 00:16:58,670 --> 00:17:00,185 provided by express, 352 00:17:00,185 --> 00:17:04,670 where I will add a cart property, which points at my cart, 353 00:17:04,670 --> 00:17:06,760 which is either a brand new cart, 354 00:17:06,760 --> 00:17:09,290 or a cart that was reinitialized 355 00:17:09,290 --> 00:17:11,119 based on an old cart object 356 00:17:11,119 --> 00:17:13,113 that was stored in the session. 357 00:17:14,460 --> 00:17:17,810 I can't use rec session dot cart just like this, 358 00:17:17,810 --> 00:17:20,170 because A, it might not exist yet, 359 00:17:20,170 --> 00:17:22,109 that's why we have this case, 360 00:17:22,109 --> 00:17:24,900 and B even if it does exist, 361 00:17:24,900 --> 00:17:27,540 the way data is stored in a session 362 00:17:27,540 --> 00:17:29,165 works such that any methods 363 00:17:29,165 --> 00:17:32,030 that might've been attached to an object 364 00:17:32,030 --> 00:17:33,980 are not stored there. 365 00:17:33,980 --> 00:17:37,010 So it would be a cart object that has the items, 366 00:17:37,010 --> 00:17:40,258 but not the methods which we defined in our blueprint. 367 00:17:40,258 --> 00:17:43,760 That's why I'm re initializing it as a brand new object, 368 00:17:43,760 --> 00:17:45,130 based on our blueprint, 369 00:17:45,130 --> 00:17:46,840 where I just take the items 370 00:17:46,840 --> 00:17:49,090 that are stored in the old cart already, 371 00:17:49,090 --> 00:17:52,320 so that we have a new cart object in memory, 372 00:17:52,320 --> 00:17:56,860 in our backend code, based on the old cart data. 373 00:17:56,860 --> 00:17:59,560 And then I make that available with res locals cart, 374 00:17:59,560 --> 00:18:01,840 and then thereafter, I call next, 375 00:18:01,840 --> 00:18:02,960 so that the request 376 00:18:02,960 --> 00:18:05,563 can travel on to the next middleware in line. 377 00:18:06,936 --> 00:18:11,936 Now we need to activate that middleware in app JS. 378 00:18:12,120 --> 00:18:16,250 And here we can now include our cart middleware 379 00:18:16,250 --> 00:18:21,250 by requiring going up one level, 380 00:18:21,320 --> 00:18:24,270 diving into the middleware folder, 381 00:18:24,270 --> 00:18:26,883 the cart middleware like this. 382 00:18:28,190 --> 00:18:31,820 And we then activate it somewhere in our code, 383 00:18:31,820 --> 00:18:35,430 but definitely after we initialize the session. 384 00:18:35,430 --> 00:18:38,560 So let's say, here, 385 00:18:38,560 --> 00:18:41,960 we activate the cart middleware by pointing at it, 386 00:18:41,960 --> 00:18:44,210 so that express can then execute 387 00:18:44,210 --> 00:18:47,613 that cart middleware function we just defined for us. 388 00:18:48,950 --> 00:18:52,568 And this now ensures that there definitely will be 389 00:18:52,568 --> 00:18:57,113 a res locals cart property. 390 00:18:58,138 --> 00:19:00,710 This property will now definitely exist, 391 00:19:00,710 --> 00:19:03,310 because our own middleware guarantees it. 392 00:19:03,310 --> 00:19:05,970 And that means that in the cart controller, 393 00:19:05,970 --> 00:19:07,710 in add cart item, 394 00:19:07,710 --> 00:19:10,550 we cannot access res locals cart. 395 00:19:10,550 --> 00:19:14,392 And this will be an object based on our cart blueprint, 396 00:19:14,392 --> 00:19:19,083 which means we can call, add item here like this, 397 00:19:20,310 --> 00:19:25,310 because in our cart model, we added this add item method, 398 00:19:25,350 --> 00:19:26,470 this method here, 399 00:19:26,470 --> 00:19:28,843 We can call this in the cart controller now. 400 00:19:29,890 --> 00:19:31,060 And to add item, 401 00:19:31,060 --> 00:19:33,593 we need to pass the product that should be added.