1 00:00:00,570 --> 00:00:08,040 We handle loading, we handle our technology and focus on the return, and I'm going to start by removing 2 00:00:08,040 --> 00:00:11,850 this error, hopefully we are clear what we're getting back. 3 00:00:12,120 --> 00:00:19,080 And then I would want to consult again one more time the product, because we'll have to pull out most 4 00:00:19,080 --> 00:00:21,260 of the properties from that product. 5 00:00:21,720 --> 00:00:23,910 So let's go here to any of the products. 6 00:00:23,940 --> 00:00:24,920 It doesn't really matter. 7 00:00:25,200 --> 00:00:27,990 And then one by one, we'll just have to grab them. 8 00:00:28,410 --> 00:00:33,210 So we've got, of course, the ID, then we have category. 9 00:00:33,520 --> 00:00:36,070 What is going to be the category of the product? 10 00:00:36,540 --> 00:00:42,590 Of course, we have colors, available colors, company description, whether it is featured or not. 11 00:00:42,930 --> 00:00:44,930 And in this case, by the way, we don't care about that. 12 00:00:44,940 --> 00:00:50,250 Then we have images because I remember for a single product, we have more images. 13 00:00:50,470 --> 00:00:55,380 It's not just like in featured or in Products page where we display one. 14 00:00:55,770 --> 00:00:59,400 There's going to be multiple images that's we set up a separate component. 15 00:00:59,410 --> 00:01:04,010 Of course, there's a name, there's a price, the name of reviews and stars. 16 00:01:04,320 --> 00:01:11,230 So we use that one in the stars component that will also set up, as well as whether shipping is true. 17 00:01:11,340 --> 00:01:16,410 Again, not something that we'll use in this particular page, but in general, it is there. 18 00:01:16,710 --> 00:01:25,800 And then the stock so stark just tells us whether we have items in stock because some items by default 19 00:01:26,100 --> 00:01:28,690 in the API have a zero. 20 00:01:28,950 --> 00:01:31,170 So there are no items in the stock. 21 00:01:31,470 --> 00:01:33,560 And I'll only remember which one was it. 22 00:01:33,930 --> 00:01:35,250 So let me look at the details. 23 00:01:35,340 --> 00:01:38,190 What is this one available is equal out of stock. 24 00:01:38,190 --> 00:01:43,560 And that's why I'm not even showing at the card, because there's no items available. 25 00:01:43,800 --> 00:01:45,910 So that's something we'll have to keep in mind. 26 00:01:46,260 --> 00:01:53,010 Now, let me navigate back and all the structured properties that we'll use in this return. 27 00:01:53,760 --> 00:01:56,040 So I'm going to go with name first. 28 00:01:56,370 --> 00:01:58,700 Then I would want to go with price. 29 00:01:59,160 --> 00:02:00,860 There's corruption. 30 00:02:01,230 --> 00:02:03,780 Then I also would want to have that stock. 31 00:02:04,140 --> 00:02:13,590 So whether the product is available, the amount of stars and land reviews as well that I d now I will 32 00:02:13,590 --> 00:02:17,460 give it an alias of SKU, so technically I can use the same idea. 33 00:02:17,460 --> 00:02:23,080 It doesn't really matter, but I'm just going to pull it out from the product and I'll give it an alias. 34 00:02:23,750 --> 00:02:26,220 You I'm on the company of course. 35 00:02:27,220 --> 00:02:34,990 As well as the images, remember, that was the era and all of that is coming from the product and as 36 00:02:34,990 --> 00:02:41,020 far as the return will start with a rapper here and then instead of the rapper. 37 00:02:41,980 --> 00:02:45,480 I would want to set up first my page here. 38 00:02:45,940 --> 00:02:49,960 Now, this page here will be a little bit different because like I said, there's going to be an extra 39 00:02:49,960 --> 00:02:50,240 link. 40 00:02:50,620 --> 00:02:59,050 So, first of all, let's just go with a basic page hero to say that the actual name is the name of 41 00:02:59,050 --> 00:03:00,290 the product Maxell. 42 00:03:00,730 --> 00:03:03,360 And let's close it and let's see what we're going to have. 43 00:03:03,370 --> 00:03:08,330 And as you can see here, I have home and whatever is the name of the product. 44 00:03:08,800 --> 00:03:17,690 Now, what I would want is to conditionally also show the product so that link to the product page. 45 00:03:18,070 --> 00:03:22,300 Now, again, it's going to be conditional because in the actual product page, I'm not going to do 46 00:03:22,300 --> 00:03:22,540 that. 47 00:03:22,850 --> 00:03:26,360 However, in a single product, I would want to do that. 48 00:03:26,680 --> 00:03:29,410 That's why I'll navigate to my page. 49 00:03:29,410 --> 00:03:29,750 Hiro. 50 00:03:30,880 --> 00:03:39,700 Where it is, this is, of course, my component, except where it is right here and then inside of 51 00:03:39,700 --> 00:03:47,590 this component, like I said, I'll be checking for one more prop and the problem will be product. 52 00:03:48,160 --> 00:03:54,450 So if it is basically a product, then there's going to be some extra return. 53 00:03:54,820 --> 00:03:58,550 So in between the title and the home. 54 00:03:58,900 --> 00:04:05,620 So right in between them, I would also want to set up one more expression where I'm going to say if 55 00:04:05,620 --> 00:04:11,560 the product prop is true, then I would also want to return one more link, which is going to be to 56 00:04:11,560 --> 00:04:17,920 the product page so linked to an Landwehr navigating to products, of course. 57 00:04:18,280 --> 00:04:25,460 And then inside of this link, which is going to have a Ford slash like so so we go with Forward Slash 58 00:04:25,480 --> 00:04:29,080 and of course at this point we would need to remove this one. 59 00:04:29,140 --> 00:04:32,080 Sorry, this one should be in front of the title. 60 00:04:33,570 --> 00:04:35,820 And then here, I'll just say product. 61 00:04:36,690 --> 00:04:43,530 Product so conditionally, if we are in this single product, then of course we'll display the product 62 00:04:43,530 --> 00:04:44,470 link as well. 63 00:04:44,850 --> 00:04:49,920 And if I'm checking for the product, of course, in a single product, I just need to pass it. 64 00:04:49,920 --> 00:04:55,530 And I need to say that, yep, in the single product page, I'll pass in that product. 65 00:04:55,830 --> 00:05:02,740 And that's why I will have the home and then product and then whatever is the product name. 66 00:05:03,300 --> 00:05:04,620 OK, that should do it. 67 00:05:04,830 --> 00:05:07,180 That is of course our page here. 68 00:05:07,560 --> 00:05:14,260 And next hour, want to set up my Divx where I'm going to have the links, the images and all that. 69 00:05:14,610 --> 00:05:22,650 So right after page here, let's go with diff with few classes of section class, section, center class 70 00:05:22,650 --> 00:05:27,110 and some classes we have already covered for as well as the page class. 71 00:05:27,630 --> 00:05:30,680 And then we'll start by presenting a link. 72 00:05:31,080 --> 00:05:36,000 So say your link to and we're going to navigate to the product back. 73 00:05:37,440 --> 00:05:44,590 And I also want to showcase the text, of course, so back to back to products here. 74 00:05:44,970 --> 00:05:49,950 Now, I do want to add a little bit of styling, so I'll use one of the global class names and that 75 00:05:49,950 --> 00:05:50,780 one will be button. 76 00:05:51,270 --> 00:05:53,670 So I say this is something we should see. 77 00:05:53,940 --> 00:05:57,330 We have back to product like now. 78 00:05:57,330 --> 00:06:02,760 Of course, I would want to display those images as well as the info about the product. 79 00:06:02,770 --> 00:06:05,050 That's why inside of this there. 80 00:06:05,430 --> 00:06:07,670 So don't push it outside inside of this. 81 00:06:07,720 --> 00:06:16,740 Dave, let's go with product and then center def and in here I'll start by displaying the product images 82 00:06:17,040 --> 00:06:19,650 or product images, I guess, component. 83 00:06:19,710 --> 00:06:22,530 Now, again, there's nothing in the component yet. 84 00:06:23,050 --> 00:06:30,450 I'll set it up in one of the following videos, but I do want to render just search and see what eventually 85 00:06:30,630 --> 00:06:32,210 we're going to have on a page. 86 00:06:32,490 --> 00:06:39,220 So go with product images component, which eventually will be looking for us images. 87 00:06:39,240 --> 00:06:39,640 All right. 88 00:06:40,110 --> 00:06:42,830 Because there's going to be quite a few images in there. 89 00:06:43,110 --> 00:06:44,070 So that's number one. 90 00:06:44,370 --> 00:06:44,850 Come on. 91 00:06:45,270 --> 00:06:49,200 It's just text with product images and more of that. 92 00:06:49,420 --> 00:06:54,920 And then the second thing here is going to be my section with a class of content like so. 93 00:06:55,780 --> 00:07:01,570 And then instead of this content, I'm going to go first with my name and the property that I pulled 94 00:07:01,570 --> 00:07:05,670 out the object and I save a marriage. 95 00:07:05,740 --> 00:07:08,950 Now, of course, I'm loading and then I have the name. 96 00:07:09,370 --> 00:07:12,310 Now, right after that, I would want to display the stars. 97 00:07:12,670 --> 00:07:17,950 But there's going to be a little bit of logic in there, because if you take a look, we have the property, 98 00:07:17,950 --> 00:07:19,540 of course, and then we have the reviews. 99 00:07:19,990 --> 00:07:23,830 But I actually would want to showcase the icons. 100 00:07:24,220 --> 00:07:25,900 So I have to do a little bit of logic. 101 00:07:25,900 --> 00:07:31,570 That's why there's going to be a star's component that eventually will set it up. 102 00:07:32,020 --> 00:07:35,300 At the moment, it's just going to be urtext of stars. 103 00:07:35,680 --> 00:07:42,010 OK, then I'm going to set up my heading five where I would want to have the price so high five. 104 00:07:42,010 --> 00:07:45,270 And we already covered how we can format it. 105 00:07:45,680 --> 00:07:46,960 So we already have the function. 106 00:07:47,260 --> 00:07:54,580 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. 107 00:07:54,910 --> 00:07:57,580 And there is now of course, we should have the price. 108 00:07:57,910 --> 00:08:00,300 Then there's a description here. 109 00:08:00,730 --> 00:08:02,980 So let's go with class name. 110 00:08:02,980 --> 00:08:07,030 First of all, description just for styling purposes. 111 00:08:07,390 --> 00:08:10,150 So description so online. 112 00:08:10,150 --> 00:08:16,830 In order to access my variable, I just need to look for my description and now I have my description. 113 00:08:17,350 --> 00:08:22,840 Then there's going to be a info paragraph and instead of that info paragraph. 114 00:08:23,720 --> 00:08:31,270 I'm going to have a span of available, so if I take a look now I have these paragraphs with this plan, 115 00:08:31,640 --> 00:08:37,490 one is going to be whether the product is available, whether we have it in a stock or not, then we 116 00:08:37,490 --> 00:08:40,770 have the skill, meaning the idea and also the brand. 117 00:08:41,000 --> 00:08:43,330 So all of them will look somewhat the same. 118 00:08:43,340 --> 00:08:50,600 Now, for the available, I would want to check whether the length of the stock is bigger than zero, 119 00:08:51,080 --> 00:08:55,620 because remember when it was coming from the API, we had some kind of number. 120 00:08:55,850 --> 00:08:59,960 So if the value is zero, then of course I know that there are no more items in stock. 121 00:09:00,500 --> 00:09:05,240 So it doesn't make sense to keep on adding to the card or nothing like that. 122 00:09:05,240 --> 00:09:05,680 Correct. 123 00:09:06,080 --> 00:09:08,870 So we're going to go with paragraph right after description. 124 00:09:10,080 --> 00:09:14,490 And the class name will be invoked because, like I said, there's going to be few of them, pretty 125 00:09:14,490 --> 00:09:17,700 much the same is just different info in there. 126 00:09:18,000 --> 00:09:21,420 So start with spane and we'll say available. 127 00:09:21,780 --> 00:09:24,060 So and then right after the. 128 00:09:24,450 --> 00:09:27,080 And by the way, I don't want to add a colon here as well. 129 00:09:27,420 --> 00:09:34,380 I would want to set up my expression where I'm going to check if the stock is bigger than zero, then 130 00:09:34,380 --> 00:09:35,490 I would want to display that. 131 00:09:35,520 --> 00:09:36,920 Yeah, it's in stock. 132 00:09:36,930 --> 00:09:39,900 If not, then of course it's going to be out of the stock. 133 00:09:40,170 --> 00:09:42,020 So let's go here in stock. 134 00:09:42,030 --> 00:09:47,190 And by the way, I don't think I'm going to be able to access that particular product that's out of 135 00:09:47,190 --> 00:09:47,660 the stock. 136 00:09:48,120 --> 00:09:49,640 So you have to just trust me. 137 00:09:50,100 --> 00:09:55,380 And then eventually, once we set up all the products, of course, you'll be able to see that by navigating 138 00:09:55,590 --> 00:09:59,530 through that single product page with that particular idea. 139 00:09:59,820 --> 00:10:03,480 So out of stock, if, of course, the value is not. 140 00:10:03,870 --> 00:10:05,400 And of course, I do. 141 00:10:05,880 --> 00:10:07,760 The missing question mark here. 142 00:10:08,070 --> 00:10:15,510 And for this one, it should be in stock nerdist now, of course it is in stock and I would want to 143 00:10:15,510 --> 00:10:18,100 copy and paste because there's going to be two more. 144 00:10:18,390 --> 00:10:22,950 Now this is not going to be stock, but the paragraph will be exactly the same. 145 00:10:23,250 --> 00:10:24,330 It's going to be full. 146 00:10:25,490 --> 00:10:33,020 And then inside of it, I have skill, so let's just right here skill or, you know, my apologies. 147 00:10:33,260 --> 00:10:38,420 This one should be second on my bat and then I would just want to display that skill. 148 00:10:38,960 --> 00:10:44,270 And then the last thing for, again, I don't need the stock anymore here is going to be a brand. 149 00:10:44,770 --> 00:10:50,270 So as you can see, I'm just using that info program for styling and I'm just copying pasting. 150 00:10:50,270 --> 00:10:54,770 So company here, once we save, we should have all these three hours. 151 00:10:55,190 --> 00:10:57,650 So this is the only one that's technically dynamic. 152 00:10:57,660 --> 00:11:03,680 Rest of them I'm just grabbing from the API and I would want to set up the horizontal line and then 153 00:11:03,680 --> 00:11:09,410 right after the horizontal line, I would want to go with add to cart component, because when it comes 154 00:11:09,410 --> 00:11:14,770 to adding to the cart, there's going to be multiple colors available. 155 00:11:15,170 --> 00:11:20,080 So that's why I wouldn't want to set this up in the actual single product. 156 00:11:20,390 --> 00:11:26,330 There's going to be a separate component that sets up how many items we're going to add to the cart 157 00:11:26,630 --> 00:11:28,400 as well as the color guard. 158 00:11:28,400 --> 00:11:32,320 If you need a refresher, just go to any other and you'll see that. 159 00:11:32,330 --> 00:11:36,960 And of course, for some reason, all of the ones that I'm showing, you have only one color. 160 00:11:37,010 --> 00:11:39,260 Now, see, we have multiple colors. 161 00:11:39,530 --> 00:11:44,100 And since there's going to be some logic involved, I don't want to set this up in a single product. 162 00:11:44,870 --> 00:11:51,620 Yeah, technically, I could have, but I just thought that it makes a little bit more sense if we separate 163 00:11:51,620 --> 00:11:52,440 these concerns. 164 00:11:52,730 --> 00:11:59,240 So there's going to be a separate component that deals with this adding to the cart functionality as 165 00:11:59,240 --> 00:11:59,720 well as what? 166 00:11:59,720 --> 00:12:01,550 Which color are we actually adding? 167 00:12:01,910 --> 00:12:02,990 Now, here's the thing. 168 00:12:03,380 --> 00:12:06,380 I only want to display that component if. 169 00:12:07,420 --> 00:12:10,670 The in stock value is bigger than zero, correct? 170 00:12:10,870 --> 00:12:14,530 What's the point of showing the colors, the the amount and all that? 171 00:12:14,560 --> 00:12:20,980 If I can't have that item to the card anyway, since out of the stock and again, if you want to see 172 00:12:20,980 --> 00:12:23,530 how it's going to look like, I think this one was out of stock. 173 00:12:23,530 --> 00:12:26,160 And notice, I'm not rendering that component. 174 00:12:26,650 --> 00:12:32,630 So right after the horizontal line, I'll set up another expression and again, I'll check for the stock 175 00:12:32,650 --> 00:12:39,110 and say if it is bigger than zero only then showcase add to cart component. 176 00:12:39,850 --> 00:12:44,910 Nothing is in there at the moment in the ad card, by the way, we just need to go with and as well. 177 00:12:45,310 --> 00:12:51,040 So we're going to go with and and if of course stock is bigger than a zero, then we'll see Addicott 178 00:12:51,040 --> 00:12:51,460 component. 179 00:12:51,610 --> 00:12:53,890 If not, nothing will be displayed. 180 00:12:54,220 --> 00:12:56,220 That should be our basic setup. 181 00:12:56,230 --> 00:13:01,210 And as you can see, we just have three components that we need to work on. 182 00:13:01,570 --> 00:13:07,480 We need to work on product imageries where I would want to show the images and the functionality where 183 00:13:07,480 --> 00:13:08,770 we can change that image. 184 00:13:09,070 --> 00:13:14,410 Then, of course, we have the stars where at the moment we have only the values, only the number of 185 00:13:14,410 --> 00:13:14,740 hours. 186 00:13:14,740 --> 00:13:18,780 But what I would want is to showcase my own icons. 187 00:13:18,790 --> 00:13:25,570 And then lastly, we have add to cart functionality where we can change the colors and change the amount 188 00:13:25,570 --> 00:13:28,760 of items we would want to add to the.