I have been trying add products to cart via ajax call by following the procedure given in http://excellencemagentoblog.com/magento-add-product-to-cart-ajax and I have successfully added products to add too. But my problem is, while returning from ajax call, I'm trying to return updated cart count and mini cart html. But this is not working properly.
Following is my controller action
public function addAction(){
$cart = $this->_getCart();
$params = $this->getRequest()->getParams();
if($params['isAjax'] == 1){
$response = array();
try {
if (isset($params['qty'])) {
$filter = new Zend_Filter_LocalizedToNormalized(
array('locale' => Mage::app()->getLocale()->getLocaleCode())
);
$params['qty'] = $filter->filter($params['qty']);
}
$product = $this->_initProduct();
$related = $this->getRequest()->getParam('related_product');
/**
* Check product availability
*/
if (!$product) {
$response['status'] = 'ERROR';
$response['message'] = $this->__('Unable to find Product ID');
}
$cart->addProduct($product, $params);
if (!empty($related)) {
$cart->addProductsByIds(explode(',', $related));
}
$cart->save();
Mage::getSingleton('checkout/session')->setCartWasUpdated(true);
/**
* @todo remove wishlist observer processAddToCart
*/
Mage::dispatchEvent('checkout_cart_add_product_complete',
array('product' => $product, 'request' => $this->getRequest(), 'response' => $this->getResponse())
);
if (!$this->_getSession()->getNoCartRedirect(true)) {
if (!$cart->getQuote()->getHasError()){
$message = $this->__('%s was added to your shopping cart.', Mage::helper('core')->htmlEscape($product->getName()));
$response['status'] = 'SUCCESS';
$response['message'] = $message;
$this->loadLayout();
$toplink = Mage::helper('checkout/cart')->getSummaryCount();
$sidebar = $this->getLayout()->getBlock('minicart_content')->toHtml();
$response['count'] = $toplink;
$response['cartitems'] = $sidebar;
}
}
} catch (Mage_Core_Exception $e) {
$msg = "";
if ($this->_getSession()->getUseNotice(true)) {
$msg = $e->getMessage();
} else {
$messages = array_unique(explode("\n", $e->getMessage()));
foreach ($messages as $message) {
$msg .= $message.'<br/>';
}
}
$response['status'] = 'ERROR';
$response['message'] = $msg;
} catch (Exception $e) {
$response['status'] = 'ERROR';
$response['message'] = $this->__('Cannot add the item to shopping cart.');
Mage::logException($e);
}
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
return;
}else{
return parent::addAction();
}
}
Please help
Best Answer
This is easily done, but the javascript functions that trigger the minicart show/hide will "break", since you are reloading content into the DOM, which was instantiated at page load or document ready.
I'll show you how to achieve the result first, then we'll tackle the javascript issue.
Answering The Question
The block you want is called
minicart_head
, so your layout code in the controlleraddAction
should be as follows:You can use the
minicart
data to replace the DOM object from your javascript function.If you observe the DOM, using Web Inspector, for example, you will see that the content updates now via AJAX, but your show/hide feature will no longer work, since the javascript that acts on the
#header-cart
link has not been triggered for the new content.Javascript Issue
By using jQuery's
.on()
, the theme developers at magento are on the right track (although they use a convoluted procedure to update the cart via AJAX).In order for the show/hide feature to work, you need to use
.on()
delegation, or bubbling. Inapp.js
, find the following:File: app/skin/frontend/rwd/default/js/app.js
And replace it as follows:
And there you have it. Now your content reloads via AJAX, and the links still work after the cart changes.