Narayan Narayan - 7 months ago 39
Javascript Question

Magento Ajax cart On delete redirect to Delete page

When I want to delete more than 1 product one by one from AJAX Cart , for 1st product its working fine but when I try to delete the another product the page it redirect to delete page URL like

(SiteURL/checkout/cart/delete/id/012/uenc/aHR0cDovLzEyMi)


and showing some json or html data like
{"message":"Item was removed.","update_blocks":[{"key":".header .links","value":"<div class=\"links\"> ....


Delete Item From Shopping cart function deleteAction()

public function deleteAction() {
$id = (int) $this->getRequest()->getParam('id');
if ($id) {
try {
$this->_getCart()->removeItem($id)
->save();
} catch (Exception $e) {
$_response = Mage::getModel('ajaxcart/response');
$_response->setError(true);
$_response->setMessage($this->__('Cannot remove the item.'));
$_response->send();
Mage::logException($e);
}
}
$_response = Mage::getModel('ajaxcart/response');
$_response->setMessage($this->__('Item was removed.'));
//append updated blocks
$this->getLayout()->getUpdate()->addHandle('ajaxcart');
$this->loadLayout();
$_response->addUpdatedBlocks($_response);
$_response->send();
}


I will highly appreciate if i can get some help. Thanks in advance.

Answer

I got a solution, its related to a Javascript binding problem. The problem is, when you delete a product from the cart all the cart block gets updated. Hence it removes the already bound javascript.

I have added the javascript bind code at the end of updateBlocks function in ajaxcart.js.

So, whenever user tries to delete a item from the cart ajax code gets executed and the response update_blocks will once again gets bind to the cart even after the initial javascript binding.

Added Javascript bind code is

$$('a[href*="/checkout/cart/delete/"]').each(function (e) {    
            $(e).observe('click', function (event) {    
                setLocation($(e).readAttribute('href'));    
                Event.stop(event);    
            });    
        });

And after adding code to ajaxcart.js updateBlocks function look like ,

updateBlocks: function (blocks) {    
        var _this = this;
        if (blocks) {    
            try {    
                blocks.each(function (block) {    
                    if (block.key) {    
                        var dom_selector = block.key;    
                        if ($$(dom_selector)) {    
                            jQuery(block.key, parent.document).each(function (e) {    
                                jQuery(this).html(block.value);    
                            });    
                        }    
                    }    
                });    
                _this.bindEvents();    
                _this.bindNewEvents();    
                // show details tooltip    
                truncateOptions();    
            } catch (e) {    
                console.log(e);    
            }    
        }    
        $$('a[href*="/checkout/cart/delete/"]').each(function (e) {    
            $(e).observe('click', function (event) {    
                setLocation($(e).readAttribute('href'));    
                Event.stop(event);    
            });    
        });    
    }