1 00:00:00,450 --> 00:00:06,030 In this video, we'll see how to build this checkout page of the products that you add to the card. 2 00:00:06,540 --> 00:00:10,110 And then this proceed to checkout component. 3 00:00:10,500 --> 00:00:11,480 So it's out of the net. 4 00:00:12,300 --> 00:00:16,740 So first thing we have to do is we have to create a check out or just that we did in the previous video. 5 00:00:17,010 --> 00:00:20,790 I didn't start off hello, but now we'll be doing the main thing that we want to do. 6 00:00:24,790 --> 00:00:29,890 So firstly, the this division name should be out the class, the class name should be checked out. 7 00:00:35,160 --> 00:00:38,000 The incentive, as you can see over here. 8 00:00:38,330 --> 00:00:39,850 We're having two divisions. 9 00:00:39,980 --> 00:00:45,500 One is the left side, which contains the shopping basket and then the lights content, the amount to 10 00:00:45,500 --> 00:00:49,190 be paid and the this checkbox and the checkout button. 11 00:00:49,670 --> 00:00:51,860 Be divided into two divisions wanted to do. 12 00:00:51,860 --> 00:00:53,070 And that is that I do. 13 00:00:54,020 --> 00:00:55,520 Let me create a two fold. 14 00:00:56,600 --> 00:00:57,230 Check out. 15 00:00:58,770 --> 00:00:59,160 Left. 16 00:01:01,770 --> 00:01:03,540 And then not check out, right? 17 00:01:07,070 --> 00:01:13,910 OK, so no, inside left water, we should have what we need to have, if you can see over here we are 18 00:01:13,910 --> 00:01:21,320 having our image with this you are in and then your shopping basket edge to edge to orange, one or 19 00:01:21,520 --> 00:01:24,650 three, walk your preferred and then a product component. 20 00:01:25,030 --> 00:01:28,910 OK, so now first will be implementing each and everything. 21 00:01:29,150 --> 00:01:30,260 So first, we need image. 22 00:01:31,640 --> 00:01:33,290 Image with glass animals. 23 00:01:33,470 --> 00:01:34,400 Check out AD. 24 00:01:35,710 --> 00:01:36,950 Admits advertisment. 25 00:01:37,570 --> 00:01:39,580 So if I created it is asking for source. 26 00:01:39,910 --> 00:01:41,770 So let me use this image as the source. 27 00:01:47,350 --> 00:01:51,730 Yeah, so the computer doing the image, softer the image. 28 00:01:54,950 --> 00:01:56,120 There is a catch to. 29 00:01:57,150 --> 00:02:01,200 It's like there is a hedge to your shopping basket that you want. 30 00:02:01,860 --> 00:02:02,340 So. 31 00:02:03,420 --> 00:02:09,240 I'll be creating a new diff after the image, and then we'll be using this had to do with class name 32 00:02:09,240 --> 00:02:10,110 of check out Typekit. 33 00:02:15,750 --> 00:02:17,580 This will be your shopping basket. 34 00:02:22,590 --> 00:02:23,760 So after the actual. 35 00:02:34,060 --> 00:02:40,090 We need travel after the A.V need to have products, right, so it will be different products like. 36 00:02:41,790 --> 00:02:49,020 We'll be having this broader and we can have the various products that we want, but now we'll do that. 37 00:02:49,890 --> 00:02:53,430 The fact purpose we'll be using the same product for everything. 38 00:02:53,850 --> 00:02:57,540 So let me create a component culture code product. 39 00:03:03,590 --> 00:03:08,780 So once we create any component for the Typekit project, we have to create a file in that file will 40 00:03:09,010 --> 00:03:12,250 be out product dodgers. 41 00:03:13,400 --> 00:03:14,960 And then we have to create a serious fight. 42 00:03:18,110 --> 00:03:20,690 Product, not CSF. 43 00:03:21,910 --> 00:03:26,920 So once we create them, we have to just do the basic stuff that we do every time. 44 00:03:38,430 --> 00:03:39,490 Or obnoxious? 45 00:03:46,000 --> 00:03:51,730 So instead, this checkered product is basically the products that we use in the gas from potential, 46 00:03:51,740 --> 00:03:57,040 I'll be copying the same thing over here, the same diff I copy. 47 00:04:13,110 --> 00:04:13,350 Now. 48 00:04:29,750 --> 00:04:38,090 So in instead of product will be having a product, the checkout product, plus there is no need to 49 00:04:38,090 --> 00:04:38,810 have this do. 50 00:04:43,580 --> 00:04:47,060 So product, we check our product and, sure enough, product. 51 00:04:51,550 --> 00:04:58,270 Late last night and then checkered and sheared off product info like mescaline, you have to change 52 00:04:58,270 --> 00:05:05,320 the order here in the home page, as you can see who will be having title and then no rating and then 53 00:05:05,320 --> 00:05:05,820 the image. 54 00:05:06,160 --> 00:05:08,620 But over here, we'll be having the different thing. 55 00:05:08,800 --> 00:05:13,780 The first title and then the November on the left side will be having you made it on the right and will 56 00:05:13,780 --> 00:05:16,420 be having this multiple things somehow to do that. 57 00:05:16,990 --> 00:05:21,130 So it's going to have to change the article instead of like, we'll do it from scratch. 58 00:05:21,460 --> 00:05:21,760 OK. 59 00:05:23,060 --> 00:05:28,640 So, yeah, check product of the product will have our image, so image with glasses and check our product 60 00:05:28,640 --> 00:05:29,000 image. 61 00:05:36,450 --> 00:05:39,630 So the source will be I'll be using the cement source, as I said before. 62 00:05:42,030 --> 00:05:45,420 This from this image, let me copy the United. 63 00:05:50,130 --> 00:05:53,250 So after they made, I'll be creating a demand for product and for. 64 00:06:00,140 --> 00:06:05,000 So inside the bar, and for her to be having the checkered product title, I'll be adding the price 65 00:06:05,150 --> 00:06:06,800 and then the checkout product rating. 66 00:06:07,920 --> 00:06:09,870 So, as you can see, will be having. 67 00:06:11,190 --> 00:06:11,670 Check out. 68 00:06:13,740 --> 00:06:14,160 Product. 69 00:06:15,720 --> 00:06:16,260 Biden. 70 00:06:18,410 --> 00:06:22,490 And then inside it, for example, let us have the the in itself. 71 00:06:37,970 --> 00:06:40,920 There's not a day that will be this will be the time. 72 00:06:54,210 --> 00:06:56,400 Everything is done, and then the check on the. 73 00:06:57,680 --> 00:07:02,710 So there's I don't know what it is, we have to close the feedback, right, so I'll be closing the 74 00:07:03,130 --> 00:07:03,610 beta. 75 00:07:05,930 --> 00:07:09,470 So now we have to go after the checkered product title. 76 00:07:09,950 --> 00:07:11,810 Now we'll be having price. 77 00:07:13,940 --> 00:07:15,290 Price will happy that. 78 00:07:23,260 --> 00:07:27,730 Science enterprise, like we can use that similar thing that we used before, that is. 79 00:07:36,410 --> 00:07:39,710 And then the shirt off for Dynamic will advance to the. 80 00:07:40,780 --> 00:07:46,900 According, but I wasn't of 20 dollars, so once we gave the price we can now that I think we can do 81 00:07:46,900 --> 00:07:47,350 the rating. 82 00:07:48,040 --> 00:07:50,380 So for the rating, I'll be getting out of there. 83 00:07:52,770 --> 00:07:53,850 Check our product rating. 84 00:08:02,690 --> 00:08:08,930 And said this, I can use the same array format, but as of now we are creating the not the heart cutting, 85 00:08:08,930 --> 00:08:13,350 but vitamine using only this only simply starting. 86 00:08:14,000 --> 00:08:15,530 So that's good to go. 87 00:08:17,530 --> 00:08:24,100 And then once we are done with the rating thing, we can add a button called to remove the basket. 88 00:08:25,920 --> 00:08:26,910 After this death. 89 00:08:28,520 --> 00:08:33,530 Offer the product and fund everything it can have the name of the botanical remove from basket. 90 00:08:41,770 --> 00:08:44,940 Check out a proletarian sector, check out our guest, I'll be calling the our product. 91 00:08:47,370 --> 00:08:48,840 So now if you see the page. 92 00:08:51,320 --> 00:08:55,170 We're getting it, we are getting a check, our product is not definitive or today. 93 00:08:55,610 --> 00:08:59,210 Basically, we have to import the check or the product from foreign. 94 00:09:07,990 --> 00:09:08,770 In Project. 95 00:09:13,720 --> 00:09:15,910 Product from Jaguar Bumper. 96 00:09:16,900 --> 00:09:21,080 So, yeah, if you refresh, you can see like we have got the image we have about the shopping basket 97 00:09:21,080 --> 00:09:22,270 title and then a project. 98 00:09:22,810 --> 00:09:29,410 But as you can see, we haven't gotten the exact thing that we want, like the styling thing. 99 00:09:29,650 --> 00:09:34,270 So after all, to do the styling thing and now we will do the right thing, the right component. 100 00:09:34,750 --> 00:09:36,250 So the check out right. 101 00:09:36,730 --> 00:09:37,930 So basically what we should have. 102 00:09:38,320 --> 00:09:44,320 So now we're going to be using a package from npm that is the total package so we can do this product. 103 00:09:47,370 --> 00:09:52,220 So this will be the operative component that will create here and then set us up, and it will be using 104 00:09:52,220 --> 00:10:00,520 that reactive currency currency format and be a package to basically let me create a biblical subtotal 105 00:10:00,530 --> 00:10:00,560 total. 106 00:10:04,030 --> 00:10:04,340 OK. 107 00:10:04,870 --> 00:10:10,990 So inside this up, total, I need to pick since I created the combat aftercare to get the files over 108 00:10:10,990 --> 00:10:11,200 here. 109 00:10:11,410 --> 00:10:12,160 Let me clear them. 110 00:10:15,420 --> 00:10:18,120 Suffered a lot cheers and then suffered a lot of success. 111 00:10:22,150 --> 00:10:25,720 So long as we are done, we have to be aware we have to import the snippet. 112 00:10:30,760 --> 00:10:31,600 Import react. 113 00:10:36,620 --> 00:10:39,530 And then we have to import the style bench. 114 00:10:47,260 --> 00:10:53,830 So instead, the Super Bowl thing will be using the currency format, the currency format, to confirm 115 00:10:53,830 --> 00:10:58,150 that we get from the real currency format bracket, so let us first install the package. 116 00:10:59,490 --> 00:11:03,750 Let me first NBA instant react. 117 00:11:06,020 --> 00:11:06,740 Currency. 118 00:11:07,750 --> 00:11:08,350 Format. 119 00:11:10,410 --> 00:11:12,370 So they've it's getting strong. 120 00:11:18,230 --> 00:11:21,200 So here we have to import the supplies, we are using it. 121 00:11:26,540 --> 00:11:28,430 Box of total from. 122 00:11:34,140 --> 00:11:36,750 Yes, but it's very clear that it. 123 00:11:38,240 --> 00:11:39,280 We are not getting any of them. 124 00:11:40,470 --> 00:11:44,760 So now we have to check whether the packages are packages, drugs so we can use those up inside the 125 00:11:44,760 --> 00:11:47,490 software that we can import the currency for Mac. 126 00:11:50,860 --> 00:11:57,850 So currency, fortunately, will be pretty described component that is present in the React currency 127 00:11:57,850 --> 00:12:00,100 format package that we installed recently. 128 00:12:04,620 --> 00:12:05,400 Finally, was that? 129 00:12:13,250 --> 00:12:14,960 So long as we imported, we can use that. 130 00:12:15,170 --> 00:12:17,720 So inside their new name will be. 131 00:12:19,040 --> 00:12:21,170 Class name will be Subtotal. 132 00:12:26,810 --> 00:12:28,850 And then you can use the currency format. 133 00:12:31,470 --> 00:12:32,280 Karen's environment. 134 00:12:32,820 --> 00:12:33,780 We can't close it. 135 00:12:35,580 --> 00:12:37,020 So it will be self closing. 136 00:12:38,200 --> 00:12:44,800 So the beauty of the currency format is it has some like predefined attributes that we can use. 137 00:12:45,610 --> 00:12:51,730 So now I'll be typing a part of the code that you have to understand that it is not difficult to understand. 138 00:12:51,730 --> 00:12:55,870 You can like this self-understanding part surrender text. 139 00:13:00,790 --> 00:13:03,730 Value, I'll be using anonymous functional audio. 140 00:13:21,370 --> 00:13:22,570 Those are pretended to be. 141 00:13:25,170 --> 00:13:27,930 Like several items. 142 00:13:31,500 --> 00:13:32,010 Strong. 143 00:13:32,400 --> 00:13:39,390 Let me give the value of dollars zero like this is very hard putting it, so I'll be giving these kinds 144 00:13:39,390 --> 00:13:46,440 of stuff and then we'll be creating a small thing that blast names up total dud gift. 145 00:13:47,760 --> 00:13:53,850 So this is the check out the check box that we have seen recently when I opened the program and inside 146 00:13:53,850 --> 00:13:55,260 this had to be having a book. 147 00:13:57,790 --> 00:13:59,620 Input of five will be a checkbox. 148 00:14:04,070 --> 00:14:04,520 And then. 149 00:14:05,440 --> 00:14:05,950 This. 150 00:14:09,040 --> 00:14:10,390 Our nerve contains a gift. 151 00:14:19,800 --> 00:14:22,500 It's not a complete denial, basically close the. 152 00:14:23,840 --> 00:14:24,230 That's. 153 00:14:28,750 --> 00:14:33,740 So once we do this like of that that we can, this is done, this is one drop that we are sending that 154 00:14:33,980 --> 00:14:39,040 text, the text that we want and send the currency format and offer that we want to specify the different 155 00:14:39,040 --> 00:14:41,020 attributes like decimal scale. 156 00:14:41,470 --> 00:14:43,630 This scale will be around two. 157 00:14:48,230 --> 00:14:49,460 And then value will be. 158 00:14:52,140 --> 00:14:53,820 Let us say zero. 159 00:14:55,800 --> 00:15:02,160 So as I said, when we are defining that imagery in order to give any fallen out of semicolon think. 160 00:15:03,590 --> 00:15:05,300 Display type will be text. 161 00:15:11,890 --> 00:15:12,860 Thousands separated. 162 00:15:13,330 --> 00:15:17,830 It's true so that we can see the thousands and thousands clearly. 163 00:15:21,500 --> 00:15:26,090 Prefix will be the doughnut that we use just about, so these are the. 164 00:15:27,040 --> 00:15:28,540 These are the problems that I am sending. 165 00:15:30,510 --> 00:15:32,850 So what this will do is this will render the. 166 00:15:34,190 --> 00:15:38,240 This text that we are sending over here with this by applying these attributes. 167 00:15:38,840 --> 00:15:45,890 OK, so now I want to check what your values right now candidates are like is not defined. 168 00:15:46,640 --> 00:15:48,190 Let me go like this. 169 00:15:48,350 --> 00:15:50,320 Let me give up. 170 00:15:50,840 --> 00:15:52,760 As of now, I will not give any prefix. 171 00:15:54,070 --> 00:15:54,430 So, yeah. 172 00:15:55,730 --> 00:16:01,750 As you can see, you can see the React currency format over here, but there is nothing. 173 00:16:03,300 --> 00:16:07,590 As we won because of that, because there are no states that are giving out as of now. 174 00:16:07,860 --> 00:16:09,770 So now let us do that starting up. 175 00:16:10,200 --> 00:16:10,810 We have to. 176 00:16:11,250 --> 00:16:15,810 We have to fight this or not to assess the checkered product or CSIS and also the. 177 00:16:17,510 --> 00:16:18,440 Subtotal Doxy. 178 00:16:19,610 --> 00:16:21,890 So we have to start these three things you need to do that. 179 00:16:25,440 --> 00:16:30,360 So I've done the styling part, so I'm going to have to change what it is. 180 00:16:31,350 --> 00:16:36,780 Previously, I have just given this last names product underscoring social change at the checkout product 181 00:16:36,780 --> 00:16:38,970 and ask for info like this. 182 00:16:39,390 --> 00:16:41,610 So yeah, so I'm going to check out the. 183 00:16:42,450 --> 00:16:47,400 I gave the checkout autopsy a facade display flex because I want everything side by side inside to check 184 00:16:47,400 --> 00:16:49,170 on the left component and the right component. 185 00:16:49,170 --> 00:16:54,280 I want side by side and then margin bottom, the title and the checkout. 186 00:16:54,840 --> 00:16:56,160 So now the checkout left Flex. 187 00:16:56,160 --> 00:17:01,220 That actually is column because I want every product, one below the other instead of beside. 188 00:17:01,230 --> 00:17:05,820 So that's why I've given the checkout product to underscore the display. 189 00:17:06,270 --> 00:17:09,370 That action this column Netflix dedication has fallen. 190 00:17:10,290 --> 00:17:14,550 So basically, this is like if you don't understand Flex, that action that reflects the simple logic 191 00:17:14,550 --> 00:17:15,830 is all. 192 00:17:16,260 --> 00:17:21,060 For example, if you are giving the Flex two, what if that means all the child? 193 00:17:21,120 --> 00:17:23,370 You will be aligned in this format. 194 00:17:23,850 --> 00:17:25,770 So as you can see inside the. 195 00:17:26,810 --> 00:17:27,920 Check out our jazz. 196 00:17:29,010 --> 00:17:29,610 The checkout. 197 00:17:30,770 --> 00:17:38,240 Left has image and I give, so they imagine that there will be a line one after the other one below 198 00:17:38,240 --> 00:17:38,540 the other. 199 00:17:38,750 --> 00:17:41,540 So that is what I want to do and to correct. 200 00:17:41,600 --> 00:17:42,550 I want one below than that. 201 00:17:43,010 --> 00:17:49,390 But that is why I will be using that since I want all natural items to get one that I'll be using that 202 00:17:49,700 --> 00:17:49,870 --. 203 00:17:49,940 --> 00:17:54,590 Plus the fact that this column, if you don't want, if you want one beside the other, you have to 204 00:17:54,920 --> 00:17:55,940 just avoid this. 205 00:17:56,690 --> 00:17:57,830 Avoid writing this line. 206 00:17:58,520 --> 00:18:00,560 That is what you have to basically remember. 207 00:18:00,800 --> 00:18:05,660 So after you're done with your ordered cases, I'll be going to check out product or CSIS. 208 00:18:05,960 --> 00:18:11,210 So this is similar that we we added in product cases like the Checkout Product Checkout correcting for 209 00:18:11,670 --> 00:18:12,050 everything. 210 00:18:12,050 --> 00:18:19,010 You can go to the court basically a simple object or object that content a door to not disturb the resolution 211 00:18:19,010 --> 00:18:19,610 of the image. 212 00:18:20,660 --> 00:18:21,470 Perfect, dim it. 213 00:18:21,860 --> 00:18:27,290 And then if you photoshop CCIs again, deflect that action with then everything the background color. 214 00:18:27,530 --> 00:18:32,810 So that is the checkbox for you to be having something they input will have a margin right of five pixels 215 00:18:32,810 --> 00:18:34,370 and then the button stating everything. 216 00:18:34,700 --> 00:18:39,860 So once you're done with very few, open your project, you're going to see like you are getting that 217 00:18:39,860 --> 00:18:43,190 shopping basket are getting a product. 218 00:18:43,190 --> 00:18:45,020 And then that idea, you are adding this. 219 00:18:45,260 --> 00:18:46,190 It's pretty clean, right? 220 00:18:46,250 --> 00:18:46,670 The header. 221 00:18:46,670 --> 00:18:50,270 And if you click on this issue up, it will go to the whole benefit, click on the basket and it will 222 00:18:50,270 --> 00:18:50,900 go in there. 223 00:18:51,380 --> 00:18:55,760 And if you want to add multiple products, you can basically do this thing. 224 00:18:56,000 --> 00:18:59,150 Go to check out the address and set up one checkout product. 225 00:18:59,150 --> 00:19:04,700 If you want multiple checkout products, you can do that simply so you are getting one below the other. 226 00:19:04,710 --> 00:19:06,620 Since the Flex, that action is color. 227 00:19:06,980 --> 00:19:11,930 If you did not give the Flex Direction as column, there might be very clumsy, like one in which it 228 00:19:11,960 --> 00:19:13,580 will mess up the React project. 229 00:19:14,000 --> 00:19:15,170 So this thing you have to remember. 230 00:19:15,890 --> 00:19:18,180 So with this, we have hardcoded them. 231 00:19:19,220 --> 00:19:21,740 What do you say the checkout page? 232 00:19:22,040 --> 00:19:28,010 One of the most important thing is how to add this add to basket and remove from basket functionality. 233 00:19:28,220 --> 00:19:31,850 So when you click on add to basket, you have to see the one item in the cart. 234 00:19:31,850 --> 00:19:33,950 If you have multiple, pick you up to three items. 235 00:19:33,950 --> 00:19:38,420 If you are adding three items, then if you click on this, you want the items that were added to the 236 00:19:38,420 --> 00:19:40,640 basket rather than the hard part of that product. 237 00:19:41,300 --> 00:19:46,160 And also basically based on the product, we have to see the total amount and the total items. 238 00:19:46,520 --> 00:19:50,810 So basically, we are done with the hot wording and the next thing is a very important and difficult 239 00:19:50,810 --> 00:19:56,570 step to understand that state provided that I do that and are using the status and everything so that 240 00:19:56,570 --> 00:20:00,860 we can see in the next reader how to implement that to cart and remove some basket functionality.