Removing Items from the cart doesn't update the ajax cart

Question

I've got a problem while deleting an item from the cart.

When I try to delete any item from the cart it is updating the normal cart page.

But the item is there in the Ajax mini-cart though the quantity of the Ajax mini-cart is decreased.

But the problem doesn't persist while I change the quantity in both the carts, and they are synced pretty well except removing item.

Please help me out. I'm using Magento version 1.9, Any help would be appreciated.

Found out : When I use location.reload(true); in my onsuccess call back the page is getting reloaded and I got the desired output. But I don't wanna reload the page (That's why we use AJAX!!!) Please help me...

Answer 1

Use this code

Create a delete action in your ajax add to cart controller.

Your Controller Action

    public function deleteAction()
    {
        if((int) $this->getRequest()->getParam('isAjax') == 1){
            $id = (int) $this->getRequest()->getParam('id');
            if ($id) {
                try {
                    $this->_getCart()->removeItem($id)->save(); 
                    $message = $this->__('Item was removed from your shopping cart.');
                    $response['status'] = 'SUCCESS';
                    $response['message'] = $message;
                    $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
                    return;

                } catch (Exception $e) {
            $response['status'] = 'ERROR';
            $response['message'] = $this->__('Cannot remove the item from shopping cart.');
            Mage::logException($e);
                }
            }
        } else {
            return parent::deleteAction();
        }
    }

Add the JS and button code in the app/design/frontend/[YOUR THEME]/[YOUR THEME]/checkout/cart/item/default.phtml

Js Function

    <script type="text/javascript">
        var deleting = 0;
        productRemoveFromCart = function(url, elem){
            deleting = deleting + 1;
            jQuery(elem).parent().parent().animate({ opacity: 0.5 }, 200, function() { });
            if (!url) {
                    //alert('Problem');
            }
            url = url.replace("checkout/cart","ajax/index");
            if(window.location.protocol == "https:") {
                url = url.replace("http:","https:");
            }
            url += '&isAjax=1';
            var data = 'isAjax=1';
            try {
                    jQuery.ajax( {
                            url : url,
                            dataType : 'json',
                            type : 'post',
                            data : data,
                            success : function(data) {
                                    deleting = deleting - 1;
                                    if(deleting<1){
                                        var pagepath = window.location.pathname;
                                        if((pagepath.indexOf("onestepcheckout")>0)||(pagepath.indexOf("checkout/cart")>0)){
                                            location.reload();
                                        }
                                    }
                            },
                            error: function (data) {
                                deleting = deleting - 1;
                            }
                            }); 
            } catch (e) {
            }
        }     
</script>

Button code

     <td class="a-center"><a href="javascript:void(0)" onclick="productRemoveFromCart('<?php echo $this->getDeleteUrl(); ?>',this);" title="<?php echo $this->__('Remove item')?>" class="btn-remove btn-remove2"><?php echo $this->__('Remove item')?></a></td>

Answer 2

You can fetch the top cart render block easily via a bit of custom code, and then simply replace it with the resulting html in your ajax call. Even if your top cart is build from another block, and not cart_sidebar, you can extrapolate the idea to your own blocks.

Basically, on your ajax success result for the cart delete, you initiate a second ajax call to go fetch the cart sidebar block, and re-render it, and then replace the html with that result.

your issue is simply that the topcart html is not replaced after the initial ajax call. you need to do that yourself.

Create your own cartController that extends the core cart controller:

Place into this the following method:

/**
 * Render the cart display skippping cache (top cart slider on all pages)
 */
public function getTopCartAction()
{
    $this->loadLayout();
    $layout = Mage::getSingleton('core/layout');
    $block = $layout->getBlock('cart_sidebar');
    if (is_object($block)) {
        $html = $block->toHtml();
        $this->getResponse()->setHeader(
            'Content-type',
            'application/json'
        )->setBody($this->_success($html));
    }
     return $this;
}

_success method simply looks like this: (for completeness)

/**
 * Success wrappper
 *
 * @var String
 *
 * @return string
 */
 protected function _success($content)
 {
     return Zend_Json::encode(
         array(
             "error" => false,
             "content" => $content
         )
     );
 }