Home » Magento tutorials » How to Add multiple product with one add to cart button using Magento Ajax add to cart

How to Add multiple product with one add to cart button using Magento Ajax add to cart

In this blog post, i will show how to add product to shopping cart using ajax, 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.
Attached is the source code for this blog’s module.
Module also tested on latest 1.7.0.2
Download this for magento 1.6+ version

Ok lets start step by step.

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) jQuery Folder Structure. Write this code inside noconflict.js file

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

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.

Step 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

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.

magento ajax

Project Page Ajax Loading

magento ajax cart

Firebug View of Ajax Request

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.

ajax magentoajax magento cart

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

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.

Bug Reported
1. The cart side bar that shows up, after adding product using ajax. The ‘x’ or remove button doesn’t work. [This bug has been fixed and module files have been updated.] The above code has been tested for all product types in Magneto 1.6 version

About Manish Prakash

avatar
Co-Founder of Exellence Technologies and Project Manager for All Magento Projects. Having 5 years 7 months of experience in Webdevelopment

2 comments

  1. avatar

    Hi , How to create or add mini cart or add shopping cart into header by ajax and style mouse over show detail for add in cart and show button checkout and have icon remove order
    Note : i looking in this site : http://excellencetechnologies.co.in/Telephonia/blog/magento-add-product-to-cart-ajax/ but He ‘s introduce Ajax Add To Cart Module Source 1.6+ Only to in http://jquery.com/download/ but it’s too many file , i don’t know what is file to download it? please teach me. Please teach me. please Thank you very much.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top