Welcome back.
Now, what we need to do is that we need to work on this button, the remove button, so that if the
user clicks on remove, we need to remove that product completely from the cart.
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
this button.
So here.
You're.
Here.
This button.
We need to add a form.
So in order to do this, we can here acquire the form form.
And I'm going to give this form
action and method.
So the method is going to be equal to past and the action is called that the same page.
And then I'm going to move this attack over to the to the form.
However, I'm going to change this from remove to from attack to input.
I'm going to say input and the class is going to be the class.
Eva.
The type is going to be submit.
Submit.
And.
And the name.
Name.
Name is going to be equal to remove underscore product.
And here I need to remove this.
And now I'm going to say value.
Value is going to be equal to rebuild and we need to know they are the product.
So I'm going to create here and I have an input.
I'm going to say input and then I'm going to say type hidden.
And then I'm going to say your name.
The name is product.
Underscore it.
And the value is remember BHP and then value eco first eco.
Value.
Product.
Underscore I.
And let me test disperse this in the browser.
Let me refresh and make sure that we don't have problems.
So here it says it is removed, but the problem is with the design.
So let me work on before I work on the logic, let's work on that design.
So this, this button exists in the assets.
In the east.
So we have the remove.
Remember, we have the rebels.
We move here in the cart.
So in the cards.
We have removed movement.
And here what we need to do is that we need to add background.
I think we need to remove the background color.
None and border.
None.
Border.
None.
And the width is 100% with 100%.
And let me now make sure that this is going to fix the design.
So.
As you can see, it's much better.
But they have a problem, I should say.
Background, background.
None.
Let's say background white.
This should fix it, I think.
So now it has been fixed.
So now what we want to do is that.
We want to activate this button.
So to activate this button, we have a policy request and we have two inputs.
One for one has a name called Product ID, which contains the product ID.
And then we have the remove product name, which is also an input that's going to remove that works
as a button, which is this.
Now what we want to do is that we need to add, instead of saying else, we need to say else if else
I'm going to add.
I'm going to push this and I'm going to add another Kaylie bracket and then I'm going to say LC, LC.
And check their syntax again because you don't want to make mistakes here.
ElseIf elseif So else if if we have here, the first condition is if if the if we are trying to add
something to the cart.
But this in this condition if we are trying to do to remove something from the card.
So here I'm going to say.
Let me close this to show you the complete guide.
So the first condition is to add something to the cart.
The second condition, which is this a LC, which is this LC is to remove rider from cart.
So if we want to remove a product from the cart, we need to first say, here, is it lost?
And then I remember the button, the button, the input.
The input is this input.
The input has a name called Remove Product.
So I'm going to say here.
If a set must remove underscore product.
If that button button has been clicked, then we need to remove the product from position.
So how can we remove a product from recession?
It's actually very simple.
We need to use the on set function and then we need to pass the session.
Session.
Guard.
However, we need to remove only one element.
Which element?
We need to remove the element we need to remove.
Remove the product that has this item.
So we need to get the product ID first, product ID.
So how can we get the product ID to get the product ID?
We can't use the first and then product underscore ID.
Remember the product ID here.
Here we have in this input, we have name called Project Ready.
We have this input that has a name called Project 80.
So we can use it here.
And then finally we can say session onset, session card, and then we need to passenger the product.
This is going to remove that product from the card.
That's it.
Very, very simple.
And let me now save and refresh.
So pretty fresh artists.
I'm going to hear Irish alchemy remove a product from the art.
So for example, if you click on remove of the second product, if you click on remove, it did not
work.
And the reason is because here in my code, I have actually a problem.
I need to make sure that they have the product.
Maybe so I forgot here to specify the product.
Maybe.
So we have two options.
We can here say product ID is equal is equal to lost product 80.
Project underscore it, or we can pass the product deposit product directly into the into the second
square bracket.
But let me keep it like this.
Let me now save and let's this certainly me refresh, giving me save and refresh.
Now it should work.
Maybe refresh.
And now let me click on remove.
So if I click on Remove.
It will not work either.
Why?
Because the product now doesn't have an I.D., so we need to close down the browser and up in a fresh
browser.
So as you can see, this thing takes a lot of time, but it's worth it.
Let me try one more time.
So I'm going to go through the garbage.
Now, let me try to remove this product.
For example, if you click on remove, as you can see, the product has been removed from the cart.
So the product was removed from the cart completely.
And now we don't have anything in the cart.
And let me go back and let's test this let's test this on other products.
So let me let me add another product, for example, of this.
I'm going to click on Buy now.
And if you click on Add to Cart, it will be added to the cart.
And let me add another product because we want to see what's going to happen if I delete only one product.
So if you read, for example, of this product, the second product, as you can see, one product will
be removed and the other will remain.
And if you remove the last product here, it's going to be 150 will remain.
And this is a problem which we need to fix.
And the reason why we have this is because the code here is hardcoded.
So we need to make this dynamic and it will fix this problem.