Reload mini-basket after item delete

Question

I am trying to reload the topCart after an item has been deleted in order to list the remaining contents of the cart.

When removing an item from the mini basket no further data is requested so if there's have 5 different items you can only remove 3 of them before having to reload the entire page to gain access to the final 2

I have tried to use jQuery for this but haven't had any luck with it

In my removeItem function which gets the response from the server:

removeItem: function(el) {
    var cart = this;
    cart.hideMessage();
    cart.showOverlay();
    $j.ajax({
        type: 'POST',
        dataType: 'json',
        data: {form_key: cart.formKey},
        url: el.attr('href')
    }).done(function(result) {
        cart.hideOverlay();
        if (result.success) {
            cart.updateCartQty(result.qty);
            cart.updateContentOnRemove(result, el.closest('#minicart_content'));
        } else {
            cart.showMessage(result, el.closest('#minicart_content').attr('id'));
        }
    }).error(function() {
        cart.hideOverlay();
        cart.showError(cart.defaultErrorMessage);
    });
},

When the remove link is pressed I would like to reload the miniCart so that the next item is included in the list.

Can anyone suggest a better approach?

All items are being removed using getAjaxDeleteUrl from Checkout/Block/Cart/Item/Renderer.php

public function getAjaxDeleteUrl()
{
    return $this->getUrl(
        'checkout/cart/ajaxDelete',
        array(
            'id'=>$this->getItem()->getId(),
            Mage_Core_Controller_Front_Action::PARAM_NAME_URL_ENCODED => $this->helper('core/url')->getEncodedUrl(),
            '_secure' => $this->_getApp()->getStore()->isCurrentlySecure(),
        )
    );
}

And here's my ajaxDeleteAction inside my CartController.php

public function ajaxDeleteAction()
{
    if (!$this->_validateFormKey()) {
        Mage::throwException('Invalid form key');
    }
    $id = (int) $this->getRequest()->getParam('id');
    $result = array();
    if ($id) {
        try {
            $cart = $this->_getCart();
            $cart->removeItem($id)->save();

            $result['qty'] = $this->_getCart()->getSummaryQty();
            $result['subtotal'] = Mage::helper('checkout')->formatPrice($this->_getCart()->getQuote()->getSubtotal());

            $result['success'] = 1;
            $result['message'] = $this->__('Item was removed successfully.');
        } catch (Exception $e) {
            $result['success'] = 0;
            $result['error'] = $this->__('Can not remove the item.');
        }
    }

    $this->getResponse()->setHeader('Content-type', 'application/json');
    $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
}

What I need to do is refresh the mini cart to load the other products that wer not visible in the cart.

Please help, headbanging on desk!

Answer 1

This is my quick and dirty solution.
Always list in the minicart all the products in the cart, but for all the items after the first 3 just make them hidden. (display:none).
When deleting an item in the cart, remove the item from DOM and check if there is an other item hidden. If it is, then show that item.
This way you don't need to get the html from the server.

Answer 2

In your controller where you process the ajaxRequest load the layout BEFORE you delete the product from your list. Then, send that layout to your controller. In that way you should still see the last product that is was just deleted.

Or, save the productID from your deletion and simply reinsert that product again after your ajax request using jquery and php.