jQuery, Magento and Ajax Add to Cart Redux

October 15th, 2009

My previous post on adding to the cart with ajax in Magento has generated enough interest – and pointed out enough flaws in my overly complex code – that I’ve decided to put together a simplified version, so here goes:

ajaxAddToCart.zip

Step 1: Create the server side script.
My sample script is called “addToCartTest.php” and I put it in a /scripts folder in the root of my Magento installation.


<?php
include_once '../app/Mage.php';
Mage::app();

try{
     // usage /scripts/addToCartTest.php?product_id=838&amp;amp;amp;qty=1
     $product_id = '';

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

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

     $session->setLastAddedProductId($product->getId());
     $session->setCartWasUpdated(true);

     $cart->save();

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

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

Step 2: Create the ‘html’ page
Obviously, you’d be putting this code into your product detail page or wherever you’re trying to add the item to the cart from.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax add to cart sample</title>
<script src="/scripts/jquery-1.3.2.min-noconflict.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
     $("#buyNowButton").click(function(){
          var qty = $("#qty").val();
          var product_id = $("#buyNowButton").attr("product_id");

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

          var result = $.getJSON("/scripts/addToCartTest.php", params, function(data, textStatus){
               if (textStatus == "error"){
                    alert("There was an error adding this item to your cart.  Please call customer service for assistance.", "Error");
                    return;
               }

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

               alert("Thanks!  The item has been added to your cart!")
          });
     });
});
</script>
</head>
<body>
     <input type="text" id="qty" value="1" />
     <a id="buyNowButton" product_id="972" href="#">Buy Now</a>
</body>
</html>

That’s it!

Prerequisites:
1. jQuery (Because Magento uses prototype and scriptaculous, you have to use jQuery in “no conflict” mode);
I’ve included the source code, along with the no-conflict version of jQuery in the zip file attached.

Let me know if you’re using this code (helps my ego)!

=============================
“e-commerce done right”
http://www.ifuelinteractive.com

Posted by Andy in Development, Magento / Tags: Add to Cart, Ajax, Development, jQuery, Magento

Comments

Punisher

Dude, you saved me a lot of time. Worked perfectly, no strings attached.

Thanks!

November 11, 2009 at 5:17 pm Reply
molecule

Nice, any idea how to do this with configurable products?

Thanks

November 28, 2009 at 10:37 pm Reply
Sam

Excellent stuff, works perfectly. Now to figure out how to update the cart totals on the page…gonna be jquery to the rescue me thinks!

December 3, 2009 at 7:16 am Reply
munyah

dude you are the man. I just changed it slightly to work with prototype

thanks!!

December 8, 2009 at 6:33 am Reply
Dylan

Cool script but it appears that this won’t work from a page that is not hosted on an external site. Thanks for posting.

December 18, 2009 at 1:34 pm Reply
Dylan

I typed too fast. I was unable to get this script to work from a remote server (e.g. blog, website, etc.)

December 18, 2009 at 1:36 pm Reply
Jon

I am going to use this, but I just did a quick test with some modifications to handle multiple products. Get in touch if you’d like to see my changes – but they are pretty simple. I just send multiple product ids and quantities to the php script (I use a single delimited string for each set of product ids and for quantities, then explode it on the server and add each item to the cart). Works great, thanks!

December 23, 2009 at 4:51 pm Reply
Jason

Is this limited to any particular produce type(s)? I need a solution that will work for simple, configurable and bundled items, and this is definitely the most elegant method I’ve come across so far.

December 23, 2009 at 6:02 pm Reply
omer

Thank you very much, greatly appreciated, we need more people like you helping us out with magento

February 23, 2010 at 5:04 pm Reply