Delete from Store Cart

Question

First time using store and have hit my first "WTF" moment.

Add items to cart - DONE :)

Checkout Page - Displaying items in cart, cost and tax etc. :)

Delete Items in Cart - Using the documented method - remove_items input field. I cannot remove individual items from cart.

<input type="checkbox" name="remove_items[{key}]" value="1" /> Remove {title}

I have this inside the {items} loop. Then before {/exp:store:checkout} I have:

<input type="submit" name="update_cart" value="Update Totals" class="btn" />
<input type="submit" name="empty_cart" value="Empty Cart" class="btn btn-danger" />
<input type="submit" name="next" value="Continue to Billing Details" class="btn btn-primary" />

Update Totals - DOES NOT WORK. Page refreshes but nothing changes

Empty Cart - DOES WORK!!

Before I go and dig further, can anyone who has successfully used a checkbox to delete items from an Expresso Store project confirm the code they used or point me in the right direction.

EE 2.7.2 + Store 2.0.3

Answer 1

This has been fixed in Store 2.0.5.

If you are using an earlier version and can't upgrade right now, the problem is caused because Store was ignoring the remove_items array if no items array was submitted at all.

To work around this, you should simply be able to add this line inside the {items} loop in your checkout tag.

<input type="hidden" name="items[{key}][item_qty]" value="{item_qty}" />

That means an items parameter will be submitted, and Store will know to check for remove_items as well.

Answer 2

Just to expand on Justin's comment, I had this head scratcher too (assuming you've fallen into the same trap) and made a change request to Expresso.

I had a single form with the quantity and remove buttons on. Users clicked remove, it submitted the form, but the Store code took priority of the quantity and therefore ignored the remove.

I was using the following form code (shortened for simplicity):

<input type="text" maxlength="12" name="items[{key}][item_qty]" value="{item_qty}" size="2">
<input type="submit" name="remove_items[{key}]" value="1" class="delete_item" />

And it would fail due to the reasoning above - Note this is with Store v1.6.3

So I had to set the quantity to 0 when the user clicked remove.

//###   Delete Item from Basket - Send via Ajax   ###
$("form .delete_item").click(function(e) {
    e.preventDefault();
    if (confirm("Are you sure?")) {
        $(this).parents('tr').animate({ "opacity": "hide" }, "slow")
            .find('.quantity input[type="text"]').val(0);
        AjaxSubmit($(this), true);
    }
});

Answer 3

Well, I was also looking for an answer for this particular issue. I am still fine tuning what I have but the logic is updating the quantity of the item on the checkout template to zero then update the cart totals, that will remove an item from the cart. Code looks like:

Checkout template: I added a link next to the quantity text field

<td>
     <input name="items[{key}][item_qty]" value="{item_qty}" class="input-mini item_qty" /> 
     <a href="#" class="remove-product">Remove</a>
</td>

JQuery Script: This updates the quantity of that item to zero and clicks the update cart button

$('.remove-product').click(function(){
         // click handler
         $(this).prev().val('0');
         $('#update_cart').click(); 
     return false;   
    });

If someone else has a better solution, you can share for all to benefit