Drag-and-Drop Shopping Cart with jQuery UI
January 17th, 2008 — Richard D. WorthI had my first article published on DMXzone.com yesterday. I’m going to be writing a couple tutorials a month on there, as well as on DNzone.com. I’ll mostly be focused on writing jQuery UI tutorials. Check it out:
Tutorial: Drag-and-Drop Shopping Cart with jQuery UI
In this article, I’ll introduce jQuery UI Drag-and-Drop and show you how with just a few lines of code, you can make a richly interactive shopping cart that is functional and fun to use. To get right into it, I’m going to assume that you’re at least familiar with jQuery (the base of jQuery UI). You should have a working (latest) copy of jQuery installed and be comfortable with the jQuery syntax and basic selectors.
It’s published in the Premium Content section, which means it’s not free. You can either pay a few dollars, or if you like the whole site (lots of great content, as well as an online magazine), they’ve got annual subscription options for unlimited access.
I’ve got a few more articles in the works including: dialog, theming, selectables. Leave a comment if you’ve got other ideas for articles.
February 15th, 2008 at 11:13 am
[...] my earlier post, Drag-and-Drop Shopping Cart with jQuery UI, for more information on DMXzone Premium [...]
February 15th, 2008 at 12:41 pm
[...] bookmarks tagged tutorial Drag-and-Drop Shopping Cart with jQuery UI saved by 1 others XXSTARXX511 bookmarked on 02/15/08 | [...]
March 11th, 2008 at 10:55 pm
Really good work. It seems fine. Thanks (:
March 30th, 2008 at 9:55 pm
Hi Richard,
I purchased your article at DMX Zone today. I seem to be having a bit of trouble with it tho. The complete example at the bottom of page one works but creating the second example thru step #4 seems to break. All is well until I drop on the target. It outputs a lot of javascript where the result should be. I’m using jQuery 1.2.3 and jQuery UI 1.5b. Is it possible that UI has changed since the article? The Draggables documentation on the UI site show the example using ui.base.js and no ui.mouse.js. Even more confusing, ui.base.js isn’t even in the UI 1.5b zip file? Any thoughts?
Thx,
Mike
March 30th, 2008 at 10:46 pm
@Mike: Thanks for the feedback. I’m sorry you had trouble using the article with the latest jQuery UI. Yes, there have been a few changes since the article, which is why I haven’t published any more tutorials recently — I’m waiting for 1.5final.
In this case, just change
var product = $(ui.draggable.element);
to
var product = $(ui.draggable);
and you should be set.
ui.base.js replaced ui.mouse.js recently, with some other bits. We’re working on getting a 2nd beta out this week, so it’ll match the documentation.
Let me know if there’s anything else I can do to help.
March 31st, 2008 at 11:47 am
Thx for the reply Richard! I figured it might be something like that. Well, it’s working now with your tweak. I do have another couple questions related to the cart tho.
1. What might be the best way to get the cart data into a db? Should the cart be a form instead of li’s so it’s ready for submission?
2. What might be a way to pre-populate the cart on page load with the results of a form post?
Not necessarily looking for details (unless you’d like to!), just ideas/concepts.
Thx!
April 1st, 2008 at 10:39 am
Hey! Figured out the answer to my 2nd question. As far as 1st question goes, I’m thinking maybe create hidden form fields corresponding to each LI when dropped on cart?
April 1st, 2008 at 10:52 am
@Mike: I would suggest using Ajax for getting the items into the db. Do a $.post each time an item is added, for just that item. Then the user can refresh, navigate away etc, without having to submit a form manually to have the items remembered.
April 25th, 2008 at 7:43 am
Hello Richard,
firstly, thank you for providing this article. I purchased it the other day and everything seems to be going well.
There is one issue, however; I have made the dragable item a link to a non JavaScript page in case a user does not have JS enabled. When I thus try to drag the item back to the list, it opens the URL to the non-js page instead.
How can I drag the item with the class of product (the item that is already inside the basket) back to the list of items without it opening the URL?
Thanks
April 25th, 2008 at 12:59 pm
Maleika,
Thank you. I’m glad you liked the article and that it’s helpful.
Generally, to prevent a link click from following, you add a click handler and either return false or call e.preventDefault(). Here’s an example:
$(”a”).click(function() { return false; //prevent navigation });
Hope that helps.
May 26th, 2008 at 11:07 am
Hi Richard,
Just purchased the article, good stuff. Have one question though - how can I attach prices to each product, and have the cart reflect the total when they are put in the cart?