All right.
So now we're going to create the carousel, which is going to be pretty simple.
We have a carousel component we can use from React Bootstrap.
We do need to create a new endpoint in the back end because we want to get the top three products pertaining
to the rating.
So basically we want to sort by rating.
So let's go to back end controllers, product controller and down at the bottom here we're going to
create a new function.
I'm just going to copy.
See.
Just something easy.
I'll just copy this.
Fetch a product.
And then we're going to paste that in here.
Let's change this.
So this is going to.
Let's say, get top rated products.
It's going to be a get request to API products slash top.
It's going to be public and let's change the name of the function to get.
Top products.
And then we're going to get.
Let's put an S on this because we're getting multiple products and let's use find and then we're going
to pass in here just an empty object.
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
to get three.
We're limiting it to three products.
Okay.
And then let's just return, let's say res dot status 200 and then pass in product.
So very simple, very simple response or function.
And then we're going to export that get top products.
And then let's just create the route.
So we'll go into back end routes, product routes we're going to import.
Get top products.
And then make sure you put this above the ID, Otherwise it's going to look at top the word top as an
ID.
So right here we're going to say router dot, get slash top and then get top products.
No middleware because it's not protected.
So now in the front end.
We're going to create a query to hit that endpoint.
So let's go to slices, product Slice and down at the bottom here, let's say.
Get top.
Products.
That's going to be a query.
And we're going to pass in here, query the URL is just slash top and let's also do keep unused data
for five.
So very simple.
And then we're going to export use, get top products query.
All right.
So now we're going to go into.
Components and let's create a new file called product Carousel dot JS.
Okay.
And then we're going to bring in some of the stuff we need.
So we need link.
Actually.
Link from React router Dom because we want to link to each product.
We also want the carousel and image component.
We want our loader, our message, and then our query that we just created.
So let's use get.
Top products query.
And then let's see.
We're going to go in here and.
We don't need this three passed in.
I guess you could configure it like that, but we just set it to a hard coded three on the back end,
but we're getting the data.
Calling it products is loading an error and then what will return here, let's say?
If is loading, then we'll show.
The loader.
Else.
Error.
If there's an error, then we'll show the message.
Else then we'll go ahead and show the carousel.
And we're going to use the React bootstrap carousel.
So I'm just going to add on to this for class name.
We're going to do BG primary and then margin bottom four.
And then inside the carousel, we're going to map through the products.
Uh, let's see.
Is that right?
I want to do that.
All right.
So we're going to map through.
And then for each product, we're going to show a carousel item.
All right.
And then in the carousel item.
Actually, I'm missing.
There we go.
So in the carousel item, we'll have a link around.
The item.
Let's end that link and then we'll have the image.
Okay, so source is going to be product image.
Then we're going to have the caption, which is going to be an H two with the product name and price.
And that should do it.
So I'm going to save that.
And I do also have an asset styles in my index CSS.
I have this.
This will basically center the caption and give it like an overlay.
So now where we want to show this is in the home screen.
So let's go to screens.
And home screen.
And we're going to bring.
The carousel in.
So product carousel and then.
I want it at the top here.
We're saying if there's a key word, then show the go back.
I only want the carousel to show if it's not key word.
Because if there's a key word, that means we're looking at search results and I don't want to show
it if we're looking at search results.
So what we'll do is we'll say, if not keyword, then.
Then let's show the product carousel.
Else then we'll show the go back button.
So let's try that out.
And there we go.
So we get Sony.
PlayStation four has the price.
We have our AirPods and iPhone.
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
over it.
Cool.
And if I mean, of course you could make this look different if you want.
I think it looks pretty good.
If you wanted to have like the description, you could also bring that in if you wanted to position
it over here.
Maybe because.
You know, and you can put anything you want in the caption.
And then there's other components to the carousel component that you can use as well.
So it's up to you if you want to kind of change the look of this.
But I think it looks pretty good.
All right, cool.
So we're just about done, guys.
I think in the next video, what I'd like to do is change up the page titles, because right now, if
we go to a product page, it still just says, Welcome to Pro Shop.
So I think it would be better if we have like the title of or the name of the product as the title for
the page.