1 00:00:00,440 --> 00:00:01,070 Welcome back. 2 00:00:01,460 --> 00:00:05,870 Now, what we need to do is that we need to work on this button, the remove button, so that if the 3 00:00:05,870 --> 00:00:09,500 user clicks on remove, we need to remove that product completely from the cart. 4 00:00:10,190 --> 00:00:17,600 So to do this, what I'm going to do is that I'm going to create here a I'm going to add a uniform to 5 00:00:17,600 --> 00:00:18,200 this button. 6 00:00:19,160 --> 00:00:20,150 So here. 7 00:00:21,530 --> 00:00:22,010 You're. 8 00:00:24,920 --> 00:00:25,250 Here. 9 00:00:25,250 --> 00:00:25,730 This button. 10 00:00:25,730 --> 00:00:26,930 We need to add a form. 11 00:00:27,560 --> 00:00:34,670 So in order to do this, we can here acquire the form form. 12 00:00:35,840 --> 00:00:37,550 And I'm going to give this form 13 00:00:40,670 --> 00:00:41,780 action and method. 14 00:00:41,790 --> 00:00:49,580 So the method is going to be equal to past and the action is called that the same page. 15 00:00:50,690 --> 00:00:57,680 And then I'm going to move this attack over to the to the form. 16 00:00:58,640 --> 00:01:04,030 However, I'm going to change this from remove to from attack to input. 17 00:01:04,050 --> 00:01:09,020 I'm going to say input and the class is going to be the class. 18 00:01:09,060 --> 00:01:09,560 Eva. 19 00:01:09,560 --> 00:01:11,780 The type is going to be submit. 20 00:01:12,560 --> 00:01:13,340 Submit. 21 00:01:15,480 --> 00:01:15,960 And. 22 00:01:17,310 --> 00:01:17,970 And the name. 23 00:01:18,570 --> 00:01:18,960 Name. 24 00:01:20,460 --> 00:01:25,740 Name is going to be equal to remove underscore product. 25 00:01:27,120 --> 00:01:29,910 And here I need to remove this. 26 00:01:31,560 --> 00:01:34,260 And now I'm going to say value. 27 00:01:35,920 --> 00:01:41,920 Value is going to be equal to rebuild and we need to know they are the product. 28 00:01:42,730 --> 00:01:44,880 So I'm going to create here and I have an input. 29 00:01:44,980 --> 00:01:49,840 I'm going to say input and then I'm going to say type hidden. 30 00:01:51,500 --> 00:01:52,940 And then I'm going to say your name. 31 00:01:53,090 --> 00:01:55,150 The name is product. 32 00:01:55,910 --> 00:01:56,840 Underscore it. 33 00:01:58,100 --> 00:02:08,030 And the value is remember BHP and then value eco first eco. 34 00:02:12,030 --> 00:02:12,900 Value. 35 00:02:16,290 --> 00:02:16,640 Product. 36 00:02:17,400 --> 00:02:17,930 Product. 37 00:02:18,680 --> 00:02:19,570 Underscore I. 38 00:02:21,560 --> 00:02:24,020 And let me test disperse this in the browser. 39 00:02:24,230 --> 00:02:26,930 Let me refresh and make sure that we don't have problems. 40 00:02:27,770 --> 00:02:32,720 So here it says it is removed, but the problem is with the design. 41 00:02:32,720 --> 00:02:37,580 So let me work on before I work on the logic, let's work on that design. 42 00:02:38,090 --> 00:02:41,630 So this, this button exists in the assets. 43 00:02:45,070 --> 00:02:46,140 In the east. 44 00:02:46,810 --> 00:02:48,100 So we have the remove. 45 00:02:48,100 --> 00:02:49,330 Remember, we have the rebels. 46 00:02:50,790 --> 00:02:53,040 We move here in the cart. 47 00:02:55,040 --> 00:02:56,000 So in the cards. 48 00:02:57,180 --> 00:02:58,430 We have removed movement. 49 00:02:58,440 --> 00:03:02,990 And here what we need to do is that we need to add background. 50 00:03:03,120 --> 00:03:04,920 I think we need to remove the background color. 51 00:03:04,920 --> 00:03:06,990 None and border. 52 00:03:06,990 --> 00:03:07,290 None. 53 00:03:08,130 --> 00:03:08,760 Border. 54 00:03:10,570 --> 00:03:11,020 None. 55 00:03:12,050 --> 00:03:15,580 And the width is 100% with 100%. 56 00:03:17,110 --> 00:03:20,890 And let me now make sure that this is going to fix the design. 57 00:03:21,850 --> 00:03:22,330 So. 58 00:03:24,080 --> 00:03:25,730 As you can see, it's much better. 59 00:03:25,730 --> 00:03:27,330 But they have a problem, I should say. 60 00:03:27,360 --> 00:03:30,020 Background, background. 61 00:03:30,020 --> 00:03:30,530 None. 62 00:03:33,290 --> 00:03:35,330 Let's say background white. 63 00:03:37,010 --> 00:03:38,420 Let's say background white. 64 00:03:38,450 --> 00:03:39,890 This should fix it, I think. 65 00:03:42,740 --> 00:03:46,190 So now it has been fixed. 66 00:03:46,970 --> 00:03:48,890 So now what we want to do is that. 67 00:03:50,020 --> 00:03:54,220 We want to activate this button. 68 00:03:54,580 --> 00:03:59,290 So to activate this button, we have a policy request and we have two inputs. 69 00:03:59,290 --> 00:04:04,210 One for one has a name called Product ID, which contains the product ID. 70 00:04:04,840 --> 00:04:11,560 And then we have the remove product name, which is also an input that's going to remove that works 71 00:04:11,560 --> 00:04:12,850 as a button, which is this. 72 00:04:13,660 --> 00:04:22,870 Now what we want to do is that we need to add, instead of saying else, we need to say else if else 73 00:04:23,140 --> 00:04:23,710 I'm going to add. 74 00:04:25,450 --> 00:04:33,280 I'm going to push this and I'm going to add another Kaylie bracket and then I'm going to say LC, LC. 75 00:04:36,230 --> 00:04:41,090 And check their syntax again because you don't want to make mistakes here. 76 00:04:41,090 --> 00:04:53,210 ElseIf elseif So else if if we have here, the first condition is if if the if we are trying to add 77 00:04:53,210 --> 00:04:54,050 something to the cart. 78 00:04:54,050 --> 00:05:03,620 But this in this condition if we are trying to do to remove something from the card. 79 00:05:04,250 --> 00:05:05,840 So here I'm going to say. 80 00:05:09,320 --> 00:05:11,660 Let me close this to show you the complete guide. 81 00:05:12,230 --> 00:05:14,450 So the first condition is to add something to the cart. 82 00:05:14,840 --> 00:05:28,010 The second condition, which is this a LC, which is this LC is to remove rider from cart. 83 00:05:30,030 --> 00:05:37,710 So if we want to remove a product from the cart, we need to first say, here, is it lost? 84 00:05:41,220 --> 00:05:46,440 And then I remember the button, the button, the input. 85 00:05:48,190 --> 00:05:50,350 The input is this input. 86 00:05:52,340 --> 00:05:54,800 The input has a name called Remove Product. 87 00:05:55,640 --> 00:05:56,690 So I'm going to say here. 88 00:05:57,660 --> 00:06:03,240 If a set must remove underscore product. 89 00:06:03,840 --> 00:06:08,880 If that button button has been clicked, then we need to remove the product from position. 90 00:06:08,880 --> 00:06:11,400 So how can we remove a product from recession? 91 00:06:11,910 --> 00:06:13,080 It's actually very simple. 92 00:06:13,410 --> 00:06:17,970 We need to use the on set function and then we need to pass the session. 93 00:06:19,170 --> 00:06:19,740 Session. 94 00:06:21,500 --> 00:06:21,950 Guard. 95 00:06:22,670 --> 00:06:25,520 However, we need to remove only one element. 96 00:06:25,520 --> 00:06:26,240 Which element? 97 00:06:26,240 --> 00:06:28,100 We need to remove the element we need to remove. 98 00:06:28,130 --> 00:06:30,620 Remove the product that has this item. 99 00:06:31,010 --> 00:06:34,340 So we need to get the product ID first, product ID. 100 00:06:34,430 --> 00:06:37,310 So how can we get the product ID to get the product ID? 101 00:06:37,400 --> 00:06:45,950 We can't use the first and then product underscore ID. 102 00:06:47,690 --> 00:06:49,280 Remember the product ID here. 103 00:06:50,360 --> 00:06:53,910 Here we have in this input, we have name called Project Ready. 104 00:06:54,350 --> 00:06:56,570 We have this input that has a name called Project 80. 105 00:06:58,050 --> 00:06:59,100 So we can use it here. 106 00:06:59,100 --> 00:07:04,380 And then finally we can say session onset, session card, and then we need to passenger the product. 107 00:07:05,490 --> 00:07:08,400 This is going to remove that product from the card. 108 00:07:09,090 --> 00:07:09,590 That's it. 109 00:07:09,600 --> 00:07:10,440 Very, very simple. 110 00:07:11,280 --> 00:07:13,530 And let me now save and refresh. 111 00:07:14,790 --> 00:07:15,960 So pretty fresh artists. 112 00:07:15,970 --> 00:07:19,590 I'm going to hear Irish alchemy remove a product from the art. 113 00:07:20,370 --> 00:07:25,350 So for example, if you click on remove of the second product, if you click on remove, it did not 114 00:07:25,350 --> 00:07:25,650 work. 115 00:07:25,650 --> 00:07:30,240 And the reason is because here in my code, I have actually a problem. 116 00:07:30,240 --> 00:07:33,170 I need to make sure that they have the product. 117 00:07:33,220 --> 00:07:35,870 Maybe so I forgot here to specify the product. 118 00:07:35,890 --> 00:07:36,200 Maybe. 119 00:07:36,780 --> 00:07:38,910 So we have two options. 120 00:07:38,910 --> 00:07:51,190 We can here say product ID is equal is equal to lost product 80. 121 00:07:53,860 --> 00:08:02,920 Project underscore it, or we can pass the product deposit product directly into the into the second 122 00:08:04,060 --> 00:08:05,020 square bracket. 123 00:08:05,590 --> 00:08:06,850 But let me keep it like this. 124 00:08:06,880 --> 00:08:10,600 Let me now save and let's this certainly me refresh, giving me save and refresh. 125 00:08:11,290 --> 00:08:12,360 Now it should work. 126 00:08:12,370 --> 00:08:13,540 Maybe refresh. 127 00:08:13,540 --> 00:08:16,510 And now let me click on remove. 128 00:08:16,540 --> 00:08:17,770 So if I click on Remove. 129 00:08:19,100 --> 00:08:20,550 It will not work either. 130 00:08:20,570 --> 00:08:20,990 Why? 131 00:08:21,380 --> 00:08:26,190 Because the product now doesn't have an I.D., so we need to close down the browser and up in a fresh 132 00:08:26,240 --> 00:08:26,720 browser. 133 00:08:31,090 --> 00:08:34,310 So as you can see, this thing takes a lot of time, but it's worth it. 134 00:08:34,330 --> 00:08:35,740 Let me try one more time. 135 00:08:35,740 --> 00:08:37,630 So I'm going to go through the garbage. 136 00:08:38,110 --> 00:08:40,300 Now, let me try to remove this product. 137 00:08:40,330 --> 00:08:45,550 For example, if you click on remove, as you can see, the product has been removed from the cart. 138 00:08:46,060 --> 00:08:48,910 So the product was removed from the cart completely. 139 00:08:48,910 --> 00:08:51,400 And now we don't have anything in the cart. 140 00:08:52,600 --> 00:08:57,790 And let me go back and let's test this let's test this on other products. 141 00:08:58,690 --> 00:09:02,620 So let me let me add another product, for example, of this. 142 00:09:03,490 --> 00:09:04,960 I'm going to click on Buy now. 143 00:09:05,380 --> 00:09:08,560 And if you click on Add to Cart, it will be added to the cart. 144 00:09:09,220 --> 00:09:14,440 And let me add another product because we want to see what's going to happen if I delete only one product. 145 00:09:15,010 --> 00:09:20,290 So if you read, for example, of this product, the second product, as you can see, one product will 146 00:09:20,290 --> 00:09:22,360 be removed and the other will remain. 147 00:09:22,870 --> 00:09:28,120 And if you remove the last product here, it's going to be 150 will remain. 148 00:09:28,120 --> 00:09:30,280 And this is a problem which we need to fix. 149 00:09:30,280 --> 00:09:34,000 And the reason why we have this is because the code here is hardcoded. 150 00:09:34,000 --> 00:09:37,930 So we need to make this dynamic and it will fix this problem.