Adding Delete Button to Mini Cart

I am attempting to add a delete btn to the mini cart module. And for the life of me I cannot get it to call the post back function. I am using a LinkButton to do this.

//This is my button on the .ascx file

<asp:LinkButton runat="server" ID="btnProductDelete" CssClass="buttons btn_style3 left shopping-cart-delete">
    <div>
        <span><asp:Literal runat="server">&nbsp;X&nbsp;</asp:Literal></span>
    </div>
</asp:LinkButton>

//On the .cs file inside the lvCart_ItemDataBound function I added this:

var btnProductDelete = dataItem.FindControl("btnProductDelete") as LinkButton;
if (btnProductDelete != null)
{
    btnProductDelete.Command += new CommandEventHandler (lvCart_ItemDeleteCommand);
}

//Then I added the call back function named lvCart_ItemDeleteCommand

protected void lvCart_ItemDeleteCommand(object sender, CommandEventArgs e)
{
    this.DisplayAlertMessage(GetLocaleResourceString("Products.ProductHasBeenAddedToTheCart"));     
}

I added the alert message to validate that it is in fact working. But I cannot get this function to be called. I have tried dozens of different things. If there is anyone that can give me some direction as to getting my button to delete an item from the mini cart I would be very greatful. Or this function to get called with any of the items in the cart.

Thanks,
Brennan

The following is for version 1.90 and the changes from your code are underlined.

In Modules\MiniShoppingCartBox.ascx, enable viewstate for the ListView (lvCart):

<asp:ListView ID="lvCart" runat="server" OnItemDataBound="lvCart_ItemDataBound" EnableViewState="true">

and add OnCommand="lvCart_ItemDeleteCommand" to the Link Button:

<asp:LinkButton runat="server" ID="btnProductDelete" OnCommand="lvCart_ItemDeleteCommand" 
     CssClass="buttons btn_style3 left shopping-cart-delete">
    <div>
        <span>
            <asp:Literal ID="Literal1" runat="server">&nbsp;X&nbsp;</asp:Literal></span>
    </div>
</asp:LinkButton>

In Modules\MiniShoppingCartBox.ascx.cs, set the CommandArgument for the link button in lvCart_ItemDataBound:

var btnProductDelete = dataItem.FindControl("btnProductDelete") as LinkButton;
if (btnProductDelete != null)
{
    //btnProductDelete.Command += new CommandEventHandler(lvCart_ItemDeleteCommand);
    btnProductDelete.CommandArgument = sci.ShoppingCartItemId.ToString();
}

Updated method lvCart_ItemDeleteCommand:

protected void lvCart_ItemDeleteCommand(object sender, CommandEventArgs e)
{
    int commandShoppingCartItemId;
    if (int.TryParse(e.CommandArgument.ToString(), out commandShoppingCartItemId))
    {
        this.ShoppingCartService.DeleteShoppingCartItem(commandShoppingCartItemId, true);
    }

    this.DisplayAlertMessage(GetLocaleResourceString("Products.ProductHasBeenAddedToTheCart"));
}

You may want to change the alert message to indicate that the item was removed from the cart instead of added to it.

---

If anyone else implement this functionality, ensure the setting Display.ItemsInMiniShoppingCart is set to true in Administration > Configuration > All Settings > (on page 4) and you will need to recompile the NopCommerceStore project (using source version of nopCommerce).

.

Bam! Worked perfect. Thank you much sir. I sure do appreciate it. It looks like all I was missing from updated tries and what you had was the EnableViewState="true", silly how one little thing can make or break it.

Thanks again.

I found a bug in this implementation. If you delete the item from the mini-cart and and you have the OrderSummary page open, the item does not get removed.
To resolve that I pushing a redirect to the orderSummary

      protected void lvCart_ItemDeleteCommand(object sender, CommandEventArgs e)
        {
            int commandShoppingCartItemId;
            if (int.TryParse(e.CommandArgument.ToString(), out commandShoppingCartItemId))
            {
                this.ShoppingCartService.DeleteShoppingCartItem(commandShoppingCartItemId, true);
            }

            Response.Redirect(SEOHelper.GetShoppingCartUrl());
            //this.DisplayAlertMessage(GetLocaleResourceString("Products.ProductHasBeenDeletedToTheCart"));
        }

Not the best solution I guess but it avoid user confusing. If you have a better solution please share :)

Joel.

Hi,

does anyone know how to make this work in 3.4?

ssc wrote:

Try almost same thing like this

Instead of td just add following

@if (Model.IsEditable)
 {
    <td>                              
    <input class="remove-item-cart-btn" type="button" value="Remove" data-itemid="@item.Id"/>
    </td>
 }

use following

 
<div class="remove">
       <a href="/ShoppingCart/RemoveShippingCartItem" data-itemid="@item.Id">Remove</a>
</div>

And instead of

 $this.parent('.cart-item-row').hide()

use following line

$this.parent('div.item').hide()

Hi,

thanks for your help. Here is my finalized version:



In ShoppingCartController:

        [HttpPost]
        public ActionResult RemoveProductFromCart_Catalog(int id)
        {
            var shoppingCartItem = _workContext.CurrentCustomer.ShoppingCartItems
                  .Where(sci => sci.ShoppingCartType == ShoppingCartType.ShoppingCart && sci.Id == id)
                  .LimitPerStore(_storeContext.CurrentStore.Id).FirstOrDefault();
            _shoppingCartService.DeleteShoppingCartItem(shoppingCartItem, ensureOnlyActiveCheckoutAttributes: true);

            //display notification message and update appropriate blocks
            var updatetopcartsectionhtml = string.Format(_localizationService.GetResource("ShoppingCart.HeaderQuantity"),
                 _workContext.CurrentCustomer.ShoppingCartItems
                 .Where(sci => sci.ShoppingCartType == ShoppingCartType.ShoppingCart)
                 .LimitPerStore(_storeContext.CurrentStore.Id)
                 .ToList()
                 .GetTotalProducts());
            var updateflyoutcartsectionhtml = _shoppingCartSettings.MiniShoppingCartEnabled
                ? this.RenderPartialViewToString("FlyoutShoppingCart", PrepareMiniShoppingCartModel())
                : "";

            return Json(new
            {
                success = true,
                message = string.Format(_localizationService.GetResource("Products.ProductHasBeenAddedToTheCart.Link"), Url.RouteUrl("ShoppingCart")),
                updatetopcartsectionhtml = updatetopcartsectionhtml,
                updateflyoutcartsectionhtml = updateflyoutcartsectionhtml
            });
        }

In FlyoutShoppingCart:

                    <div data-itemid="@item.Id" class="item @(i == 0 ? "first" : null) row"> 



                      <div class="remove">
                          <input class="remove-item-cart-btn" type="button" value="Remove" data-itemid="@item.Id" />
                      </div>

In Header.cshtml:

<script type="text/javascript">
    $(document).ready(function ()
    {
        $("#flyout-cart-parent").on("click", '.remove-item-cart-btn', function ()
        {
            alert("test");
            var $this = $(this);
            $.ajax(
            {
                url: "@Url.Action("RemoveProductFromCart_Catalog", "ShoppingCart")",
                type: 'POST',
                data:
                {
                    id: $this.data('itemid')
                },
                success: function (data, textStatus, jqXHR)
                {
                    $("#flyout-cart").replaceWith(data.updateflyoutcartsectionhtml);
                    jQuery.each($(".cart-qty"), function (i, val) {
                        $(val).text(data.updatetopcartsectionhtml);
                    });
                }
            });
        });
    });
</script>

In HeaderLinks.cshtml:

Here I just added the ID to this line.

<li id="flyout-cart-parent">@Html.Action("FlyoutShoppingCart", "ShoppingCart")</li>

Does anyone know how to do this in version 3.90?

Thanks

delete from original post. please pm me.