1 00:00:00,330 --> 00:00:08,220 And this is going to be quite big action and you'll see in a second why, so now I'll open up the sidebar 2 00:00:08,790 --> 00:00:11,850 and we're looking for Kaat reduce her. 3 00:00:12,720 --> 00:00:23,570 And once we have coproducer or our want to handle add to cart action and we'll see if if action and 4 00:00:23,700 --> 00:00:29,070 that type is equal to add to CART and of course, we would want to do something. 5 00:00:29,250 --> 00:00:31,680 And now, of course, I can remove a return state. 6 00:00:32,590 --> 00:00:39,400 I'll throw the error if the action is not matching and of course, I'll start by getting all my values 7 00:00:39,400 --> 00:00:48,580 from the payload, so I'll say the color and amount and then the actual product and all of that is coming 8 00:00:48,580 --> 00:00:51,300 from action and payload. 9 00:00:51,580 --> 00:00:57,850 And I would want to start my functionality by checking whether the item is already in the cart. 10 00:00:58,810 --> 00:01:03,460 And of course, we know that the moment cart is empty. 11 00:01:03,500 --> 00:01:04,290 All right, correct. 12 00:01:04,510 --> 00:01:09,750 But we still need to set it up because there's going to be a if and statement. 13 00:01:10,300 --> 00:01:19,390 So let's go with CONSED and I'll call this time item and then I'll go with state court and find. 14 00:01:19,820 --> 00:01:26,950 And what's interesting, when I'm going to be setting up the I.D. in a cart, I will combine my color 15 00:01:27,340 --> 00:01:33,140 with my I.D. So of course I already have the ID as far as the productivity. 16 00:01:33,580 --> 00:01:41,140 But then since in a cart I have the same product, but maybe with a different color, I will combine 17 00:01:41,140 --> 00:01:41,320 them. 18 00:01:41,470 --> 00:01:46,000 That's why when we're looking for the item, we'll right away combine those values as well. 19 00:01:46,270 --> 00:01:47,970 So use find method. 20 00:01:48,340 --> 00:01:54,550 And then of course I'm looking for the items, so I'm just going to go with parameter of I and I'll 21 00:01:54,550 --> 00:02:04,210 say if item ID matches to that of ID plus color that is coming from my payload, if it matches that 22 00:02:04,210 --> 00:02:07,810 means that the item is already in the cart. 23 00:02:08,170 --> 00:02:13,660 If it's not, then of course we're adding a brand new item and I'll set up my if I use. 24 00:02:14,590 --> 00:02:20,740 If the item exists, that means that it is already in the cart and of course, eventually it will set 25 00:02:20,770 --> 00:02:23,680 up this functionality, but for now, I would just want to go. 26 00:02:23,680 --> 00:02:24,210 What else? 27 00:02:24,220 --> 00:02:26,420 Because I know that I have a.. 28 00:02:26,650 --> 00:02:28,360 So we might as well handle that first. 29 00:02:28,720 --> 00:02:35,310 And we're going to start by creating a new item and then just adding it to the cart. 30 00:02:35,740 --> 00:02:41,650 So say here comes a new item that will be a object. 31 00:02:41,890 --> 00:02:50,740 And then as far as the return from this one, I'm going to go with a return that that state than in 32 00:02:50,740 --> 00:02:51,220 the state. 33 00:02:51,220 --> 00:02:52,680 I would want to override the cart. 34 00:02:52,990 --> 00:02:59,630 And as far as the cart, I'm just going to say not that that and then we're looking for the state court. 35 00:02:59,950 --> 00:03:05,290 So I would want to copy all the values from my previous cart, which at the moment, of course, is 36 00:03:05,290 --> 00:03:06,160 just an empty array. 37 00:03:06,370 --> 00:03:12,910 And then I would want to add that new item, that new object that we're constructing over here. 38 00:03:13,270 --> 00:03:21,300 And as far as I remember, I just said that we'll construct our I.D. by combining ID plus color because 39 00:03:21,310 --> 00:03:22,600 I can have the same item. 40 00:03:23,020 --> 00:03:26,110 So the same product, but with different color. 41 00:03:26,370 --> 00:03:30,370 That's why the property will be equal to ID plus color. 42 00:03:30,520 --> 00:03:37,240 And of course, I'm talking about these values over here, the ones that are coming from the action 43 00:03:37,260 --> 00:03:37,690 below. 44 00:03:38,080 --> 00:03:40,120 Then what other properties I would want. 45 00:03:40,120 --> 00:03:44,170 I'm going to go with the name and now I'm going to access that product. 46 00:03:44,170 --> 00:03:48,030 One remember the one that we passed down from the add to cart? 47 00:03:48,340 --> 00:03:50,170 So say your product name. 48 00:03:50,500 --> 00:03:52,980 And then of course I would want to set up my color. 49 00:03:53,230 --> 00:03:56,150 Now, color is again coming from the action paillard. 50 00:03:56,350 --> 00:03:58,510 That is that main color that we're setting up. 51 00:03:58,900 --> 00:04:05,890 Then of course I also would want to have the amount of an image now image is going to be in the product. 52 00:04:06,220 --> 00:04:08,380 So we're going to go with product images. 53 00:04:08,590 --> 00:04:10,480 Remember images, who has an array? 54 00:04:10,810 --> 00:04:12,790 And I'm looking for the first item. 55 00:04:12,800 --> 00:04:15,430 That's why I go with zero and then dot URL. 56 00:04:15,700 --> 00:04:20,680 And then when it comes to the price, I'm going to set up the product price. 57 00:04:20,980 --> 00:04:26,090 And I also want to have a property of Max, which is going to be equal to my stock. 58 00:04:26,470 --> 00:04:33,600 So again, we are doing this because I don't want the user to pick more items than I have actually in 59 00:04:33,610 --> 00:04:33,980 a stock. 60 00:04:34,270 --> 00:04:39,690 You'll notice that, for example, for this one stock is a lemon, but for this one it is five. 61 00:04:39,940 --> 00:04:42,050 So we still need to keep track of that. 62 00:04:42,070 --> 00:04:42,940 That's what there's going to be. 63 00:04:42,940 --> 00:04:48,280 Two more properties, price and product and price. 64 00:04:49,480 --> 00:04:55,480 As far as the max, we're going to go with Max and the product and of course, the stock. 65 00:04:55,810 --> 00:04:58,090 So I will save this one right now. 66 00:04:58,420 --> 00:05:03,250 And I think we're going to work on this guy, the temp item, if it is true. 67 00:05:03,460 --> 00:05:05,200 And next video for now. 68 00:05:05,260 --> 00:05:08,520 We just want to see whether our initial functionality works. 69 00:05:08,920 --> 00:05:12,400 So I would like to open, of course, my components. 70 00:05:12,700 --> 00:05:15,970 In this case, I'm looking for card provider. 71 00:05:16,180 --> 00:05:19,390 And at the moment I can see that cart is an empty array. 72 00:05:19,840 --> 00:05:28,270 But if we navigate to a single product, of course, I pick the one that doesn't have the stock items. 73 00:05:28,660 --> 00:05:29,710 So let's try this one. 74 00:05:30,350 --> 00:05:38,110 Now, of course I have add to cart I can set up right now my color as well as the amount and then add 75 00:05:38,110 --> 00:05:41,650 to cart and there it is now my value changed. 76 00:05:41,800 --> 00:05:46,360 Now we also navigated the cart page, but of course we're not handling that. 77 00:05:46,630 --> 00:05:50,650 So what's really cool that we have the cart now. 78 00:05:50,650 --> 00:05:52,540 Of course I have my item. 79 00:05:52,540 --> 00:05:59,140 So the amount of items is three color is whatever was the name color of course. 80 00:05:59,320 --> 00:06:00,250 And then check it out. 81 00:06:00,510 --> 00:06:06,930 The idea is the product 80 plus whatever color I picked. 82 00:06:07,210 --> 00:06:11,830 So if I'm going to go back to the product, I'll try to remember the same color. 83 00:06:12,040 --> 00:06:16,930 I'm not going to be able to add it out is how we have no matching add to cart. 84 00:06:17,140 --> 00:06:18,160 So why is this happening? 85 00:06:18,180 --> 00:06:23,770 Well, because we have that item and we're not handling not return to notice here. 86 00:06:23,770 --> 00:06:28,540 Of course I am handling what I'm returning from my action put in here. 87 00:06:28,540 --> 00:06:29,410 We're not doing that. 88 00:06:29,590 --> 00:06:33,460 And this is going to be something that we're going to deal in the next video.