1 00:00:02,050 --> 00:00:04,850 So, how should view and edit work 2 00:00:04,850 --> 00:00:06,410 for the product? 3 00:00:06,410 --> 00:00:07,560 Well, if I click it, 4 00:00:07,560 --> 00:00:11,640 in the end I wanna load this form with all the details 5 00:00:11,640 --> 00:00:13,930 for the chosen product filled in. 6 00:00:13,930 --> 00:00:15,970 And then I want to be able to save this, 7 00:00:15,970 --> 00:00:18,090 to save the updated product 8 00:00:18,090 --> 00:00:20,493 that is actually all I would like to do here. 9 00:00:21,400 --> 00:00:24,420 Now, to make this work, we need a new view of course, 10 00:00:24,420 --> 00:00:26,630 we need a view for updating, 11 00:00:26,630 --> 00:00:30,060 so I will copy the new-product.ejs file 12 00:00:30,060 --> 00:00:33,123 and rename it to update-product.ejs file. 13 00:00:34,730 --> 00:00:36,730 Now, of course in both ejs files, 14 00:00:36,730 --> 00:00:39,880 we now have basically the same form. 15 00:00:39,880 --> 00:00:42,600 And whilst we could have this duplication, 16 00:00:42,600 --> 00:00:45,360 it's a bit more elegant to add a new include, 17 00:00:45,360 --> 00:00:47,800 which we could name product-form.ejs 18 00:00:48,750 --> 00:00:52,390 and we then grab that form from new-product 19 00:00:52,390 --> 00:00:55,200 this entire form with all the elements in there 20 00:00:55,200 --> 00:00:58,863 and we cut that and add that into product-form. 21 00:00:59,940 --> 00:01:02,860 Here we now just need to make sure that the submitPath 22 00:01:02,860 --> 00:01:04,930 actually is flexible, 23 00:01:04,930 --> 00:01:07,020 because we'll have different submitPaths 24 00:01:07,020 --> 00:01:10,743 for adding a new product or updating an existing product. 25 00:01:11,910 --> 00:01:16,180 So, actually here I'll replace that with an ejs placeholder, 26 00:01:16,180 --> 00:01:20,723 where I expect to get the submitPath let's say. 27 00:01:22,220 --> 00:01:23,270 But now with that, 28 00:01:23,270 --> 00:01:26,720 that form lifts in the product-form.ejs file. 29 00:01:26,720 --> 00:01:30,383 And back in new-product, we can now include it, 30 00:01:31,280 --> 00:01:35,150 we can include it by reaching out to includes 31 00:01:35,150 --> 00:01:39,120 and then product-form. 32 00:01:39,120 --> 00:01:42,850 And now we just have to pass in that second parameter value 33 00:01:42,850 --> 00:01:44,760 where we set that submitPath, 34 00:01:44,760 --> 00:01:47,410 which we just added to the template. 35 00:01:47,410 --> 00:01:50,960 In case of adding a new product to admin/products 36 00:01:50,960 --> 00:01:52,623 that's the path I had before. 37 00:01:54,140 --> 00:01:58,660 But now we can copy that included element here 38 00:01:58,660 --> 00:02:02,590 that included snippet and go to update-product. 39 00:02:02,590 --> 00:02:05,250 This view we added a second ago 40 00:02:05,250 --> 00:02:10,250 and there we now replaced this form with that include, 41 00:02:10,720 --> 00:02:13,080 but the submiPath will be a different one 42 00:02:13,080 --> 00:02:14,580 we'll change it in the second. 43 00:02:15,620 --> 00:02:17,580 Add new product is also wrong, 44 00:02:17,580 --> 00:02:20,450 here instead I wanna say Update Product 45 00:02:21,300 --> 00:02:25,443 and also say Update product up here. 46 00:02:26,900 --> 00:02:29,690 And then here for the submitPath of the form 47 00:02:29,690 --> 00:02:32,560 if we are editing an existing product, 48 00:02:32,560 --> 00:02:36,850 I would say that the path should be /admin/products/ 49 00:02:36,850 --> 00:02:39,783 and then the id of the product that's being edited. 50 00:02:40,990 --> 00:02:43,330 So, therefore here I'll then concatenate 51 00:02:43,330 --> 00:02:46,320 a new value to the string with a +, 52 00:02:46,320 --> 00:02:48,230 so add something to that string 53 00:02:48,230 --> 00:02:52,690 and that could be /product.id, the id of the product 54 00:02:52,690 --> 00:02:56,173 which we will soon pass as a value into this template. 55 00:02:57,190 --> 00:02:59,663 We're not doing that yet, but we'll soon do that. 56 00:03:00,590 --> 00:03:04,260 And speaking of that that is something we should do now, 57 00:03:04,260 --> 00:03:06,560 we should make sure that in our product model, 58 00:03:06,560 --> 00:03:09,720 we got a method for finding a model by id, 59 00:03:09,720 --> 00:03:11,750 a product by id I mean. 60 00:03:11,750 --> 00:03:13,820 And that in the admin.controller, 61 00:03:13,820 --> 00:03:18,240 we then use that method to find a specific product. 62 00:03:18,240 --> 00:03:21,570 For that let's actually start in the routes files though 63 00:03:21,570 --> 00:03:26,570 in the admin.routes, because there I now want a new route 64 00:03:26,740 --> 00:03:30,840 that allows us to load this update page we just added. 65 00:03:30,840 --> 00:03:32,730 So, this template we just worked on 66 00:03:32,730 --> 00:03:34,890 and then a route that allows us 67 00:03:34,890 --> 00:03:37,443 to handle the submission of the product data. 68 00:03:38,320 --> 00:03:41,310 For this we need a get route for a loading that page 69 00:03:41,310 --> 00:03:46,310 and the path here could be /products/ and then the id. 70 00:03:46,340 --> 00:03:48,220 This should be a dynamic route, 71 00:03:48,220 --> 00:03:51,770 because the id will be different for different products. 72 00:03:51,770 --> 00:03:54,480 And you learned that you can set up dynamic routes 73 00:03:54,480 --> 00:03:57,340 with the route parameters by adding colon 74 00:03:58,579 --> 00:04:01,360 and then a placeholder name of your choice, for example id 75 00:04:01,360 --> 00:04:05,393 or productId whatever you want, I'll go for id. 76 00:04:06,370 --> 00:04:08,680 So, this will then be a different value 77 00:04:08,680 --> 00:04:11,430 every time this route is visited. 78 00:04:11,430 --> 00:04:14,120 It's the value that will be entered in the URL, 79 00:04:14,120 --> 00:04:17,188 this here is just a placeholder and we will be able 80 00:04:17,188 --> 00:04:21,220 to get the concrete value that was entered in the URL 81 00:04:21,220 --> 00:04:24,700 with help of that placeholder in the controller action 82 00:04:24,700 --> 00:04:26,033 that will be executed. 83 00:04:27,620 --> 00:04:29,620 This get route isn't everything though, 84 00:04:29,620 --> 00:04:33,270 I also want a post route for that same path, 85 00:04:33,270 --> 00:04:36,330 because that is the route that will be visited 86 00:04:36,330 --> 00:04:39,773 whenever that form is submitted that update form. 87 00:04:40,870 --> 00:04:44,370 Now, we need the two controller actions for these new routes 88 00:04:44,370 --> 00:04:46,950 and therefore, in admin.controller, 89 00:04:46,950 --> 00:04:48,960 let's say at the bottom of the file, 90 00:04:48,960 --> 00:04:51,370 though the position is up to you. 91 00:04:51,370 --> 00:04:56,370 I'll add a getUpdateProduct function 92 00:04:56,990 --> 00:04:58,590 and then also another function 93 00:04:58,590 --> 00:05:02,163 which I'll name updateProduct that's the function 94 00:05:02,163 --> 00:05:05,780 that will be triggered when the post request arrives. 95 00:05:05,780 --> 00:05:08,403 Now, we should expose these two functions, 96 00:05:10,970 --> 00:05:14,453 simply by adding them to this exported object. 97 00:05:15,970 --> 00:05:19,200 And now before we add any logic to these functions, 98 00:05:19,200 --> 00:05:24,200 we of course should go to the admin.routes file again 99 00:05:26,470 --> 00:05:28,983 and point at these newly added actions. 100 00:05:30,150 --> 00:05:31,830 So here for get, 101 00:05:31,830 --> 00:05:33,980 I point at adminController.getUpdateProduct 102 00:05:36,960 --> 00:05:38,340 and for the post route 103 00:05:38,340 --> 00:05:42,573 it's adminController.updateProduct like this. 104 00:05:44,940 --> 00:05:48,160 Now, we will get that id and therefore in our model, 105 00:05:48,160 --> 00:05:53,110 in our product.model we can add a new method, 106 00:05:53,110 --> 00:05:56,935 a static method actually, a static async method, 107 00:05:56,935 --> 00:05:59,270 findById could be a fitting name, 108 00:05:59,270 --> 00:06:02,190 because there I expect to get the productId 109 00:06:02,190 --> 00:06:04,430 as a parameter value. 110 00:06:04,430 --> 00:06:06,680 And then I'm wanna find a matching product 111 00:06:06,680 --> 00:06:09,053 in the database by that id. 112 00:06:09,950 --> 00:06:13,690 So, now in here I wanna use my database 113 00:06:13,690 --> 00:06:16,570 and there of course, the products collection 114 00:06:17,480 --> 00:06:20,447 and here we can find a specific entry with help of 115 00:06:20,447 --> 00:06:21,923 the findOne method. 116 00:06:23,080 --> 00:06:25,550 Now, findOne takes a parameter value, 117 00:06:25,550 --> 00:06:28,240 which is an object that allows us to describe 118 00:06:28,240 --> 00:06:30,720 the filtering criteria. 119 00:06:30,720 --> 00:06:32,860 And here I wanna look for the product 120 00:06:32,860 --> 00:06:35,500 where the _id in the database, 121 00:06:35,500 --> 00:06:39,100 so the values stored under _id in the database 122 00:06:39,100 --> 00:06:40,983 matches the id I'm getting here. 123 00:06:42,200 --> 00:06:44,960 Now, the id I'm getting here will be a string 124 00:06:44,960 --> 00:06:48,620 and then the database we have these ObjectId things. 125 00:06:48,620 --> 00:06:50,780 So, to match with ObjectId here, 126 00:06:50,780 --> 00:06:55,780 what we can do is we can actually import mongodb 127 00:06:56,090 --> 00:07:00,700 by requiring mongodb here in the product.model. 128 00:07:00,700 --> 00:07:04,800 And we can manually construct such an ObjectId, id 129 00:07:04,800 --> 00:07:09,500 based on our string id, for this I'll get my prodId here 130 00:07:11,140 --> 00:07:14,643 by calling new mongodb.ObjectId, 131 00:07:16,460 --> 00:07:18,040 which is a constructor function 132 00:07:18,040 --> 00:07:20,483 provided by the mongodb package. 133 00:07:21,470 --> 00:07:25,170 We can pass our productId as a string to ObjectId 134 00:07:25,170 --> 00:07:28,563 and we'll get back an ObjectId, id thereafter. 135 00:07:29,640 --> 00:07:34,070 And then we can use this ObjectId here for this search 136 00:07:34,070 --> 00:07:36,283 for finding one document. 137 00:07:37,640 --> 00:07:40,750 And I will await this and eventually I will hopefully 138 00:07:40,750 --> 00:07:44,253 get my product, which I then of course return. 139 00:07:46,590 --> 00:07:48,470 Of course though that might fail, 140 00:07:48,470 --> 00:07:51,623 I might not actually find a product with that id. 141 00:07:52,460 --> 00:07:55,880 In that case I wanna handle this appropriately 142 00:07:55,880 --> 00:07:57,650 and what I'll do in that case 143 00:07:57,650 --> 00:08:01,737 is here I will check if (!product), 144 00:08:03,550 --> 00:08:06,060 so if I didn't find a product 145 00:08:06,060 --> 00:08:08,770 in that case I will actually not return it, 146 00:08:08,770 --> 00:08:11,363 but I'll throw a custom error instead. 147 00:08:12,370 --> 00:08:16,190 You can generate your own errors and we can then handle that 148 00:08:16,190 --> 00:08:18,320 in the admin.controller. 149 00:08:18,320 --> 00:08:20,860 What I'll do here is I'll create a new error object 150 00:08:20,860 --> 00:08:22,860 with the built in error class 151 00:08:22,860 --> 00:08:26,170 that's provided by JavaScript out of the box 152 00:08:26,170 --> 00:08:28,210 and we can pass an error message in here, 153 00:08:28,210 --> 00:08:33,197 like, "Could not find product with provided id." 154 00:08:35,809 --> 00:08:38,582 And we can then throw this error like that. 155 00:08:40,500 --> 00:08:43,610 We can even add some extra data to the error object, 156 00:08:43,610 --> 00:08:47,180 just as we can add data to any object in JavaScript 157 00:08:47,180 --> 00:08:49,760 by using the dot notation and adding a property 158 00:08:49,760 --> 00:08:51,410 that doesn't exist yet. 159 00:08:51,410 --> 00:08:55,750 For example, a code property which I add, 160 00:08:55,750 --> 00:09:00,750 which I set to 404, because that's the default status code, 161 00:09:01,960 --> 00:09:05,163 the default HTTP status code for not found. 162 00:09:06,120 --> 00:09:07,750 You don't have to use it here, 163 00:09:07,750 --> 00:09:11,360 because we're not sending back a HTTP response here. 164 00:09:11,360 --> 00:09:13,040 Instead, I just set it here, 165 00:09:13,040 --> 00:09:15,200 because I will then later use it 166 00:09:15,200 --> 00:09:20,200 to send back a 404 response if we have this specific error 167 00:09:20,370 --> 00:09:23,680 and to identify this specific error later, 168 00:09:23,680 --> 00:09:25,123 I'll give it to this code. 169 00:09:26,400 --> 00:09:28,857 So, we throw this error if we don't find a product 170 00:09:28,857 --> 00:09:32,493 for the given id, otherwise we return product. 171 00:09:34,200 --> 00:09:37,780 It's also worth mentioning that generating 172 00:09:37,780 --> 00:09:39,960 this ObjectId can fail, 173 00:09:39,960 --> 00:09:43,250 if we provide an invalid productId here. 174 00:09:43,250 --> 00:09:45,330 And therefore actually what I do here 175 00:09:45,330 --> 00:09:49,543 is I will also wrap this with try/catch here, 176 00:09:50,460 --> 00:09:55,270 the generation of this productId and I'll catch this error 177 00:09:55,270 --> 00:09:57,640 that I might get here. 178 00:09:57,640 --> 00:10:02,640 And I convert productId or prodId here into a variable, 179 00:10:03,220 --> 00:10:06,920 which can then be set in try, we have to do it like this, 180 00:10:06,920 --> 00:10:10,810 because of scoping if I would create a constant here in try 181 00:10:10,810 --> 00:10:12,910 it would only be available there, 182 00:10:12,910 --> 00:10:16,190 doing it like this it's available outside of try as well. 183 00:10:16,190 --> 00:10:18,230 And if we make it into this catch block, 184 00:10:18,230 --> 00:10:21,220 which means generating the ObjectId failed, 185 00:10:21,220 --> 00:10:24,380 then I will also throw this error again, 186 00:10:24,380 --> 00:10:27,150 so that we can handle it into controller, 187 00:10:27,150 --> 00:10:29,870 but I am handling it here at first time 188 00:10:29,870 --> 00:10:33,750 so that I can also add my code property 189 00:10:33,750 --> 00:10:36,170 to this error object here. 190 00:10:36,170 --> 00:10:38,950 Because no matter if I didn't find a product 191 00:10:38,950 --> 00:10:41,800 or if generating that id already failed, 192 00:10:41,800 --> 00:10:44,180 it means that we are dealing with an id 193 00:10:44,180 --> 00:10:46,850 that doesn't lead to data in the database. 194 00:10:46,850 --> 00:10:47,960 And in that case, 195 00:10:47,960 --> 00:10:51,700 I wanna set my 404 error so that I can later show 196 00:10:51,700 --> 00:10:53,593 the appropriate error message. 197 00:10:55,460 --> 00:10:57,710 With all of that we built 198 00:10:57,710 --> 00:11:00,830 a little bit more complex findById method, 199 00:11:00,830 --> 00:11:04,350 which we can now use to find a product by id. 200 00:11:04,350 --> 00:11:08,040 And as long as it's a valid id for an existing product, 201 00:11:08,040 --> 00:11:10,270 we also won't run into the errors 202 00:11:10,270 --> 00:11:11,993 which we are generating in here. 203 00:11:13,160 --> 00:11:17,410 So, now back in admin.controller in getUpdateProduct, 204 00:11:17,410 --> 00:11:21,830 we get the req and the res and we can now add async here, 205 00:11:21,830 --> 00:11:24,470 because we'll be dealing with promises. 206 00:11:24,470 --> 00:11:26,020 Because I will use my Product 207 00:11:26,020 --> 00:11:29,810 and then use the newly added findById method, 208 00:11:29,810 --> 00:11:33,770 which is async, await and therefore returns a promise 209 00:11:33,770 --> 00:11:38,770 to look for the product with req.params.id as an id. 210 00:11:39,120 --> 00:11:41,690 And this is how we can extract the value 211 00:11:41,690 --> 00:11:45,850 that was entered in the URL as a concrete value 212 00:11:45,850 --> 00:11:48,913 for that placeholder we added in our route. 213 00:11:49,910 --> 00:11:54,100 So, in the route we have :id here and that means 214 00:11:54,100 --> 00:11:55,610 that we can get the value that 215 00:11:55,610 --> 00:11:59,880 is then actually entered in the URL with that identifier 216 00:11:59,880 --> 00:12:03,920 we chose here id in my case on req.params. 217 00:12:03,920 --> 00:12:07,250 That's how express exposes to concrete value provided 218 00:12:07,250 --> 00:12:10,523 for this dynamic parameter for this placeholder. 219 00:12:11,710 --> 00:12:13,610 Well, here I get my product and of course 220 00:12:13,610 --> 00:12:17,020 we have to await this and it could fail, 221 00:12:17,020 --> 00:12:19,060 because connecting to the database failed 222 00:12:19,060 --> 00:12:21,410 or because we have this custom error 223 00:12:21,410 --> 00:12:25,163 on which we worked a couple of seconds ago, this 404 error. 224 00:12:26,190 --> 00:12:28,800 Either way, we wanna catch this error 225 00:12:28,800 --> 00:12:32,850 and then let express handle it by manually forwarding it 226 00:12:32,850 --> 00:12:35,513 with next and returning thereafter. 227 00:12:36,470 --> 00:12:37,303 Actually, 228 00:12:37,303 --> 00:12:39,600 we don't need to return if there is no other code 229 00:12:39,600 --> 00:12:41,663 after try/catch that could execute. 230 00:12:42,800 --> 00:12:46,810 Because now I wanna continue here inside of this try block 231 00:12:46,810 --> 00:12:50,830 if we did succeed here, if we did not face any errors, 232 00:12:50,830 --> 00:12:53,890 then of course I wanna render this template 233 00:12:53,890 --> 00:12:55,920 we added a couple of minutes ago. 234 00:12:55,920 --> 00:12:59,750 This update-product template, 235 00:12:59,750 --> 00:13:04,750 which is in admin/products/update-product. 236 00:13:05,490 --> 00:13:08,000 This template should be rendered 237 00:13:08,000 --> 00:13:11,400 and of course I'll pass my product 238 00:13:13,392 --> 00:13:15,383 as a value into this template. 239 00:13:16,810 --> 00:13:21,500 So, this product here is passed into this template 240 00:13:21,500 --> 00:13:23,180 and it's passed into this template 241 00:13:23,180 --> 00:13:25,133 under a key named product. 242 00:13:27,340 --> 00:13:31,670 That means that now in that update-product.ejs file, 243 00:13:31,670 --> 00:13:35,920 product will be available as a key, as a variable. 244 00:13:35,920 --> 00:13:38,490 And we now got the full product data available 245 00:13:38,490 --> 00:13:39,603 in there actually. 246 00:13:40,650 --> 00:13:44,610 So, if we wanna pre-populate product-form with some data, 247 00:13:44,610 --> 00:13:45,963 we can now do that. 248 00:13:47,350 --> 00:13:51,710 We can now go to product-form and prefill all those inputs 249 00:13:51,710 --> 00:13:55,780 with the data that was stored in the database before. 250 00:13:55,780 --> 00:13:57,940 We do that with help of the value attribute 251 00:13:57,940 --> 00:13:59,450 which we solved before 252 00:13:59,450 --> 00:14:03,090 and then we can set the title 253 00:14:03,090 --> 00:14:06,793 with product.title for example an ejs. 254 00:14:07,910 --> 00:14:09,950 We don't set the image, 255 00:14:09,950 --> 00:14:13,360 because I don't wanna pre-populate that we can't do that 256 00:14:13,360 --> 00:14:14,950 it's a file on the server. 257 00:14:14,950 --> 00:14:17,440 We can't pass that into the image picker, 258 00:14:17,440 --> 00:14:20,920 which is served to our users that doesn't work, 259 00:14:20,920 --> 00:14:22,573 so we got no default here. 260 00:14:23,840 --> 00:14:27,900 But I will add it here to this summary 261 00:14:27,900 --> 00:14:29,703 with product.summary. 262 00:14:31,160 --> 00:14:33,600 And I will of course also do it for the price, 263 00:14:33,600 --> 00:14:38,600 with product.price and also here for the description then 264 00:14:38,610 --> 00:14:41,370 with product.description. 265 00:14:41,370 --> 00:14:44,240 So, now all these fields will be pre-populated 266 00:14:44,240 --> 00:14:46,810 with data that's coming from the database, 267 00:14:46,810 --> 00:14:50,990 assuming that in update-product.ejs we do provide 268 00:14:50,990 --> 00:14:54,923 this product into this product-form included snippet. 269 00:14:55,910 --> 00:14:57,760 So, therefore in this object here, 270 00:14:57,760 --> 00:15:00,630 which we pass to include where we set up the data 271 00:15:00,630 --> 00:15:03,620 that's exposed to that included snippet. 272 00:15:03,620 --> 00:15:05,800 I add a second key value up here, 273 00:15:05,800 --> 00:15:08,760 which is product and which points 274 00:15:08,760 --> 00:15:12,413 at the product I'm getting in this template in general. 275 00:15:13,660 --> 00:15:16,580 We also have to do this in new-product.ejs, 276 00:15:16,580 --> 00:15:19,690 because there I'm also including the product-form. 277 00:15:19,690 --> 00:15:23,790 So therefore here, I also wanna set a product field 278 00:15:23,790 --> 00:15:25,510 for this included snippet. 279 00:15:25,510 --> 00:15:28,320 And here of course, if it's a new product, 280 00:15:28,320 --> 00:15:31,903 we don't have any titles, summary and so on yet. 281 00:15:32,970 --> 00:15:36,790 So, therefore here I will actually create a new object 282 00:15:36,790 --> 00:15:38,930 and split this across multiple lines 283 00:15:38,930 --> 00:15:40,770 to make it a bit easier to read. 284 00:15:40,770 --> 00:15:43,220 Where I set title to an empty string, 285 00:15:43,220 --> 00:15:48,220 summary to an empty string, price to an empty string 286 00:15:48,770 --> 00:15:50,710 and the description to an empty string. 287 00:15:50,710 --> 00:15:52,220 Because if it's a new product, 288 00:15:52,220 --> 00:15:55,233 we of course have no starting values as a default. 289 00:15:58,030 --> 00:16:01,620 With that if I go to add a product it's all empty, 290 00:16:01,620 --> 00:16:06,620 but if I go to view and edit it's pre-populated. 291 00:16:06,870 --> 00:16:08,990 Now, the description is not pre-populated, 292 00:16:08,990 --> 00:16:11,650 because I made a tiny mistake there. 293 00:16:11,650 --> 00:16:14,140 The description of course is a text area 294 00:16:14,140 --> 00:16:17,320 and for a text area you don't set the value. 295 00:16:17,320 --> 00:16:19,350 Instead you pass that default value 296 00:16:19,350 --> 00:16:21,200 between the opening and closing tags. 297 00:16:22,450 --> 00:16:23,930 Very important though, 298 00:16:23,930 --> 00:16:27,370 you set this without any line breaks 299 00:16:27,370 --> 00:16:29,720 that you might wanna add for readability, 300 00:16:29,720 --> 00:16:32,230 because those line breaks would be included 301 00:16:32,230 --> 00:16:34,600 in what you see on the screen. 302 00:16:34,600 --> 00:16:37,000 The text area is a bit special when it comes to this, 303 00:16:37,000 --> 00:16:40,230 it does not ignore line breaks and white space 304 00:16:40,230 --> 00:16:44,360 as all the other elements do, instead it includes it. 305 00:16:44,360 --> 00:16:45,840 So, here we don't wanna have 306 00:16:45,840 --> 00:16:49,650 the extra line break therefore and if I don't do that, 307 00:16:49,650 --> 00:16:54,223 now if I reload, I can see my data here as well. 308 00:16:55,780 --> 00:16:59,080 So, that is working, but of course clicking save here 309 00:16:59,080 --> 00:17:00,550 wouldn't do the trick yet. 310 00:17:00,550 --> 00:17:02,220 We're not handling the submission 311 00:17:02,220 --> 00:17:04,203 of updated product data yet.