1 00:00:02,180 --> 00:00:04,470 Now to make those update buttons work, 2 00:00:04,470 --> 00:00:06,680 it's the same process as always. 3 00:00:06,680 --> 00:00:08,940 We'll need to add a controller action, 4 00:00:08,940 --> 00:00:10,810 a route, and then some 5 00:00:10,810 --> 00:00:12,620 functionality to our model, 6 00:00:12,620 --> 00:00:14,530 and then we need to send the request, 7 00:00:14,530 --> 00:00:16,830 and here I plan to do this with Ajax 8 00:00:16,830 --> 00:00:18,920 so that we don't reload the page, 9 00:00:18,920 --> 00:00:21,500 but instead we just update the parts of the page, 10 00:00:21,500 --> 00:00:23,560 like this price, and the total price, 11 00:00:23,560 --> 00:00:25,710 and the number in the batch year 12 00:00:25,710 --> 00:00:27,483 that needs to be updated. 13 00:00:28,600 --> 00:00:31,870 So therefore let's actually start with the model, 14 00:00:31,870 --> 00:00:33,710 because that is where I will have 15 00:00:33,710 --> 00:00:36,693 the logic for updating our item in the cart. 16 00:00:37,990 --> 00:00:41,250 And now there will be a wide variety of ways 17 00:00:41,250 --> 00:00:43,750 of implementing this. 18 00:00:43,750 --> 00:00:46,100 I'll try to keep it fairly simple 19 00:00:46,100 --> 00:00:49,220 and simply add an update item method 20 00:00:49,220 --> 00:00:52,870 in there where I expect to get 21 00:00:52,870 --> 00:00:57,380 the product ID of the item I want to update. 22 00:00:57,380 --> 00:01:01,070 And then the new quantity of that product, 23 00:01:01,070 --> 00:01:04,242 because it is the quantity that we are changing here. 24 00:01:06,350 --> 00:01:08,710 Now in there, we then have to differentiate 25 00:01:08,710 --> 00:01:10,700 between two cases. 26 00:01:10,700 --> 00:01:13,000 The quantity that is entered here, 27 00:01:13,000 --> 00:01:16,630 could be 0, or even a negative number, 28 00:01:16,630 --> 00:01:18,000 which basically means that we want 29 00:01:18,000 --> 00:01:19,853 to remove that item from the cart. 30 00:01:20,700 --> 00:01:22,920 In that case, I do want to remove it entirely 31 00:01:22,920 --> 00:01:24,530 from the cart. 32 00:01:24,530 --> 00:01:26,240 If it's greater than zero, 33 00:01:26,240 --> 00:01:28,280 I instead know that I want to update 34 00:01:28,280 --> 00:01:30,763 the existing item and change its quantity. 35 00:01:31,970 --> 00:01:34,270 So therefore I'll start by checking new quantity 36 00:01:34,270 --> 00:01:36,100 and check if it's greater than zero, 37 00:01:36,100 --> 00:01:38,050 which means we don't want to remove it. 38 00:01:39,130 --> 00:01:42,270 In that case, I then want to find the item 39 00:01:42,270 --> 00:01:43,990 that should be updated, 40 00:01:43,990 --> 00:01:45,560 and change its quantity 41 00:01:45,560 --> 00:01:48,193 and price, and change the overall cart price. 42 00:01:49,740 --> 00:01:51,840 And actually, I will also have to find 43 00:01:51,840 --> 00:01:53,180 the item that should be removed 44 00:01:53,180 --> 00:01:55,010 if I do want to remove it. 45 00:01:55,010 --> 00:01:58,500 So we can even do that before I checked new quantity. 46 00:01:58,500 --> 00:02:02,030 I can, again, loop through all my items 47 00:02:02,030 --> 00:02:04,260 with that same loop I wrote before 48 00:02:04,260 --> 00:02:06,150 for adding an item, 49 00:02:06,150 --> 00:02:07,320 and therefore, of course, 50 00:02:07,320 --> 00:02:09,440 we could also re factor this into 51 00:02:09,440 --> 00:02:11,890 a separate method that does this. 52 00:02:11,890 --> 00:02:13,523 Here, I will copy it, 53 00:02:15,920 --> 00:02:18,790 and paste it into update item like this. 54 00:02:18,790 --> 00:02:22,330 So again, I move through all the items then, 55 00:02:22,330 --> 00:02:24,570 and then I look for items where 56 00:02:24,570 --> 00:02:26,350 the product ID offer item 57 00:02:26,350 --> 00:02:28,780 matches the product ID I'm getting here 58 00:02:28,780 --> 00:02:31,190 as a parameter value. 59 00:02:31,190 --> 00:02:32,880 And then I want to update the quantity 60 00:02:32,880 --> 00:02:34,143 and total price. 61 00:02:35,090 --> 00:02:36,780 To do that, I'll then create 62 00:02:36,780 --> 00:02:41,000 a cart item helper constant, 63 00:02:41,000 --> 00:02:42,620 which is a new object, 64 00:02:42,620 --> 00:02:46,130 into which I copy item. 65 00:02:46,130 --> 00:02:48,180 So I create a copy of the item 66 00:02:48,180 --> 00:02:49,563 I've found in the end. 67 00:02:50,780 --> 00:02:53,970 This item, I copy it, create a new cart item, 68 00:02:53,970 --> 00:02:55,880 and then on this cart item, 69 00:02:55,880 --> 00:02:58,160 which is that copied old item, 70 00:02:58,160 --> 00:03:01,870 I will set the quantity 71 00:03:01,870 --> 00:03:04,760 that I have for this product, 72 00:03:04,760 --> 00:03:08,150 equal to new quantity, 73 00:03:08,150 --> 00:03:10,120 because we get to that new quantity as 74 00:03:10,120 --> 00:03:11,823 a fixed number, as a input. 75 00:03:13,330 --> 00:03:14,190 I also of course, 76 00:03:14,190 --> 00:03:16,250 need to update the total price, 77 00:03:16,250 --> 00:03:18,410 and that in the end should to be 78 00:03:18,410 --> 00:03:21,150 that new quantity, which I'm getting, 79 00:03:21,150 --> 00:03:23,310 times the product price. 80 00:03:23,310 --> 00:03:26,250 Because the product price hasn't changed here, 81 00:03:26,250 --> 00:03:28,940 we'll handle the scenario that it might change 82 00:03:28,940 --> 00:03:31,810 whilst we're working in the cart later. 83 00:03:31,810 --> 00:03:34,290 So here we assume it hasn't changed. 84 00:03:34,290 --> 00:03:35,820 And therefore we just multiply 85 00:03:35,820 --> 00:03:38,103 the product price with the new quantity. 86 00:03:39,090 --> 00:03:42,720 And then we replace the old cart item with that 87 00:03:42,720 --> 00:03:43,663 new item. 88 00:03:45,800 --> 00:03:48,850 We also need to update the total quantity of the cart, 89 00:03:48,850 --> 00:03:51,960 and that of course depends on the new quantity. 90 00:03:51,960 --> 00:03:54,645 We basically have to increase or decrease 91 00:03:54,645 --> 00:03:56,860 the total cart quantity, 92 00:03:56,860 --> 00:04:00,100 based on that new quantity and the difference to 93 00:04:00,100 --> 00:04:01,513 the previous quantity. 94 00:04:02,700 --> 00:04:05,930 So therefore, I'll calculate that, 95 00:04:05,930 --> 00:04:09,510 the quantity change, 96 00:04:09,510 --> 00:04:13,200 by calculating new quantity, 97 00:04:13,200 --> 00:04:16,160 minus item.quantity, 98 00:04:16,160 --> 00:04:18,870 item.quantity is the old quantity. 99 00:04:18,870 --> 00:04:20,190 So I get the difference between 100 00:04:20,190 --> 00:04:22,140 the new and the old quantity here. 101 00:04:22,140 --> 00:04:23,600 It will be a positive number 102 00:04:23,600 --> 00:04:25,240 if the new quantity is higher, 103 00:04:25,240 --> 00:04:27,233 and a negative number otherwise. 104 00:04:28,450 --> 00:04:29,283 And then here, 105 00:04:29,283 --> 00:04:31,190 the total quantity of the cart, 106 00:04:31,190 --> 00:04:34,290 is basically this total quantity, 107 00:04:34,290 --> 00:04:36,340 total quantity, 108 00:04:36,340 --> 00:04:39,420 plus the quantity change. 109 00:04:39,420 --> 00:04:40,840 That could be a negative number, 110 00:04:40,840 --> 00:04:43,910 in which case it's minus quantity change automatically. 111 00:04:43,910 --> 00:04:46,333 Otherwise, we add that new quantity. 112 00:04:47,900 --> 00:04:49,590 Now for the price, it, of course, 113 00:04:49,590 --> 00:04:51,520 is this old total price 114 00:04:51,520 --> 00:04:54,250 plus quantity change, 115 00:04:54,250 --> 00:04:56,203 times product price. 116 00:04:58,098 --> 00:05:00,080 That is the change in price 117 00:05:00,080 --> 00:05:03,660 that we want to add to the old cart price. 118 00:05:03,660 --> 00:05:06,330 It's not new quantity, times product price, 119 00:05:06,330 --> 00:05:07,510 because I don't want to get 120 00:05:07,510 --> 00:05:10,800 the entire bulk price of the entire item, 121 00:05:10,800 --> 00:05:12,340 but just of the change, 122 00:05:12,340 --> 00:05:15,483 because we add it to the old total price of the cart. 123 00:05:16,850 --> 00:05:20,430 So this could be one way of updating the cart item. 124 00:05:20,430 --> 00:05:22,130 However, this always assumes 125 00:05:22,130 --> 00:05:24,780 that new quantity will be a positive number. 126 00:05:24,780 --> 00:05:27,210 And I had this check here earlier, 127 00:05:27,210 --> 00:05:29,210 which now is only executed once 128 00:05:29,210 --> 00:05:30,620 we already updated everything. 129 00:05:30,620 --> 00:05:32,120 And that's of course too late. 130 00:05:33,370 --> 00:05:34,450 Instead, what I want to do, 131 00:05:34,450 --> 00:05:36,240 is I'll cut that if check, 132 00:05:36,240 --> 00:05:37,780 and then here, 133 00:05:37,780 --> 00:05:40,020 if we found a matching item, 134 00:05:40,020 --> 00:05:42,180 then of course, this way of updating 135 00:05:42,180 --> 00:05:45,520 only applies if new quantity is positive. 136 00:05:45,520 --> 00:05:46,820 So therefore, then we can add 137 00:05:46,820 --> 00:05:49,040 a never nested if check here, 138 00:05:49,040 --> 00:05:52,080 or combine this into one bigger If check, 139 00:05:52,080 --> 00:05:52,913 and compare. 140 00:05:52,913 --> 00:05:54,260 If we have a match, 141 00:05:54,260 --> 00:05:57,270 and new quantity is greater than zero, 142 00:05:57,270 --> 00:05:59,040 then I want to execute this logic, 143 00:05:59,040 --> 00:06:00,093 and then return. 144 00:06:01,600 --> 00:06:03,190 Else if, 145 00:06:03,190 --> 00:06:07,450 we have this condition that doesn't change, 146 00:06:07,450 --> 00:06:11,050 but then, new quantity is actually smaller 147 00:06:11,050 --> 00:06:13,510 or equal to zero, 148 00:06:13,510 --> 00:06:16,940 then of course, we want to execute a different logic. 149 00:06:16,940 --> 00:06:20,653 Then, I want to remove that specific cart item entirely. 150 00:06:21,680 --> 00:06:23,260 So, in this case, 151 00:06:23,260 --> 00:06:24,093 what I want to do is, 152 00:06:24,093 --> 00:06:26,510 I want to reach out to this items, 153 00:06:26,510 --> 00:06:28,910 and call the built in splice method, 154 00:06:28,910 --> 00:06:32,120 which exists on a raise in JavaScript, 155 00:06:32,120 --> 00:06:33,860 which allows us to remove items 156 00:06:33,860 --> 00:06:34,940 from an array, 157 00:06:34,940 --> 00:06:36,820 by specifying the index of 158 00:06:36,820 --> 00:06:38,860 the item that should be removed. 159 00:06:38,860 --> 00:06:41,873 In this case, I, which comes from this loop, 160 00:06:43,030 --> 00:06:44,670 and then the number of items 161 00:06:44,670 --> 00:06:47,220 that should be removed, starting at the debt index. 162 00:06:47,220 --> 00:06:48,850 And here, I want to remove exactly 163 00:06:48,850 --> 00:06:51,040 one item, the one item for which a 164 00:06:51,040 --> 00:06:54,373 quantity equal or smaller than 0 was entered. 165 00:06:56,540 --> 00:06:57,990 This should do the trick here. 166 00:06:57,990 --> 00:07:00,340 Of course, we then also have to update 167 00:07:00,340 --> 00:07:03,600 the total quantity and total price. 168 00:07:03,600 --> 00:07:05,740 And to do that, we need to find out 169 00:07:05,740 --> 00:07:07,828 what the quantity and total price 170 00:07:07,828 --> 00:07:11,740 of that cart item that we removed was. 171 00:07:11,740 --> 00:07:13,680 So for that, we need this item 172 00:07:13,680 --> 00:07:15,530 to which we got access here, 173 00:07:15,530 --> 00:07:17,640 and the total cart quantity is then 174 00:07:17,640 --> 00:07:21,850 the total cart quantity minus item, 175 00:07:21,850 --> 00:07:24,010 so that cart item, which we removed, 176 00:07:24,010 --> 00:07:25,940 it still exists in this variable, 177 00:07:25,940 --> 00:07:27,290 so we can still access it, 178 00:07:27,290 --> 00:07:30,170 it's just not part of items anymore, 179 00:07:30,170 --> 00:07:31,820 but we can access this variable, 180 00:07:31,820 --> 00:07:33,700 and get the quantity here. 181 00:07:33,700 --> 00:07:35,380 And it's this quantity of this item, 182 00:07:35,380 --> 00:07:38,370 which we want to remove from the cart quantity. 183 00:07:38,370 --> 00:07:40,150 And for total price, it's equal 184 00:07:40,150 --> 00:07:43,230 to minus equal to reduce the total price 185 00:07:43,230 --> 00:07:46,500 by a value, and the value by which I want 186 00:07:46,500 --> 00:07:50,172 to reduce the total price is item.totalPrice, 187 00:07:50,172 --> 00:07:53,433 so the total price for this single cart item. 188 00:07:55,630 --> 00:07:57,900 That should be the correct logic. 189 00:07:57,900 --> 00:08:00,883 And now we can wire it up to the cart controller. 190 00:08:01,890 --> 00:08:03,760 There, we can add another function, 191 00:08:03,760 --> 00:08:07,210 the update cart item function, for example, 192 00:08:07,210 --> 00:08:08,560 which of course gets a request 193 00:08:08,560 --> 00:08:10,163 and a response as always, 194 00:08:11,200 --> 00:08:12,990 and which we want to export here, 195 00:08:12,990 --> 00:08:14,393 to make it available outside 196 00:08:14,393 --> 00:08:15,993 of this file. 197 00:08:17,070 --> 00:08:20,070 And in here, I now need to 198 00:08:20,070 --> 00:08:21,980 call this a 199 00:08:21,980 --> 00:08:23,433 function on my cart. 200 00:08:24,380 --> 00:08:26,320 So just as before I get my cart, 201 00:08:26,320 --> 00:08:28,493 by accessing res locals cart, 202 00:08:29,370 --> 00:08:32,253 that's what I also did for adding a item to the cart. 203 00:08:33,600 --> 00:08:35,030 And then on this cart, 204 00:08:35,030 --> 00:08:36,750 which I got from Res locals, 205 00:08:36,750 --> 00:08:39,510 I can call update item 206 00:08:39,510 --> 00:08:43,130 because that is the name I chose 207 00:08:43,130 --> 00:08:47,230 here in my cart model. 208 00:08:47,230 --> 00:08:49,510 I named this update item. 209 00:08:49,510 --> 00:08:51,540 So therefore, that is the function, 210 00:08:51,540 --> 00:08:54,140 the method I wanna call in the controller, 211 00:08:54,140 --> 00:08:57,303 and to update item, 212 00:08:58,850 --> 00:08:59,840 like this, 213 00:08:59,840 --> 00:09:03,040 I want to pass the product ID, 214 00:09:03,040 --> 00:09:04,950 that's what we expect here, 215 00:09:04,950 --> 00:09:07,100 and the new quantity. 216 00:09:07,100 --> 00:09:10,923 And I simply expect to get both values from the request. 217 00:09:11,950 --> 00:09:14,940 It will be a request that has a request body 218 00:09:14,940 --> 00:09:18,450 because it won't be a get or delete request, 219 00:09:18,450 --> 00:09:21,720 it will be a post, or a put, or a patch request, 220 00:09:21,720 --> 00:09:24,010 we'll decide on this later. 221 00:09:24,010 --> 00:09:25,110 But it will have a body, 222 00:09:25,110 --> 00:09:28,630 because post, patch, and put, all have bodies, 223 00:09:28,630 --> 00:09:31,023 and therefore I can access request body, 224 00:09:31,910 --> 00:09:35,220 product ID, for the product ID, 225 00:09:35,220 --> 00:09:37,640 and assume that I get the new quantity 226 00:09:37,640 --> 00:09:40,513 on request body, quantity, let's say. 227 00:09:41,490 --> 00:09:44,040 And then I update the cart item. 228 00:09:44,040 --> 00:09:46,937 And after I updated it, just as before, 229 00:09:46,937 --> 00:09:49,450 I want to save it back into my session, 230 00:09:49,450 --> 00:09:52,083 with req session cart equals cart. 231 00:09:54,380 --> 00:09:58,180 Now, this update cart item controller action, 232 00:09:58,180 --> 00:10:03,180 should be invoked by requests that are sent as HX requests 233 00:10:03,390 --> 00:10:05,813 from insight browser site, JavaScript. 234 00:10:06,797 --> 00:10:09,960 Therefore I'll send back a json response, 235 00:10:09,960 --> 00:10:11,193 with res json. 236 00:10:12,340 --> 00:10:15,820 And then, as always, we can provide a message, 237 00:10:15,820 --> 00:10:17,290 if we want to, 238 00:10:17,290 --> 00:10:18,360 but more importantly, 239 00:10:18,360 --> 00:10:21,710 I want to send back the updated cart data. 240 00:10:21,710 --> 00:10:25,640 Therefore I'll add a updated cart data property here, 241 00:10:25,640 --> 00:10:27,210 and that is a nested object, 242 00:10:27,210 --> 00:10:30,290 where I'll set the new total 243 00:10:30,290 --> 00:10:31,810 quantity, 244 00:10:31,810 --> 00:10:35,573 equal to cart.total quantity, 245 00:10:36,940 --> 00:10:39,220 and the new total price is 246 00:10:39,220 --> 00:10:42,590 equal to cart.total price. 247 00:10:42,590 --> 00:10:43,678 And I also want to send back 248 00:10:43,678 --> 00:10:47,330 the new price for the product that was updated. 249 00:10:47,330 --> 00:10:52,050 So the updated item price is then what? 250 00:10:52,050 --> 00:10:54,190 Well, we could look into the cart items 251 00:10:54,190 --> 00:10:57,220 and search for the item with that product ID, 252 00:10:57,220 --> 00:10:59,500 but since we updated the item here, 253 00:10:59,500 --> 00:11:00,840 with update item, 254 00:11:00,840 --> 00:11:03,190 it would be more convenient if update item 255 00:11:03,190 --> 00:11:05,580 could simply return some metadata 256 00:11:05,580 --> 00:11:06,610 about the update, 257 00:11:06,610 --> 00:11:08,203 instead of returning nothing. 258 00:11:09,370 --> 00:11:10,700 Instead of returning nothing, 259 00:11:10,700 --> 00:11:13,260 we could return an object, where we have 260 00:11:13,260 --> 00:11:16,360 the updated item price, 261 00:11:16,360 --> 00:11:20,270 which is this cart item total price here. 262 00:11:20,270 --> 00:11:21,770 That's the new item price, 263 00:11:21,770 --> 00:11:23,023 which we calculated, 264 00:11:23,890 --> 00:11:25,880 and we could always return more data, 265 00:11:25,880 --> 00:11:28,480 but that's the main data I'm interested here. 266 00:11:28,480 --> 00:11:31,080 So I want to return it here, 267 00:11:31,080 --> 00:11:33,890 and also return it in the else if case. 268 00:11:33,890 --> 00:11:37,100 There, it's just not cart item.total price, 269 00:11:37,100 --> 00:11:39,010 but instead let's say 0, 270 00:11:39,010 --> 00:11:40,330 because of course here, 271 00:11:40,330 --> 00:11:42,423 we removed the entire cart item. 272 00:11:43,890 --> 00:11:45,682 But now by returning this object here, 273 00:11:45,682 --> 00:11:47,350 in update item, 274 00:11:47,350 --> 00:11:50,420 back in cart controller, we can 275 00:11:50,420 --> 00:11:51,580 accept it. 276 00:11:51,580 --> 00:11:54,020 Updated item data could be the name 277 00:11:54,020 --> 00:11:57,510 of the constant that stores the return data. 278 00:11:57,510 --> 00:12:00,660 And we could use that constant that returned data, 279 00:12:00,660 --> 00:12:03,530 to use it here for sending back that data, 280 00:12:03,530 --> 00:12:06,210 and accessing the updated 281 00:12:06,210 --> 00:12:09,643 item price on the updated item data. 282 00:12:10,820 --> 00:12:13,040 Updated item price, because that's 283 00:12:13,040 --> 00:12:16,060 the property name I chose here in cart model 284 00:12:16,060 --> 00:12:18,630 for this property in this object, 285 00:12:18,630 --> 00:12:20,390 which I'm returning here. 286 00:12:20,390 --> 00:12:22,800 So this updated item price, 287 00:12:22,800 --> 00:12:24,500 is what I access here. 288 00:12:24,500 --> 00:12:25,760 And that is what I return 289 00:12:25,760 --> 00:12:27,923 as part of the json response. 290 00:12:28,960 --> 00:12:31,820 That could be the cart controller. 291 00:12:31,820 --> 00:12:34,153 Now we need to wire it up to our route. 292 00:12:35,380 --> 00:12:36,810 So for this in cart routes, 293 00:12:36,810 --> 00:12:38,730 we can register a new route. 294 00:12:38,730 --> 00:12:39,760 And now it's up to you, 295 00:12:39,760 --> 00:12:43,950 whether that should be a post, a put, or a patch route. 296 00:12:43,950 --> 00:12:45,760 Now, typically post makes sense, 297 00:12:45,760 --> 00:12:49,340 if you are about to add and store new data. 298 00:12:49,340 --> 00:12:51,923 Here we are updating existing data. 299 00:12:52,860 --> 00:12:55,160 In such cases, you typically use put, 300 00:12:55,160 --> 00:12:58,850 if you replace the existing data, or patch, 301 00:12:58,850 --> 00:13:01,930 if you update parts of the existing data. 302 00:13:01,930 --> 00:13:04,270 And I think it's fair to say that here 303 00:13:04,270 --> 00:13:07,000 we're updating parts of the existing data. 304 00:13:07,000 --> 00:13:08,496 We're updating the cart items, 305 00:13:08,496 --> 00:13:11,783 but only the quantity of of one single item. 306 00:13:12,880 --> 00:13:15,830 So the path here could be slash items. 307 00:13:15,830 --> 00:13:18,210 Again, it will be slash cart slash items 308 00:13:18,210 --> 00:13:19,700 in the end because of our setting 309 00:13:19,700 --> 00:13:21,093 in the app JS file. 310 00:13:21,950 --> 00:13:24,850 And I want to point at cart controller, 311 00:13:24,850 --> 00:13:26,223 update cart item. 312 00:13:27,290 --> 00:13:28,520 And then this request, 313 00:13:28,520 --> 00:13:30,670 which we send as a patch request 314 00:13:30,670 --> 00:13:33,820 to this path needs to have this data, 315 00:13:33,820 --> 00:13:36,980 which we extract in our controller action, 316 00:13:36,980 --> 00:13:40,060 the product ID and the quantity, 317 00:13:40,060 --> 00:13:43,720 and also the CSRF token because it's not a get request, 318 00:13:43,720 --> 00:13:46,270 and therefore we need to add the CSRF token, 319 00:13:46,270 --> 00:13:48,423 because of our CSRF middleware. 320 00:13:49,680 --> 00:13:51,670 Still, that's the first step. 321 00:13:51,670 --> 00:13:53,400 In the next step, we will now write 322 00:13:53,400 --> 00:13:56,200 the front end code for listening to clicks 323 00:13:56,200 --> 00:13:57,580 on the update button, 324 00:13:57,580 --> 00:13:59,470 and for then sending the appropriate 325 00:13:59,470 --> 00:14:00,303 request.