How to implement 'remove' buttons to each shopping cart row in v3.40

I'm hoping to add a 'remove' button to each row of the shopping cart page to make it easier for the user to edit their cart. I've tried the solution provided in this post - https://www.nopcommerce.com/boards/t/28190/change-checkbox-for-remove-button-in-cart-page-nopcommerce-ver-320.aspx - and it says to add the following to the cart page:

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

...but it doesn't seem to work for V3.40. Does anybody know how to implement this in V3.40?

jono10 wrote:

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 :)

Thanks for the reply, however I found another solution where I copied the RemoveCartItem method from the ShoppingCartController in V3.20, and pasted it into the ShoppingCartController for v3.40. And now I can use this button:
<input type="submit" name="removefromcart-@(item.Id)" value="@T("ShoppingCart.Remove")" />

Great job ima9ines, I appreciate this solution, that worked for me in 3.60

You can try my plugin for this: https://www.nopcommerce.com/p/1706/shoppingcart-remove-button-free-ima9inescom.aspx

Hope this help :)

When removing an item, does it just automatically remove the item or will it ask for confirmation?

Good question :)
I will add this feature to my plugin. Thanks.

More than welcome. And thanks to you also, great little addition to nop... they should consider adding this to the core coding.