jQuery, Magento and Ajax Add to Cart Redux

Andy — Thu, 15 Oct 2009 14:49:16 +0000

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.





Ajax add to cart sample




     
     Buy Now

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

Adding to the Cart with a jQuery Ajax Call in Magento

Andy — Thu, 10 Sep 2009 14:05:53 +0000

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.


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

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

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.


__('Buy Now') ?>">

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;

$(".add-to-cart").click(function(e){
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";
}

$(this).siblings(".ajax-loader").show();
var obj = this;

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

var result = $.getJSON("/scripts/addToCart.php", params, function(data, textStatus){
$(obj).siblings(".ajax-loader").hide();

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

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

// SHOW FEEDBACK, ERRORS AND RELATED ITEMS
} // end add to cart

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

$("#dialog").dialog({
buttons: {
"Ok": function() {
$(this).dialog("close");
}
}
// , closeOnEscape: true
// , show: 'slide'
});

$('#dialog').dialog('option', 'title', title);
$("#dialog").dialog('open');
}
});

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]

NY INTERACTIVE AGENCY « iFUEL INTERACTIVE / AGENCY212 » jQuery

jQuery, Magento and Ajax Add to Cart Redux

Adding to the Cart with a jQuery Ajax Call in Magento

Add to Cart Page

Buy Now Button

Client Script