1 00:00:00,230 --> 00:00:00,500 All right. 2 00:00:00,500 --> 00:00:04,310 So now we're going to create the carousel, which is going to be pretty simple. 3 00:00:04,310 --> 00:00:08,150 We have a carousel component we can use from React Bootstrap. 4 00:00:08,150 --> 00:00:14,060 We do need to create a new endpoint in the back end because we want to get the top three products pertaining 5 00:00:14,090 --> 00:00:14,900 to the rating. 6 00:00:14,900 --> 00:00:17,090 So basically we want to sort by rating. 7 00:00:17,090 --> 00:00:23,150 So let's go to back end controllers, product controller and down at the bottom here we're going to 8 00:00:23,150 --> 00:00:25,220 create a new function. 9 00:00:25,220 --> 00:00:26,780 I'm just going to copy. 10 00:00:29,100 --> 00:00:29,880 See. 11 00:00:29,880 --> 00:00:30,840 Just something easy. 12 00:00:30,840 --> 00:00:32,280 I'll just copy this. 13 00:00:33,460 --> 00:00:34,720 Fetch a product. 14 00:00:35,750 --> 00:00:37,880 And then we're going to paste that in here. 15 00:00:37,880 --> 00:00:38,810 Let's change this. 16 00:00:38,810 --> 00:00:40,460 So this is going to. 17 00:00:42,110 --> 00:00:45,890 Let's say, get top rated products. 18 00:00:45,890 --> 00:00:50,480 It's going to be a get request to API products slash top. 19 00:00:50,510 --> 00:00:55,520 It's going to be public and let's change the name of the function to get. 20 00:00:56,350 --> 00:00:58,240 Top products. 21 00:00:59,220 --> 00:01:01,170 And then we're going to get. 22 00:01:02,700 --> 00:01:08,610 Let's put an S on this because we're getting multiple products and let's use find and then we're going 23 00:01:08,610 --> 00:01:11,160 to pass in here just an empty object. 24 00:01:11,160 --> 00:01:16,770 But then we're going to add on to this dot sort and we're going to sort by rating, but we're only going 25 00:01:16,770 --> 00:01:17,520 to get three. 26 00:01:17,550 --> 00:01:19,890 We're limiting it to three products. 27 00:01:21,200 --> 00:01:21,710 Okay. 28 00:01:21,710 --> 00:01:29,570 And then let's just return, let's say res dot status 200 and then pass in product. 29 00:01:29,580 --> 00:01:34,550 So very simple, very simple response or function. 30 00:01:34,550 --> 00:01:37,880 And then we're going to export that get top products. 31 00:01:38,900 --> 00:01:40,820 And then let's just create the route. 32 00:01:40,820 --> 00:01:46,490 So we'll go into back end routes, product routes we're going to import. 33 00:01:47,600 --> 00:01:49,520 Get top products. 34 00:01:50,140 --> 00:01:56,890 And then make sure you put this above the ID, Otherwise it's going to look at top the word top as an 35 00:01:56,890 --> 00:01:57,400 ID. 36 00:01:57,430 --> 00:02:03,520 So right here we're going to say router dot, get slash top and then get top products. 37 00:02:04,190 --> 00:02:06,650 No middleware because it's not protected. 38 00:02:07,400 --> 00:02:09,259 So now in the front end. 39 00:02:09,940 --> 00:02:13,630 We're going to create a query to hit that endpoint. 40 00:02:13,630 --> 00:02:20,440 So let's go to slices, product Slice and down at the bottom here, let's say. 41 00:02:21,270 --> 00:02:23,130 Get top. 42 00:02:24,040 --> 00:02:25,030 Products. 43 00:02:25,030 --> 00:02:26,620 That's going to be a query. 44 00:02:27,360 --> 00:02:34,740 And we're going to pass in here, query the URL is just slash top and let's also do keep unused data 45 00:02:34,740 --> 00:02:35,480 for five. 46 00:02:35,490 --> 00:02:36,750 So very simple. 47 00:02:37,390 --> 00:02:42,400 And then we're going to export use, get top products query. 48 00:02:43,360 --> 00:02:43,780 All right. 49 00:02:43,780 --> 00:02:46,090 So now we're going to go into. 50 00:02:46,910 --> 00:02:52,910 Components and let's create a new file called product Carousel dot JS. 51 00:02:56,350 --> 00:02:56,860 Okay. 52 00:02:56,860 --> 00:02:59,440 And then we're going to bring in some of the stuff we need. 53 00:02:59,440 --> 00:03:01,180 So we need link. 54 00:03:03,380 --> 00:03:04,280 Actually. 55 00:03:06,090 --> 00:03:10,190 Link from React router Dom because we want to link to each product. 56 00:03:10,200 --> 00:03:12,840 We also want the carousel and image component. 57 00:03:12,870 --> 00:03:18,270 We want our loader, our message, and then our query that we just created. 58 00:03:18,270 --> 00:03:21,000 So let's use get. 59 00:03:21,630 --> 00:03:23,520 Top products query. 60 00:03:24,610 --> 00:03:25,720 And then let's see. 61 00:03:25,720 --> 00:03:27,850 We're going to go in here and. 62 00:03:29,790 --> 00:03:32,040 We don't need this three passed in. 63 00:03:32,130 --> 00:03:38,790 I guess you could configure it like that, but we just set it to a hard coded three on the back end, 64 00:03:39,120 --> 00:03:40,410 but we're getting the data. 65 00:03:40,410 --> 00:03:46,770 Calling it products is loading an error and then what will return here, let's say? 66 00:03:48,040 --> 00:03:50,740 If is loading, then we'll show. 67 00:03:51,910 --> 00:03:52,960 The loader. 68 00:03:52,990 --> 00:03:53,530 Else. 69 00:03:53,560 --> 00:03:54,340 Error. 70 00:03:54,460 --> 00:03:56,770 If there's an error, then we'll show the message. 71 00:03:56,800 --> 00:03:59,530 Else then we'll go ahead and show the carousel. 72 00:03:59,530 --> 00:04:02,960 And we're going to use the React bootstrap carousel. 73 00:04:02,980 --> 00:04:05,650 So I'm just going to add on to this for class name. 74 00:04:05,650 --> 00:04:10,640 We're going to do BG primary and then margin bottom four. 75 00:04:10,660 --> 00:04:14,770 And then inside the carousel, we're going to map through the products. 76 00:04:17,649 --> 00:04:18,860 Uh, let's see. 77 00:04:18,880 --> 00:04:19,990 Is that right? 78 00:04:22,040 --> 00:04:22,890 I want to do that. 79 00:04:22,890 --> 00:04:23,160 All right. 80 00:04:23,160 --> 00:04:24,120 So we're going to map through. 81 00:04:24,120 --> 00:04:28,110 And then for each product, we're going to show a carousel item. 82 00:04:31,160 --> 00:04:31,580 All right. 83 00:04:31,580 --> 00:04:33,890 And then in the carousel item. 84 00:04:34,660 --> 00:04:35,770 Actually, I'm missing. 85 00:04:37,150 --> 00:04:37,870 There we go. 86 00:04:37,870 --> 00:04:41,020 So in the carousel item, we'll have a link around. 87 00:04:42,030 --> 00:04:42,870 The item. 88 00:04:42,870 --> 00:04:47,280 Let's end that link and then we'll have the image. 89 00:04:48,170 --> 00:04:50,300 Okay, so source is going to be product image. 90 00:04:50,300 --> 00:04:55,940 Then we're going to have the caption, which is going to be an H two with the product name and price. 91 00:04:56,600 --> 00:04:57,530 And that should do it. 92 00:04:57,530 --> 00:04:58,760 So I'm going to save that. 93 00:04:58,760 --> 00:05:03,200 And I do also have an asset styles in my index CSS. 94 00:05:03,230 --> 00:05:04,190 I have this. 95 00:05:04,400 --> 00:05:08,960 This will basically center the caption and give it like an overlay. 96 00:05:09,800 --> 00:05:12,860 So now where we want to show this is in the home screen. 97 00:05:12,860 --> 00:05:15,320 So let's go to screens. 98 00:05:17,060 --> 00:05:18,650 And home screen. 99 00:05:18,650 --> 00:05:19,970 And we're going to bring. 100 00:05:21,630 --> 00:05:22,860 The carousel in. 101 00:05:22,860 --> 00:05:25,860 So product carousel and then. 102 00:05:26,800 --> 00:05:28,650 I want it at the top here. 103 00:05:28,680 --> 00:05:32,000 We're saying if there's a key word, then show the go back. 104 00:05:32,010 --> 00:05:35,280 I only want the carousel to show if it's not key word. 105 00:05:35,280 --> 00:05:39,780 Because if there's a key word, that means we're looking at search results and I don't want to show 106 00:05:39,780 --> 00:05:41,670 it if we're looking at search results. 107 00:05:41,670 --> 00:05:45,030 So what we'll do is we'll say, if not keyword, then. 108 00:05:46,730 --> 00:05:50,420 Then let's show the product carousel. 109 00:05:50,720 --> 00:05:53,840 Else then we'll show the go back button. 110 00:05:54,110 --> 00:05:55,930 So let's try that out. 111 00:05:55,940 --> 00:05:57,340 And there we go. 112 00:05:57,350 --> 00:05:58,520 So we get Sony. 113 00:05:58,550 --> 00:06:01,520 PlayStation four has the price. 114 00:06:03,070 --> 00:06:06,280 We have our AirPods and iPhone. 115 00:06:06,280 --> 00:06:13,870 So it's those three products and I can go back as well and it should scroll on its own if I don't hover 116 00:06:13,870 --> 00:06:14,710 over it. 117 00:06:16,490 --> 00:06:17,090 Cool. 118 00:06:18,860 --> 00:06:22,040 And if I mean, of course you could make this look different if you want. 119 00:06:22,070 --> 00:06:23,830 I think it looks pretty good. 120 00:06:23,840 --> 00:06:28,520 If you wanted to have like the description, you could also bring that in if you wanted to position 121 00:06:28,520 --> 00:06:29,270 it over here. 122 00:06:29,270 --> 00:06:31,520 Maybe because. 123 00:06:32,490 --> 00:06:35,700 You know, and you can put anything you want in the caption. 124 00:06:35,700 --> 00:06:41,010 And then there's other components to the carousel component that you can use as well. 125 00:06:41,010 --> 00:06:44,190 So it's up to you if you want to kind of change the look of this. 126 00:06:44,190 --> 00:06:45,900 But I think it looks pretty good. 127 00:06:46,590 --> 00:06:47,400 All right, cool. 128 00:06:47,400 --> 00:06:49,290 So we're just about done, guys. 129 00:06:49,290 --> 00:06:54,960 I think in the next video, what I'd like to do is change up the page titles, because right now, if 130 00:06:54,960 --> 00:06:58,770 we go to a product page, it still just says, Welcome to Pro Shop. 131 00:06:58,770 --> 00:07:04,590 So I think it would be better if we have like the title of or the name of the product as the title for 132 00:07:04,590 --> 00:07:05,310 the page.