We handle loading, we handle our technology and focus on the return, and I'm going to start by removing
this error, hopefully we are clear what we're getting back.
And then I would want to consult again one more time the product, because we'll have to pull out most
of the properties from that product.
So let's go here to any of the products.
It doesn't really matter.
And then one by one, we'll just have to grab them.
So we've got, of course, the ID, then we have category.
What is going to be the category of the product?
Of course, we have colors, available colors, company description, whether it is featured or not.
And in this case, by the way, we don't care about that.
Then we have images because I remember for a single product, we have more images.
It's not just like in featured or in Products page where we display one.
There's going to be multiple images that's we set up a separate component.
Of course, there's a name, there's a price, the name of reviews and stars.
So we use that one in the stars component that will also set up, as well as whether shipping is true.
Again, not something that we'll use in this particular page, but in general, it is there.
And then the stock so stark just tells us whether we have items in stock because some items by default
in the API have a zero.
So there are no items in the stock.
And I'll only remember which one was it.
So let me look at the details.
What is this one available is equal out of stock.
And that's why I'm not even showing at the card, because there's no items available.
So that's something we'll have to keep in mind.
Now, let me navigate back and all the structured properties that we'll use in this return.
So I'm going to go with name first.
Then I would want to go with price.
There's corruption.
Then I also would want to have that stock.
So whether the product is available, the amount of stars and land reviews as well that I d now I will
give it an alias of SKU, so technically I can use the same idea.
It doesn't really matter, but I'm just going to pull it out from the product and I'll give it an alias.
You I'm on the company of course.
As well as the images, remember, that was the era and all of that is coming from the product and as
far as the return will start with a rapper here and then instead of the rapper.
I would want to set up first my page here.
Now, this page here will be a little bit different because like I said, there's going to be an extra
link.
So, first of all, let's just go with a basic page hero to say that the actual name is the name of
the product Maxell.
And let's close it and let's see what we're going to have.
And as you can see here, I have home and whatever is the name of the product.
Now, what I would want is to conditionally also show the product so that link to the product page.
Now, again, it's going to be conditional because in the actual product page, I'm not going to do
that.
However, in a single product, I would want to do that.
That's why I'll navigate to my page.
Hiro.
Where it is, this is, of course, my component, except where it is right here and then inside of
this component, like I said, I'll be checking for one more prop and the problem will be product.
So if it is basically a product, then there's going to be some extra return.
So in between the title and the home.
So right in between them, I would also want to set up one more expression where I'm going to say if
the product prop is true, then I would also want to return one more link, which is going to be to
the product page so linked to an Landwehr navigating to products, of course.
And then inside of this link, which is going to have a Ford slash like so so we go with Forward Slash
and of course at this point we would need to remove this one.
Sorry, this one should be in front of the title.
And then here, I'll just say product.
Product so conditionally, if we are in this single product, then of course we'll display the product
link as well.
And if I'm checking for the product, of course, in a single product, I just need to pass it.
And I need to say that, yep, in the single product page, I'll pass in that product.
And that's why I will have the home and then product and then whatever is the product name.
OK, that should do it.
That is of course our page here.
And next hour, want to set up my Divx where I'm going to have the links, the images and all that.
So right after page here, let's go with diff with few classes of section class, section, center class
and some classes we have already covered for as well as the page class.
And then we'll start by presenting a link.
So say your link to and we're going to navigate to the product back.
And I also want to showcase the text, of course, so back to back to products here.
Now, I do want to add a little bit of styling, so I'll use one of the global class names and that
one will be button.
So I say this is something we should see.
We have back to product like now.
Of course, I would want to display those images as well as the info about the product.
That's why inside of this there.
So don't push it outside inside of this.
Dave, let's go with product and then center def and in here I'll start by displaying the product images
or product images, I guess, component.
Now, again, there's nothing in the component yet.
I'll set it up in one of the following videos, but I do want to render just search and see what eventually
we're going to have on a page.
So go with product images component, which eventually will be looking for us images.
All right.
Because there's going to be quite a few images in there.
So that's number one.
Come on.
It's just text with product images and more of that.
And then the second thing here is going to be my section with a class of content like so.
And then instead of this content, I'm going to go first with my name and the property that I pulled
out the object and I save a marriage.
Now, of course, I'm loading and then I have the name.
Now, right after that, I would want to display the stars.
But there's going to be a little bit of logic in there, because if you take a look, we have the property,
of course, and then we have the reviews.
But I actually would want to showcase the icons.
So I have to do a little bit of logic.
That's why there's going to be a star's component that eventually will set it up.
At the moment, it's just going to be urtext of stars.
OK, then I'm going to set up my heading five where I would want to have the price so high five.
And we already covered how we can format it.
So we already have the function.
That's why I'll go with my expression and we'll go with format price and I'll pass in the price we save.
And there is now of course, we should have the price.
Then there's a description here.
So let's go with class name.
First of all, description just for styling purposes.
So description so online.
In order to access my variable, I just need to look for my description and now I have my description.
Then there's going to be a info paragraph and instead of that info paragraph.
I'm going to have a span of available, so if I take a look now I have these paragraphs with this plan,
one is going to be whether the product is available, whether we have it in a stock or not, then we
have the skill, meaning the idea and also the brand.
So all of them will look somewhat the same.
Now, for the available, I would want to check whether the length of the stock is bigger than zero,
because remember when it was coming from the API, we had some kind of number.
So if the value is zero, then of course I know that there are no more items in stock.
So it doesn't make sense to keep on adding to the card or nothing like that.
Correct.
So we're going to go with paragraph right after description.
And the class name will be invoked because, like I said, there's going to be few of them, pretty
much the same is just different info in there.
So start with spane and we'll say available.
So and then right after the.
And by the way, I don't want to add a colon here as well.
I would want to set up my expression where I'm going to check if the stock is bigger than zero, then
I would want to display that.
Yeah, it's in stock.
If not, then of course it's going to be out of the stock.
So let's go here in stock.
And by the way, I don't think I'm going to be able to access that particular product that's out of
the stock.
So you have to just trust me.
And then eventually, once we set up all the products, of course, you'll be able to see that by navigating
through that single product page with that particular idea.
So out of stock, if, of course, the value is not.
And of course, I do.
The missing question mark here.
And for this one, it should be in stock nerdist now, of course it is in stock and I would want to
copy and paste because there's going to be two more.
Now this is not going to be stock, but the paragraph will be exactly the same.
It's going to be full.
And then inside of it, I have skill, so let's just right here skill or, you know, my apologies.
This one should be second on my bat and then I would just want to display that skill.
And then the last thing for, again, I don't need the stock anymore here is going to be a brand.
So as you can see, I'm just using that info program for styling and I'm just copying pasting.
So company here, once we save, we should have all these three hours.
So this is the only one that's technically dynamic.
Rest of them I'm just grabbing from the API and I would want to set up the horizontal line and then
right after the horizontal line, I would want to go with add to cart component, because when it comes
to adding to the cart, there's going to be multiple colors available.
So that's why I wouldn't want to set this up in the actual single product.
There's going to be a separate component that sets up how many items we're going to add to the cart
as well as the color guard.
If you need a refresher, just go to any other and you'll see that.
And of course, for some reason, all of the ones that I'm showing, you have only one color.
Now, see, we have multiple colors.
And since there's going to be some logic involved, I don't want to set this up in a single product.
Yeah, technically, I could have, but I just thought that it makes a little bit more sense if we separate
these concerns.
So there's going to be a separate component that deals with this adding to the cart functionality as
well as what?
Which color are we actually adding?
Now, here's the thing.
I only want to display that component if.
The in stock value is bigger than zero, correct?
What's the point of showing the colors, the the amount and all that?
If I can't have that item to the card anyway, since out of the stock and again, if you want to see
how it's going to look like, I think this one was out of stock.
And notice, I'm not rendering that component.
So right after the horizontal line, I'll set up another expression and again, I'll check for the stock
and say if it is bigger than zero only then showcase add to cart component.
Nothing is in there at the moment in the ad card, by the way, we just need to go with and as well.
So we're going to go with and and if of course stock is bigger than a zero, then we'll see Addicott
component.
If not, nothing will be displayed.
That should be our basic setup.
And as you can see, we just have three components that we need to work on.
We need to work on product imageries where I would want to show the images and the functionality where
we can change that image.
Then, of course, we have the stars where at the moment we have only the values, only the number of
hours.
But what I would want is to showcase my own icons.
And then lastly, we have add to cart functionality where we can change the colors and change the amount
of items we would want to add to the.