1 00:00:03,000 --> 00:00:04,529 We added this Cart page, 2 00:00:04,529 --> 00:00:06,314 but it's still almost empty. 3 00:00:06,878 --> 00:00:10,538 Now we want to display the cart items in that page. 4 00:00:11,038 --> 00:00:14,459 And we know that we can get the cart items data 5 00:00:14,459 --> 00:00:16,280 by making an API request, 6 00:00:16,853 --> 00:00:19,816 But we also need to pass the JSON web token 7 00:00:19,816 --> 00:00:21,332 in the request header, 8 00:00:21,332 --> 00:00:23,743 so we cannot call the Strapi server 9 00:00:23,743 --> 00:00:25,604 directly from the frontend. 10 00:00:26,310 --> 00:00:29,176 We'll need to write a new API route first. 11 00:00:29,176 --> 00:00:31,290 We could call it simply "cart". 12 00:00:31,859 --> 00:00:34,098 And it will be similar to what we did 13 00:00:34,098 --> 00:00:35,309 in the "user" route, 14 00:00:35,870 --> 00:00:38,477 so you could use this code as a reference. 15 00:00:38,977 --> 00:00:41,535 In this handler we fetch the "user" data, 16 00:00:42,035 --> 00:00:44,789 while in the "cart" route we'll want to fetch 17 00:00:44,789 --> 00:00:46,319 the cart items of course. 18 00:00:46,881 --> 00:00:48,444 Now, to test the API route 19 00:00:48,444 --> 00:00:50,609 you could use the JavaScript console 20 00:00:50,609 --> 00:00:52,593 like I did earlier in the course. 21 00:00:53,213 --> 00:00:56,121 You could use "fetch" directly from here, 22 00:00:56,121 --> 00:00:58,391 requesting the "/api/cart" path. 23 00:00:58,961 --> 00:01:00,900 And in fact I was trying this earlier 24 00:01:00,900 --> 00:01:02,052 so it's in my history. 25 00:01:03,161 --> 00:01:05,055 It's just extracting the JSON 26 00:01:05,055 --> 00:01:07,537 from the response and then logging it. 27 00:01:07,537 --> 00:01:09,561 By making the request from here 28 00:01:09,561 --> 00:01:12,565 the browser will automatically send the cookie 29 00:01:12,565 --> 00:01:14,263 containing the user token. 30 00:01:15,025 --> 00:01:17,667 Right now the API route doesn't exist yet, 31 00:01:18,167 --> 00:01:19,670 but once you implement it 32 00:01:19,670 --> 00:01:22,736 you should see the JSON data logged to the console. 33 00:01:23,296 --> 00:01:24,866 Now, the question is: 34 00:01:24,866 --> 00:01:28,603 what data should our new API route return exactly? 35 00:01:29,177 --> 00:01:31,183 When we request the cart items 36 00:01:31,183 --> 00:01:33,857 the CMS returns a pretty large response, 37 00:01:33,857 --> 00:01:36,665 but we don't really need all these fields. 38 00:01:37,298 --> 00:01:39,304 Let me copy this response body, 39 00:01:41,564 --> 00:01:44,121 and then I'm going to copy it into a new file 40 00:01:45,131 --> 00:01:47,203 that we want to format as JSON. 41 00:01:49,730 --> 00:01:52,852 So let's say that, for each cart item object, 42 00:01:52,852 --> 00:01:54,308 we can keep its "id". 43 00:01:54,878 --> 00:01:57,496 But we don't need this "user" object , 44 00:01:57,496 --> 00:02:00,183 because we already know who the user is 45 00:02:00,183 --> 00:02:01,493 in our application. 46 00:02:02,131 --> 00:02:05,340 As for the "product", we can keep "id" and "title" 47 00:02:05,840 --> 00:02:07,919 but we don't need the "description" 48 00:02:07,919 --> 00:02:09,107 for the "Cart" page. 49 00:02:09,667 --> 00:02:10,872 We do need the "price", 50 00:02:11,372 --> 00:02:13,238 but we can remove everything else, 51 00:02:13,238 --> 00:02:15,214 including all the "picture" details. 52 00:02:18,237 --> 00:02:19,711 Ok, so that's the "product". 53 00:02:20,211 --> 00:02:21,617 We do want the "quantity", 54 00:02:22,117 --> 00:02:24,227 but don't need these timestamps. 55 00:02:24,727 --> 00:02:27,729 So these are the fields we want to return 56 00:02:27,729 --> 00:02:29,633 from our "cart" API route. 57 00:02:30,206 --> 00:02:32,337 This means you'll need to transform 58 00:02:32,337 --> 00:02:34,041 the data you get from Strapi 59 00:02:34,602 --> 00:02:36,764 before returning it to the frontend, 60 00:02:36,764 --> 00:02:38,686 keeping only the fields we want. 61 00:02:39,247 --> 00:02:41,838 Once you have implemented the new API route 62 00:02:42,338 --> 00:02:43,771 you should be able to call it, 63 00:02:43,771 --> 00:02:44,965 from the browser console. 64 00:02:46,004 --> 00:02:48,311 And you should get a successful response, 65 00:02:49,204 --> 00:02:51,227 with an array of two items, 66 00:02:51,727 --> 00:02:54,968 where each item has exactly these properties. 67 00:02:55,468 --> 00:02:58,119 So this is the manual test you can do 68 00:02:58,119 --> 00:03:00,482 to verify that you've implemented 69 00:03:00,482 --> 00:03:02,344 the API handler correctly. 70 00:03:02,987 --> 00:03:06,116 Please stop this video now 71 00:03:06,116 --> 00:03:10,447 and go and write that new API route. 72 00:03:11,068 --> 00:03:14,011 Ok. Let's look at the solution for this challenge. 73 00:03:14,511 --> 00:03:17,631 You should have added a "cart.js" file 74 00:03:17,631 --> 00:03:19,108 under "pages/api", 75 00:03:19,691 --> 00:03:22,716 and this should contain an API handler function. 76 00:03:23,357 --> 00:03:26,213 Here we first extract the JSON web token 77 00:03:26,213 --> 00:03:27,998 from the request cookies, 78 00:03:28,570 --> 00:03:31,831 and then we fetch the "/cart-items" resource 79 00:03:31,831 --> 00:03:33,091 from the CMS API. 80 00:03:33,091 --> 00:03:35,388 But we transform each cart item 81 00:03:35,388 --> 00:03:37,389 by mapping it to a function 82 00:03:38,112 --> 00:03:40,435 that I called "stripCartItem". 83 00:03:40,935 --> 00:03:42,485 This creates a new object 84 00:03:42,485 --> 00:03:44,717 keeping only the properties we want. 85 00:03:45,279 --> 00:03:47,800 So this is a possible implementation 86 00:03:47,800 --> 00:03:49,411 for the cart API route. 87 00:03:49,411 --> 00:03:51,862 Your code may be slightly different 88 00:03:51,862 --> 00:03:53,333 but that's all right, 89 00:03:53,333 --> 00:03:55,924 as long as it returns the right data. 90 00:03:55,924 --> 00:03:58,095 Now that we have this API route 91 00:03:58,095 --> 00:04:01,667 the next step will be calling it from our frontend.