How to add Product to Shopping Cart using Ajax in magento

In this blog post, we will show how to add product to shopping cart using ajax in magento, we will use jQuery library for ajax operations.

By default, in magento the add to cart process is a simple form submit, so the page get reloaded. It would be much faster if we didn’t have to reload the entire page.

Step1: Include jQuery on Product Page

First download jQuery 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.

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>

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.

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

change this code to

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

change this to

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.

Step3: 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 place this code

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.

Step4: Update the My Cart Box + Top Links

Now, our ajax add to cart is working. But for the frontend user, the process is not very smooth. He just see a loading image and then an alert box. A better UI, would be if we are able to update the My Cart Box shown on right + the My Cart link shown at header. So lets see how to do that.

For this first we need to change our javascript code we added in the view.phtml file. Change the jQuery.ajax function to

and in our CartController.php addAction() method, put this new code instead of the old code

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.

Proper Way to do Step3

Now going back to step3, as per magento best practices we should not change any core files. So, what we will do is, create a new module called Excellence_Ajax using module creator and then in the IndexController.php add an action addAction() and extend of controller with Mage_Checkout_CartController. So our class declaration becomes

Now we will change our javascript code at view.phtml so, that our new controller is called instead of magento’s default cart controller. So there is the new javascript code.

So we are just replacing checkout/cart with our controller path.
Next in the addAction we will write the exact same code, except in the else condition we will call the parent::addAction() function.