change checkbox for remove button in Cart page NopCommerce ver 3.20

Hi:
I have been following these reference topics.
https://www.nopcommerce.com/boards/t/8709/how-to-add-a-remove-button-on-shopping-cart-page.aspx
and...
https://www.nopcommerce.com/boards/t/11938/modifying-cart-item-remove-functionality.aspx?p=2

but haven't found a clear definition or implementation of this, for my Nop Commerce 3.20. project.
In nop.web\themes\healthy\views\shoppingcart\ordersummary.cshtml, i changed this line of code:

<input type="checkbox" name="removefromcart" value="@(item.Id)" />

with..

<input type="submit" name="removefromcart@(item.Id)" value="@T("ShoppingCart.Remove")" id="removefromcart@(item.Id)" class="removefromcartbutton" />

but the functionality isn't responding
What do am I missing here??

any help will be highly appreciated
Thank you

Hi,
To implement separate remove button on Cart page you can convert check box to button as below without touching controller code:

<input type="submit" name="removefromcart-@(item.Id)" value="@T("ShoppingCart.Remove")" />

Thank you so much Dilav, you were absolutely correct, it's working fine now

Has this changed for Version 3.40? I can't seem to get it to work, do I need to change anything else?

Thanks.

jono10 wrote:

It's not supported in Nop 3.40 beacuase Nop team has removed one method called "RemoveCartItem" from ShoppingCartController.

Hi,

I implemented another way for this issue.
Please have a look my solution:

1) Copy and paste the "OrderSummary.cshtml" file to the "Themes/DefaultClean/Views/ShoppingCart" folder

2) Open this copied file, and then find following block of code

<td class="remove-from-cart">
                                <span class="td-title">@T("ShoppingCart.Remove"):</span>
                                <input type="checkbox" name="removefromcart" value="@(item.Id)" />
                            </td>

replace with following code

<td class="remove-from-cart">
                                <span class="td-title">@T("ShoppingCart.Remove"):</span>
                                <input type="checkbox" id="[email protected]" name="removefromcart" value="@(item.Id)" />
                                <span data-checkbox-id="[email protected]" class="remove-from-cart-item-action ico ico-delete"></span>
                            </td>

3) And then, add following javascript block at the bottom of this file

<script type="text/javascript">
    $(document).ready(function () {
        var container = '.order-summary-content';
        $('.remove-from-cart span.remove-from-cart-item-action', container).on('click', function () {
            $('#' + $(this).data('checkbox-id'), container).prop('checked', true);
            $('.update-cart-button', container).click();
        });
    });
</script>

4) Finally, add following line of codes to the "styles.css" file (inside the "Themes/DefaultClean/Content" folder)

/* Custom remove icon button for each item in the shopping-cart */
.order-summary-content .remove-from-cart > input[type='checkbox'] {
    display: none;
}
.order-summary-content .ico {
    display: inline-block;
    height: 16px;
    width: 16px;
}
.order-summary-content .remove-from-cart > .ico-delete {
    background: url(images/ico-delete.gif) center center no-repeat;
}

Hope this help :)

how could I add this remove button beside of every "add to cart" button. I can add the button in ProductBox.cshtml page, but can not do the backend operation.

ima9ines wrote:

Thanks but one thing, cursor:pointer;

<div class="remove-from-cart">
                              
                                <input type="submit" id="[email protected]" name="removefromcart" value="@("Remove")" />
                              
                            </div>
I have added this in productbox.cshtml page. By clicking this I want to delete that item from shopping cart if that item exists in shopping cart. How could I do this.

ima9ines wrote:

I tried to do it as follow but it didnt work. any help on this?
<td class="remove-from-cart">
                                                <a data-checkbox-id="[email protected]" class="remove-from-cart-item-action" onclick="$('#' + $(this).data('checkbox-id'), container).prop('checked', true); $('.update-cart-button', container).click()" value="@(item.Id)"><i class="fa fa-trash-o fa-2x"></i></a>
                                            </td>