Building a Drag-and-Drop Shopping Cart with AJAX

The i-Technology Media!	Register \| Log in

.NET · AJAX · CLOUD · ECLIPSE · FLEX · OPEN WEB · iPHONE · JAVA · LINUX · OPEN SOURCE · ORACLE · PBDJ · SEARCH · SILVERLIGHT · SOA · VIRTUALIZATION · WEB 2.0 · WIRELESS · XML

Comments

Plone and Drupal: Different Approaches, Different Results

paul.nowak wrote: Matt, thanks for the comments. I made an error on the version of Plone. It's 2.5 Plone running on Zope 2.9x. In regards to the additional products, we have a skin installed and we have a product that we had custom developed for us that connects to a PostgreSQL database. We've looked at slow PostgreSQL queries causing problems and have not been able to find an issue. We've also tested for the case where the PostgreSQL server is down and have not been able to create an issue. We therefor...

Nov. 4, 2009 04:19 PM EST

Cloud Expo on Google News

Did you read today's front page stories & breaking news?

2009 East

PLATINUM SPONSORS:

IBM

Smarter Business Solutions Through Dynamic Infrastructure

IBM

Smarter Insights: How the CIO Becomes a Hero Again

Microsoft

Windows Azure

GOLD SPONSORS:

Appsense

Why VDI?

Maximizing the Business Value of Virtualization in Enterprise and Cloud Computing Environments

ExactTarget

Messaging in the Cloud - Email, SMS and Voice

Freedom OSS

Stairway to the Cloud

Sun

Sun's Incubation Platform: Helping Startups Serve the Enterprise

POWER PANELS:

Cloud Computing & Enterprise IT: Cost & Operational Benefits

How and Why is a Flexible IT Infrastructure the Key To the Future?

Click For 2008 West
Event Webcasts

2009 East

GOLD SPONSORS:

Get Your Transactions Under Control: SOA Performance Management

Software AG

Performance Driven Adoption: The Secret to Advancing SOA

Intel

The Evolving SOA Appliance: 3 Game-Changing Innovations

SILVER SPONSOR:

Denodo

Data Mashups: Deliver Your Project Faster with Virtualized Data Services Across Internal & External Sources

POWER PANELS:

The Business Value of Service Orientation

Driving Profitability Through User Experience

Click For 2008 West
Event Webcasts

Live Google News by SYS-CON!

Top Three Links You Must Click On

Feature

Building a Drag-and-Drop Shopping Cart with AJAX

Creating an interactive shopping experience

By: Joe Danziger

Feb. 21, 2007 10:45 AM

Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.

The rise of AJAX over the past several months has taken over the development world and breathed new life into the Web. Although these techniques have been possible for many years now, the maturity of Web standards like XHTML and CSS now make it a viable alternative that will be viewable by all but the oldest browsers.

It's also been possible to accomplish many of the same things using Flex or Flash, but the development cycle with those applications is typically more involved and the overhead often not justified.

We're going to harness the power of the Scipt.aculo.us JavaScript library to provide our interaction. As their Web site states, this library "provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style." We're also going to utilize the <CF_SRS> library to handle the actual AJAX data piping to our application. Both of these libraries are free for all to use, and they're easier to integrate than you would think.

For this article, we'll create an interactive shopping experience allowing us to add items to our shopping basket by dragging and dropping them onto an icon of a shopping cart. We'll add AJAX functionality, allowing us to update our shopping cart without redrawing the entire screen. To save the trouble of setting up a product database, we'll use Amazon Web Services to search for DVDs and use those to shop from.

Start with a blank index.cfm in your root directory. You'll need to visit http://script.aculo.us/downloads to download the latest distribution (they're nearing a final release for version 1.5 as of this writing). Copy the "lib" and "src" directories into your empty directory. You'll need all of the .js files so just copy over the entire directory in each case. Next, type the following lines into the <head></head> section of your page:

We'll need a search box to submit our query to Amazon:

<form action="index.cfm" method="post">
Search: <input type="text" name="keywords" size="20" />
<input type="submit" name="search" value="Go" />
</form>

The page will look for a form.search variable and run an Amazon search when it is defined. Each item returned will be placed in its own styled div that will be able to be picked up and dragged.

The Scriptaculous library makes it easy to create "draggables" (the only required argument is the ID of the object that you want draggable). Listing 1 contains the code to search Amazon and return the results as draggable divs.

At this point, all of the items returned from the search will be in their own box and should be draggable around the screen. When we created each draggable, we set "revert=true", which will snap each object back to its original location if not placed directly on a drop zone.

Next, we'll add a graphic of a shopping cart to our page, which will become a drop target on which to drag items. The Scriptaculous library also makes it easy to create these "droppables". The syntax is simply:

Droppables.add('id_of_element',[options]);

The code below creates a droppable zone of id "cart1" and also runs a function onDrop() that pops up an alert box letting the user know an item has being added. We then hide the element from view, which allows the other divs to slide over and adjust accordingly.

<img src="shopcart.jpg" id="cart1" style="float:left;">
<script language="javascript" type="text/javascript">
Droppables.add('cart1', { onDrop:function(element) {
alert('Added UPC ' + element.id + ' to your shopping cart.');
Element.hide(element.id);}})
</script>

The items should now be disappearing when dropped onto the shopping cart, but there's nothing going on behind the scenes yet. Now it's time to add some AJAX to process our shopping cart.

Although there are several AJAX libraries to choose from, we're going to use the ColdFusion Simple Remote Scripting <CF_SRS> library made available free of charge by Matthew Walker of ESWsoftware in New Zealand. <CF_SRS> uses an IFRAME for communication and encapsulates all of the dirty work for you. This library was chosen for its ability to handle HTML tables well and for its ability to interact directly with the browser's Document Object Model (DOM) to output our shopping cart rows.

We'll start with an empty cart by including the following code:

<fieldset style="width:400px;">
<legend>Your shopping cart</legend>
<table border="0" cellspacing="0" cellpadding="5" id="tableCart">
<thead></thead><tbody></tbody></table>
<button onclick="emptyCartButton_onClick()" id="emptyCartButton">
Clear Shopping Cart</button>
</fieldset>

(Don't worry about the fact that our table body (<tbody></tbody>) is empty right now - we'll be populating it in just a second through AJAX.)

Next, you'll need to download the <CF_SRS> package from www.eswsoftware.com/products/download/. Copy the srs.cfm file into your Webroot (or you can add it to your CustomTags directory if you plan to do more AJAXing). You'll also need to create a subdirectory to hold the gateway pages that handle our AJAX data passing. Name the directory "SRS" and copy the Application.cfm and OnRequestEnd.cfm files into there from the "serverpages" directory in the zip file. You can use either regular CFM files or CFCs for these gateway pages (the download provides examples of each). The main thing to remember is that these pages should always return their results to "request.response".

Simply adding a <cf_srs> call to your page will handle the creation of the hidden IFRAME for you. Another great feature of the CF_SRS library is the ability to view an inline debugging window right inside the page you are working on. This allows you to see all of the data being passed back and forth through the gateway. You can enable this debugging by calling the tag as <cf_srs trace>. This line can be placed anywhere but we'll add it at the very end of the file.

Next, we'll need to create some JavaScript functions to handle the AJAX interactions. Add an onLoad function to your body tag as such: <body onload="body_onLoad()">. This will execute body_onLoad() when the page loads and we'll use this function to set up our gateway. The function should read as follows:

function body_onLoad() {
// create an SRS gateway to the cart.cfm page
objGateway = new gateway("srs/cart.cfm?");
// update cart in case of return visit
// code for this function is below
updateCart();
}

Once you have created your gateway, you can invoke the methods below to send requests to the server:

objGateway.setListener( str ): Use this method to specify the name of the function in your Web page that will handle the server's response. str is a string representing the function's name. The listener defaults to "alert", which will pop up a JavaScript alert() box containing the server's response. Note that while ColdFusion is a case-insensitive language, JavaScript is case-sensitive. If you return a structure to your listener function, all the structure keys will be rendered in JavaScript as lowercase.
objGateway.setArguments( obj ): Set the arguments and values to pass to the server. obj is an object literal, which is basically just a set of one or more attribute/value pairs wrapped in curly braces. Here's an example: { name:'Joe', age:30, country:'US' }. You can see that string values need to be wrapped in quotation marks, and colons (:) are used in place of equals signs (=).
objGateway.resetArguments(): Remove all the arguments previously set.
objGateway.request(): Send the request to the server.

Published Feb. 21, 2007— Reads 232,982 — Feedback 22
Copyright © 2007 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

About Joe Danziger
Joe Danziger is a senior web applications developer with Multimax, Inc., a provider of Enterprise IT Services and Solutions supporting the critical missions of the Air Force, Army, Navy, and other Department of Defense components. He is certified as an Advanced Macromedia ColdFusion MX Developer, and also maintains the Building Blocks site (www.ajaxcf.com) dedicated to AJAX and ColdFusion, as well as DJ Central (www.djcentral.com), a Website serving DJs and the electronic dance music industry.

Reader Feedback: Page 1 of 2

#22	King commented on 21 May 2008 Soon everything will be Ajax, just look how the major websites are adapting to use it.
#21	A commented on 7 May 2008 I think your right when you say that Ajax is the way of the future, although its is difficult to program, you can see yahoos and googles implementation of it.
#20	Scott commented on 2 Aug 2007 Hello N, I had the same problem. Try changing: to: <cfif StructKeyExists(xnSearch.Items.Item, "MediumImage")>
#19	N commented on 14 Jul 2007 I'm following this tutorial to the letter as well and I also get this error in the code that retrieves the info from Amazon... Element ITEMS.TOTALRESULTS.XMLTEXT is undefined in XNSEARCH Is there a fix available or anything to get this to work. It looks good though. N
#18	asdf commented on 10 Jul 2007 asdfsafs asdfasf asdfasf
#17	abcd commented on 10 Jul 2007 heloow asdf asdfs asdfasf biuiouer asdfaf boihoi awerew asdf
#16	Wally Kolcz commented on 22 Jan 2007 I loved your tutorial on how to make a drag and drop web cart, but I couldn't quite follow on how to put the code into the page to make it work. Do you have any finished files available for download to see how it is constructed? Thanks
#15	BUses commented on 26 Dec 2006 Awesome content: L'augmentation d'AJAX pendant plusieurs mois passés a repris du monde de développement et a donné un second souffle au Web. Merry Christmas of Poland!
#14	Simone from Italy commented on 20 Dec 2006 Hi, please add a link to index.cfm full compliled because It's very hard to have a union of all fragments introduced in your article. Thanks
#13	Danny commented on 31 Oct 2006 I'm following this tutorial to the letter and I get this error in the code that retrieves the info from Amazon... Element ITEMS.TOTALRESULTS.XMLTEXT is undefined in XNSEARCH Any ideas? Thanks for this tutorial!
#12	j j commented on 21 Sep 2006 Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.
#11	Student Organization Guy commented on 5 Aug 2006 How is user experience improved with dragging items into a shopping cart? ;) This is just developer feature candy. There are many other site components to focus your time on that will improve your application. Don't work so hard just to remove your 'add to cart' buttons.
#10	CFDJ News Desk commented on 4 Aug 2006 Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.
#9	AJAXWorld News Desk commented on 4 Aug 2006 Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.
#8	AJAXWorld News Desk commented on 4 Aug 2006 Keeping up with the latest Web technologies is tough nowadays. Every week it seems new sites are launched that push the envelope further and further in terms of what can be accomplished using just a Web browser.