Remove multiple items from your cart with just one click

Question

In the Magento 2 cart when you click on the basket you can only remove one product from the cart. What I would like to do is to be able to remove multiple items from the cart at the same time as soon as I click on a single basket.

As shown in the example below, if I have two or more items in my cart, if I click on a single basket I would like more items to be removed.

I tried to do it with jquery like this but without success:

<script>
$("#shopping-cart-table .deleteItem .action-delete").on('click',function(){
                        $("#shopping-cart-table .deleteItem .action-delete").each(function(i) {
                            var btn = $(this);
                            
                            setTimeout(function() {
                                btn.trigger("click");
                            }, 100);
                            
                        });
                    });
</script>

How could I do fro remove multiple items from cart when i click only on remove button?

Answer 1

ok, it is quite complex but the structure should be:

1. you need to add a custom controller
2. you need to call this custom route and the controller will call the quote session model and browse its items and remove them if relevant. When the whole operation is complete, you may call collectTotals on the quote
3. when the controller response is successful, you will need to refresh the cart and this requires knowledge of uiComponent/customer-data and both are not trivial

One by one, all the points above do have a lot of questions/answers that you will find no doubts; you should be able to work your way through. Event the last point has some answers.. good luck

Answer 2

magento default supports this feature, it is called Clear Shopping Cart, but it is hidden by default.

For magento version >= 2.4.1, you can config it in Admin menu > Stores > Configuration > Sales > Checkout > Shopping Cart group > Enable Clear Shopping Cart field.

For magento version < 2.4.1, you have to display it by CSS:

.checkout-cart-index .form-cart .cart .action.clear {
    display: block
}