How you can add product to cart using ajax
This presentation is the property of its rightful owner.
Sponsored Links
1 / 5

How you can add product to cart using ajax in Magento PowerPoint PPT Presentation


In this PDF attacment, i am going to tell how to add products to shopping cart using ajax and jquery.Shopping cart is an essential part of any E-commerce website.In magento the add to cart process is a simple form submit process, so the page get reloaded.Therefore, Ajax based Shopping Cart comes as a solution to fasten the buying process. http://abacasys.com/magento-development.php

Download Presentation

How you can add product to cart using ajax in Magento

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


How you can add product to cart using ajax in magento

How you can add product to cart using ajax

in Magento

In this blog post, i am going to tell how to add products to shopping cart using ajax and

jquery.Shopping cart is an essential part of any E-commerce website.In magento the add to cart

process is a simple form submit process, so the page get reloaded.Therefore, Ajax based

Shopping Cart comes as a solution to fasten the buying process.

Ok let’s start step by step.

1. First add jQuery on the Product Page.

2. Then Create folder jquery in root js folder.

3. Download jQuery from http://jquery.com/download/ and then place it inside (/js/jquery)

folder.

4. Create a javascript file “noconflict.js” in the jquery folder (/js/jquery/noconflict.js).

5. Write this code inside noconflict.js file

jQuery.noConflict();

6. Open catalog.xml file in your theme folder

[app/design/frontend/base/default/layout/catalog.xml in default magento theme]

7. Inside tag <catalog_product_view> write this code

<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>

8. Open any product page in frontend in a browser, through inspector, see if these two jquery

files are included in your page.

9. Open the catalog/product/view.phtml file in your theme (rwd,base or any custom 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;}

Abacasys


How you can add product to cart using ajax in magento

if (button && button != ‘undefined’) {

button.disabled = true;

}}

}.bind(productAddToCartForm);

10. 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’);

}

url = url.replace(“checkout/cart”,”ajax/index”); // New Code

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

Abacasys


How you can add product to cart using ajax in magento

if(jQuery(‘.block-cart’)){

jQuery(‘.block-cart’).replaceWith(data.sidebar);

}

if(jQuery(‘.header .links’)){

jQuery(‘.header .links’).replaceWith(data.toplink);

}}

});

} catch (e) {

}

// End of our new ajax code

this.form.action = oldUrl;

if (e) {

throw e;

}

}

}.bind(productAddToCartForm);

11. 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>

12. 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>

13. Open your product page again and when you press the add to cart button, you should see a

loading image and ajax request being sent.

14. Create a custom module with namespace Sneh_Ajax.(Register it in app/etc/modules and

create its config.xml in app/code/local/Sneh/Ajax/etc folder).

15. In directory (app/code/local/Sneh/Ajax/controllers),create a file IndexController.php and add

a function AddAction

<?php

require_once ‘Mage/Checkout/controllers/CartController.php’;

class Sneh_Ajax_IndexController extends Mage_Checkout_CartController

{

Abacasys


How you can add product to cart using ajax in magento

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

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

Abacasys


How you can add product to cart using ajax in magento

$sidebar_block = $this->getLayout()->getBlock(‘cart_sidebar’);

Mage::register(‘referrer_url’, $this->_getRefererUrl());

$sidebar = $sidebar_block->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;}

else{

return parent::addAction();

}}}

16. Save the file and go back to the product page.

17. Now add to cart using ajax should be working properly.

18. After clicking add to cart, you can see an alert box with success message.

Abacasys


  • Login