How to Add Magento JQuery/Ajax Add-To-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.
<?php
include_once '../app/Mage.php';
Mage::app();
try{
// usage /scripts/addToCart.php?product_id=838&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);
$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.
<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;
$(".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]
Comments
18 Comments on How to Add Magento JQuery/Ajax Add-To-Cart
-
Johan Jacobs on
Thu, 26th Aug 2010 4:35 am
-
Rhonda Morin on
Tue, 31st Aug 2010 4:01 pm
-
Steven Robert on
Sat, 11th Sep 2010 11:03 pm
-
Mike Plant on
Fri, 5th Nov 2010 2:09 pm
-
Aniruddha Banerjee on
Wed, 15th Dec 2010 5:17 am
-
Eizil on
Mon, 3rd Jan 2011 12:25 am
-
Milan on
Thu, 27th Jan 2011 12:24 pm
-
Eizil on
Thu, 27th Jan 2011 1:08 pm
-
Magento multi store on
Fri, 15th Jul 2011 6:28 am
-
Web Designer on
Wed, 3rd Aug 2011 7:32 am
-
Web Design Staffordshire on
Wed, 31st Aug 2011 4:18 pm
-
Terry on
Wed, 9th Nov 2011 6:12 pm
-
Rana on
Fri, 18th Nov 2011 7:05 am
-
Thales on
Tue, 29th Nov 2011 10:35 pm
-
jopie on
Wed, 22nd Feb 2012 12:29 pm
-
web dizajn on
Sat, 16th Jun 2012 12:10 pm
-
Enrial Team on
Wed, 29th Aug 2012 4:50 am
-
Aamir on
Mon, 17th Sep 2012 4:12 am
Thank you, very usefull 
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 http://osbstores.com to my static html pages at http://myinteriordecorator.com????
Please email me.
Rhonda Morin
@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.
@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!
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.
I would like to ask, how can i process the custom options from the product using this method?
I’m wondering the same thing as Eizil. Is there a way to include the options in the ajax call/php file?
Thanks!
@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.
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.
It’s really fantastic read. I enjoyed the post. It’s very informative and useful to everybody..
Thanks for sharing.
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!
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.
Thanks a lot Mike Plant.. I do found few good blogs related to magento
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..
Thanks
Is there anyone who’s got a demo of this?
can somebody post a link?
Thanks
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!
Hello!
We’ve created AJAX Power Cart Extension by Enrial – please, take a look when you will have some time:
http://www.magentocommerce.com/magento-connect/catalog/product/view/id/14195/
Direct link to the demo: http://theextensions.com/electronics.html?cat=8
Best Regards,
Enrial Team.
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!
Subscribe to RSS
Follow Us
