How to Add Magento JQuery/Ajax Add-To-Cart

December 26, 2009
Filed under: Featured, JavaScript, JQuery, Magento Cart 

So, Ajax being the thing and all, I was hunting for a way to add an item to the cart using an Ajax call in Magento.  Recently, I noticed there was a module that apparently does this, but either I hadn’t seen that or it didn’t exist yet when I wrote this, so I hacked my way through it.

PHP isn’t my primary language – I come from the ASP, ASP.Net, C# world, but Magento was compelling enough that I’ve taken the leap.  I’m sure there are lots of things I could be doing better/differently here so if you’ve got some suggestions, I’m all ears!

Add to Cart Page

So first I needed an “Add to Cart” page (called – addToCart.php) that could be called from the client.  This page returns a result in JSON format.  The actual page also returns related items so we can try to cross sell the user, but I’ve removed that in this sample to make it simpler.


include_once '../app/Mage.php';


// usage /scripts/addToCart.php?product_id=838&amp;amp;amp;amp;amp;amp;amp;amp;amp;qty=1
// product_id OR sku is required

// get query string
if (!isset($_GET['sku'])) { $sku = ''; } else { $sku = $_GET['sku']; }
if (!isset($_GET['product_id'])) { $product_id = ''; } else { $product_id = $_GET['product_id']; }
if (!isset($_GET['qty'])) { $qty = '1'; } else { $qty = $_GET['qty']; }

if ($sku != ""){
$product_id = Mage::getModel('catalog/product')->getIdBySku("$sku");
if ($product_id == '') {
$session->addError("Product Not Added
The SKU you entered ($sku) was not found.");

$request = Mage::app()->getRequest();

$product = Mage::getModel('catalog/product')->load($product_id);

$session = Mage::getSingleton('core/session', array('name'=>'frontend'));
$cart = Mage::helper('checkout/cart')->getCart();

$cart->addProduct($product, $qty);



$result = "{'result':'success'}";

echo $result;

} catch (Exception $e) {
$result = "{'result':'error'";
$result .= ", 'message': '".$e->getMessage()."'}";
echo $result;

Buy Now Button

Then I need a “Buy Now” button that doesn’t do a post to the server that I can attach my jQuery code to.  I’ve added the sku as an attribute to the anchor because I have this in a page that has more than one product on the page and I need to know which product has been selected.

<a href="#" sku="<?php echo $this->__($product->sku) ?>"><img src="/media/upload/image/product-details/buy-now.jpg" border=0 alt="<?php echo $this->__('Buy Now') ?>"></a>

Client Script

Finally, I need the client script that gets attached to the button and calls the server “addToCart.php” page.

/* Cart */
jQuery(document).ready(function($) {
$.ui.dialog.defaults.bgiframe = true;

var buyNow = $(e.currentTarget);
var listingItem = $(buyNow).closest(".listing-item");
var colorSelector = $("#colorSelector", listingItem);
var product_id = colorSelector.val();

if (product_id == ""){
showDialog("Please select a color.", "Missing Information");
return false;

var stockStatus = $("option:selected", colorSelector).attr("stockstatus");
if (stockStatus == "out of stock"){
showDialog("Sorry, that colour is currently unavailable.", "Out of Stock")
return false;

var qty = $("#quantity", listingItem).val();

if (qty == ""){
qty = "1";

var obj = this;

var params = "product_id=" + product_id + "&amp;amp;amp;amp;amp;qty=" + qty;

var result = $.getJSON("/scripts/addToCart.php", params, function(data, textStatus){

if (textStatus == "error"){
showDialog("There was an error adding this item to your cart.  Please call customer service for assistance.", "Error");

if (data.result == "error"){
showDialog("Sorry, an error occurred while adding the item to your cart.  The error was: '" + data.message + "'");

} // end add to cart

function showDialog(msg, title){
$("#dialog").dialog( 'destroy' );

buttons: {
"Ok": function() {
// , closeOnEscape: true
// , show: 'slide'

$('#dialog').dialog('option', 'title', title);

Few things probably need some explanation:
1. I’ve attached the function to ALL add to cart buttons using the “add-to-cart” class.  (There are multiple products on the page.)
2. Each product has a color selector that has the product_id as the value in the drop down.  There’s also an additional attribute called “stockstatus” that will let me know if the color is out of stock.  My customer didn’t want to hide the out of stock colors, but I obviously can’t let anyone order them.
3. I put a little animated gif (the “ajax loader”) on the page and that gets displayed when the ajax call is being made.
4. If there is an error, I display it using the jQuery UI library and a little showdialog helper function.
5. There’s a feedback panel that shows related items, but I’ve removed that in this code just to make it easier to follow.
So there it is.  Hope this helps someone.  And if there are better ways to do this, I’d love to hear them!
[Update:  I removed the reference to common.php in the code above because it’s not needed.  It had some common user functions in it that aren’t necessary for this sample]


18 Comments on How to Add Magento JQuery/Ajax Add-To-Cart

  1. Johan Jacobs on Thu, 26th Aug 2010 4:35 am
  2. Thank you, very usefull :)

  3. Rhonda Morin on Tue, 31st Aug 2010 4:01 pm
  4. HI,

    I have been looking for this very thing. I don’t know coding, I don’t know what all that stuff means but can you either install this for me or help me so that I can add products from my magento store at to my static html pages at

    Please email me.

    Rhonda Morin

  5. Steven Robert on Sat, 11th Sep 2010 11:03 pm
  6. @Rhonda , there is a feature in magento called multi websites, if you configure that you can just show what ever categories or entire website in you other site.

  7. Mike Plant on Fri, 5th Nov 2010 2:09 pm
  8. @Robin you can also simply set Shopping Cart options under System -> Configuration -> Checkout to not redirect user to the cart after adding to the cart, so the user remains on the product page.

    No coding necessary!

  9. Aniruddha Banerjee on Wed, 15th Dec 2010 5:17 am
  10. I think that the last comment is useless. I am sorry to say this, but simply disabling the configuration is not the way to add a product to cart.
    But what I found in my application that:
    You have added the product to the cart, place the order, and by any means the order has been canceled.

    If this situation occurs then your code fails, and it adds the product in sales_flat_quote and sales_flat_quote_item but that not displaying into cart page.

    I am in searching of this loop hole, and if can then I will place the update here. Meanwhile any help form others or yours is welcome.

  11. Eizil on Mon, 3rd Jan 2011 12:25 am
  12. I would like to ask, how can i process the custom options from the product using this method?

  13. Milan on Thu, 27th Jan 2011 12:24 pm
  14. I’m wondering the same thing as Eizil. Is there a way to include the options in the ajax call/php file?


  15. Eizil on Thu, 27th Jan 2011 1:08 pm
  16. @Milan , i manage to get the custom options to be sent via ajax, if you want to know about it, drop a msg using contact form on my website.

  17. Magento multi store on Fri, 15th Jul 2011 6:28 am
  18. It’s a really very informative information. It’s very useful and knowledgeable for me. I will bookmark this page and come soon to see the updates.

  19. Web Designer on Wed, 3rd Aug 2011 7:32 am
  20. It’s really fantastic read. I enjoyed the post. It’s very informative and useful to everybody..
    Thanks for sharing.

  21. Web Design Staffordshire on Wed, 31st Aug 2011 4:18 pm
  22. Thank you for this. I have been struggling to come to grips with Magneto however you have tried to outline this clearly enough. I will try and give it another go!

  23. Terry on Wed, 9th Nov 2011 6:12 pm
  24. I use GoMage ProCart. It allows shopping cart management without transferring customers to the shopping cart page and without making customers wait for reload.

    Hope this helps.

  25. Rana on Fri, 18th Nov 2011 7:05 am
  26. Thanks a lot Mike Plant.. I do found few good blogs related to magento

  27. Thales on Tue, 29th Nov 2011 10:35 pm
  28. Men, need help with product configurable, you know about this tip?
    can you explain this please?
    i can’t do it..

    you example work like a charm with simple product, but configurable, dont add to cart and i dont know get this work..


  29. jopie on Wed, 22nd Feb 2012 12:29 pm
  30. Is there anyone who’s got a demo of this?
    can somebody post a link?


  31. web dizajn on Sat, 16th Jun 2012 12:10 pm
  32. Thanks for your marvelous posting! I definitely enjoyed reading it, you may be a great author.
    I will be sure to bookmark your blog and will come
    back sometime soon. I want to encourage continue your great
    posts, have a nice evening!

  33. Enrial Team on Wed, 29th Aug 2012 4:50 am
  34. Hello!

    We’ve created AJAX Power Cart Extension by Enrial – please, take a look when you will have some time:
    Direct link to the demo:

    Best Regards,

    Enrial Team.

  35. Aamir on Mon, 17th Sep 2012 4:12 am
  36. Thx for sharing your approach! Your post helped me allot Im creating a complex product configurator within mage. At the end, I need a “add to cart” function of my created product and this snipet worked like a charm :)

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image