Amsive

PUBLISHED: Oct 15, 2009 2 min read

jQuery, Magento and Ajax Add to Cart Redux

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.

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

https://www.amsive.com

Share: