0092 - 313-4567341
 info@magentogems.com

Add-to-cart using ajax

  Zahid Mughal   Oct 12, 2014   Blog   0 Comment

I will teach you to add the product in shopping cart when you will click on the Add-to-Cart button without refresh the page and this is very fast method and user like this functionality overall.

1) Include jQuery on Product Page
First download <a href=”http://docs.jquery.com/Downloading_jQuery”>jQuery</a> and then place it inside /js/jquery folder, so path would be /js/jquery/jquery.js. Next create a javascript file called noconflict.js in the jquery folder (/js/jquery/noconflict.js) . Write this code inside noconflict.js file
i) jQuery.noConflict();

Next open that catalog.xml layout file in your theme folder [app/design/frontend/base/default/layout/catalog.xml in default magento theme] and place this code inside tag <catalog_product_view>;

<reference name=”head”>
<action method=”addItem”><type>js</type><name>jquery/jquery-1.6.4.min.js</name></action>
<action method=”addItem”><type>js</type><name>jquery/noconflict.js</name></action>
</reference>

Now open any product page in your magento, and through firebug or chrome inspector, see if these two jquery files are included in your page.

2) Product Page
Next we need to make changes in product page, so that instead of form submit an ajax request is fired. To do this open the catalog/product/view.phtml file in your theme in default magento theme, the path is app\design\frontend\base\default\template\catalog\product\view.phtml
In this file you will find the javascript code as:

productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;

if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}

if (button && button != ‘undefined’) {
button.disabled = true;
}
}
}.bind(productAddToCartForm);

change this code to

productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;

if (url) {
form.action = url;
}
var e = null;
//Start of our new ajax code
if(!url){
url = jQuery(‘#product_addtocart_form’).attr(‘action’);
}
var data = jQuery(‘#product_addtocart_form’).serialize();
data += ‘&isAjax=1’;
jQuery(‘#ajax_loader’).show();
try {
jQuery.ajax({
url: url,
dataType: ‘json’,
type : ‘post’,
data: data,
success: function(data){
jQuery(‘#ajax_loader’).hide();
alert(data.status + “: ” + data.message);
}
});
} catch (e) {
}
//End of our new ajax code
this.form.action = oldUrl;
if (e) {
throw e;
}
}
}.bind(productAddToCartForm);

Next to do a little bit of styling go to phtml file catalog/product/view/addtocart.phtml
and then find this code there:

<button type=”button” title=”<?php echo $buttonTitle ?>” class=”button btn-cart” onclick=”productAddToCartForm.submit(this)”><span><span><?php echo $buttonTitle ?></span></span></button>

change this to

<button type=”button” title=”<?php echo $buttonTitle ?>” class=”button btn-cart” onclick=”productAddToCartForm.submit(this)”><span><span><?php echo $buttonTitle ?></span></span></button>
<span id=’ajax_loader’ style=’display:none’><img src='<?php echo $this->getSkinUrl(‘images/opc-ajax-loader.gif’)?>’/></span>

Now open your product page again and when you press the add to cart button, you should see a loading image + ajax request being sent.

3) Add to cart Controller
Next, we need to change the code at CartController.php in the addAction. Right now, we will directly change the core file, but later will show you how do this using magento best practices.
Open the class Mage_Checkout_CartController located at app\code\core\Mage\Checkout\controllers\CartController.php and find the addAction() function. In the addAction() you have the code,
just after this line <strong>$params = $this->getRequest()->getParams();</strong> place this code:

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();

$this->_getSession()->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;
}
}
} 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;
}
Save the file and go back to the product page. Now add to cart using ajax should be functional. After clicking add to cart, you see a alert box with success message.
For this first we need to change our javascript code we added in the view.phtml file. Change the jQuery.ajax function to

jQuery.ajax({
url: url,
dataType: ‘json’,
type : ‘post’,
data: data,
success: function(data){
jQuery(‘#ajax_loader’).hide();
//alert(data.status + “: ” + data.message);
if(jQuery(‘.block-cart’)){
jQuery(‘.block-cart’).replaceWith(data.sidebar);
}
if(jQuery(‘.header .links’)){
jQuery(‘.header .links’).replaceWith(data.toplink);
}
}
});
and in our CartController.php addAction() method, put this new code instead of the old code

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();

$this->_getSession()->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;
//New Code Here
$this->loadLayout();
$toplink = $this->getLayout()->getBlock(‘top.links’)->toHtml();
$sidebar = $this->getLayout()->getBlock(‘cart_sidebar’)->toHtml();
$response[‘toplink’] = $toplink;
$response[‘sidebar’] = $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;
}
Now, when you click on AddtoCart button, instead of alert, the MyCart Box + Top Links will get updated. So now the user experience is much better.

Download Extension:

You can also Download the whole Extension/Module from here. MagentoGems-Ajax-AddToCart

For any help ask the questions, I am available for your help at:
Contact: message me at magentogems@gmail.com
ODESK: https://www.odesk.com/users/~015c6fed11a04ce067
Elance: https://www.elance.com/s/edit/zahidzoomy/

About Zahid Mughal

Founded by Zahid Mughal in Lahore, Pakistan, MagentoGems Providing Freelancing Services to Pakistan Software Houses and International Clients (USA, UK, Australia, India, Canada) in Web Design, Web Development, Mobile Applications, Search Engine Optimization (SEO), Graphic Design and Content Writing.Our core function is to meet the needs of our clients and provide them with services of the highest quality. To offer our clients the best websites in the market, we adhere to all the set W3C international standards. These standards ensure that our clients’ sites are compatible to various browsers and smart phone applications including the iPhones.

Post a Comment

Your email address will not be published. Required fields are marked *

*

Magentogems
Delta Road, Sharif Colony Gujranwala, 52250 +92-313-4567341
Read previous post:
You cannot define a correlation name ‘cat_table Magento

This is big issue when AW_BLOG extension used in Magento then such issue commonly came. We have resolved this issue...

Close