By Aaron Lozier - February 20, 2008
Our drag-and-drop Comparison Box, in addition to being a helpful user experience tool, has become a viral marketing strategy as well.
DHTML (Dynamic HTML) special effects such as Desktop style drag-and-drops, fades, scrolling and other neat tricks have been around for several years now. However it has not been until recently that we have had JQuery, which is a powerful library that allows us to make full use of this potential in real-world Web applications.
The question for web developers, then, is when and how do we make use of these special effects in our applications? This website, Strollers Direct, was developed by Comit Technologies using its in-house e-commerce software “Acropolis.” Being huge fans of JQuery ourselves, we wanted to make as much use of this library’s capabilities without going overboard or using it in otherwise counter-effective ways.
Drag-and-drop shopping carts have been discussed since at least 2003, possibly earlier, however we still are not seeing this technology being used on shopping cart sites. Why? Well, in our opinion it is simply because a drag-and-drop shopping cart does not truly add anything to the user experience. When compared against the traditional “Add to cart” button, it is hard to see how you can make something easier than one mouse-click.
Drag-and-drop me into the comparison box to the right (It's fun!)
However an interesting application for JQuery’s UI (User Interface) drag-and-drop capabilities came to us during one of our Monday morning meetings when we began discussing how we were going to be building out the product comparison features. The question was, how do we allow our customers to “choose” which products they want to compare. After all, Strollers Direct has over 1,000 products, divided according to dozens of categories and sortable product attributes. Since we knew there was no way we could offer all of our strollers listed on a single page, we needed a better way.
One solution that came to mind was something similar to a shopping cart, say a “Comparison cart,” where users can add products to this second cart and then click to compare, instead of clicking to check out. However this seemed like it could be more confusing than anything, having two different buttons, “Add to Cart” and “Add to Comparison Cart.” We needed a completely different way for customers to easily add their products to some sort of comparisons storage space in a way that was visually intuitive.
Drag-and-drop seemed like a perfect solution to this problem. So we designed a “comparison box” that would appear in the top right-hand corner of each page with four blank spaces. We added a title that described the process in one sentence: “Drag-and-drop up to 4 strollers here to compare” as well as a “What’s This?” link that directed the user to a page describing the process. The process itself is quite simple. If you see a picture of a stroller anywhere on the website, you simple drag and drop into the comparison box.
By our count over 1,200 unique users have used our drag and drop comparison feature since we launched nearly two months ago. It seems that so many users enjoy the “cool factor” of this drag and drop feature that they are letting their friends know about it. Thus the “drag-and-drop Comparison Box,” in addition to being a helpful user experience tool, has become a viral marketing strategy as well.
For other e-commerce webmasters out there who are interested in adding a similar feature to their own sites, we wanted to offer a short tutorial on how we created this feature and hopefully together we can make online shopping even cooler.
How to set up Drag-And-Drop product Comparisons on your Website
Requirements
- JQuery Latest Release (Currently http://docs.jquery.com/Release:jQuery_1.2.3)
- JQuery UI Plugin (http://ui.jquery.com/)
- JQuery Thickbox Plugin (for comparison chart) (http://jquery.com/demo/thickbox/)
- Ecommerce Software that you have full control over, such as OS Commerce, or a product you have developed in-house.
Step 1. Set up a consistent class name and ID structure to be used for all “draggable” product images.
Ideally you want all products to be “draggable,” including the thumbnails on your product pages, the large product image on your product detail pages, featured product images on the home page, or anywhere else. Since JQuery offers the ability to bind events through CSS selectors, this can be accomplished first off by simply adding a class name like “product-image” to all of your product images.
Also, JQuery is going to need to be able to interpret the product ID of the image being dragged/dropped, so in our case we use a consistent ID structure for the element. For example:
<img src="1.jpg" alt="product image" class="product_image" id="product-image-1" />
Step 2. Set up a simple server-side script to manage adding and deletion of products in the comparison cart.
This can be done however you like, but in our case we took two variables as the input: product_ID and action. These need to be read from the query string to accommodate the AJAX requests we use, so for example a URL like this:
/products-compare-cart.php?product_ID=1&action=add
Would cause the product with ID of 1 to be added to the comparison cart.
The “comparison cart” can also be managed however you like, but in our case we used an array stored in a cookie on the client side, just like we do with our shopping cart. If you need more information on how to do this there are plenty of resources online.
Step 3. Set up a server side script to output a comparison chart based on the product data stored in the “comparison cart.”
This step is probably the most difficult to generalize because of how widely product databases vary from one e-commerce platform to the next. But the basic idea is you need to get an array of all product_IDs in the comparison cart and generate a chart with X number of columns, containing all the product information you want to use to compare. So if three products are in the comparison chart, this script should out put a table with three columns, and a row for each attribute to be compared, such as size, color—whatever. Here is what ours looks like:
(Click to enlarge)
Step 4. Set up your comparison box
For JQuery to be able to do its job, you are going to need to provide certain signals in the DOM (Document Object Model), or HTML, that indicate which products are already in the cart and how many slots are remaining. Your comparison box is basically going to be a FORM with hidden inputs containing the product_IDs of the products in the “comparison box.”
Here is some sample HTML of the comparison box used in our appliaciton:
<div class="comparisons">
<form id="frmComparisons" method="post" action="compare-products.asp">
<div class="compare-info">
<p>Drag-and-drop up to 4 strollers here to compare. <a href="http://www.strollersdirect.com/stroller-comparisons.htm" class="whatsthis">What's This?</a></p>
</div>
<div class="compare-boxes">
<div class="compare-box compare-box-filled" id="compare-box-1" style="background-image:url(/images/tiny_image/prod-1273.jpg)"></div>
<div class="compare-box compare-box-filled" id="compare-box-2" style="background-image:url(/images/tiny_image/1148.jpg)"></div>
<div class="compare-box compare-box-filled" id="compare-box-3" style="background-image:url(/images/tiny_image/_30-1.jpg)"></div>
<div class="compare-box compare-box-filled" id="compare-box-4" style="background-image:url(/images/tiny_image/_33-1.jpg)"></div>
</div>
<div class="compare-go">
<input type="image" value="Compare" class="compare-action" src="/templates/default/images/compare-btn.gif" />
</div>
<input type="hidden" name="prodCompare1" class="prodCompare" id="prodCompare1" value="1273" />
<input type="hidden" name="prodCompare2" class="prodCompare" id="prodCompare2" value="1148" />
<input type="hidden" name="prodCompare3" class="prodCompare" id="prodCompare3" value="34" />
<input type="hidden" name="prodCompare4" class="prodCompare" id="prodCompare4" value="37" />
</form>
</div>
As you can see, our comparison box consists of four basic parts:
- A brief explanation to the user on what this is and how it works (“.compare-info”)
- The comparison boxes, or slots, where the product images go. In our case we set the product image as the background of the divs.
- Comparison box actions (“compare-go”) containing the submit button that opens the chart in the light box.
- Hidden inputs, one for each comparison box, containing the actual product_IDs of the products in the cart.
Step 5. Tie it all together
On the client side, we were able to accomplish all of the functionalities needed for our comparison feature using around 120 lines of javascript code, including comments. You may be able to accomplish the same thing with less, or you may need more, depending upon your application.
You may click here click here to download the Javascript source used on StrollersDirect and reference it with the following highlights:
Line 3: (refers to function on lines 88-120)
This initializes the comparison box upon page load, specifically binding the hover event that will cause the “delete” icon to appear on comparison boxes that are filled. A click on one of these icons will call the script we created in step 2.
Lines 5-15:
Makes all images with .product-image class name draggable. The cursorAt property keeps our cursor in a good location on the image that appears once we start dragging.
Drag-and-drop me into the comparison box at the top of the page (It's fun!)
We turn the scroll property off because we basically don’t like the default behavior. The scroll issue comes into play when you start dragging a product that is near the bottom of your page, and you have to scroll up to see the comparison box. If scroll is on you have to “push” the product up the page. We turn this off because we think it works more nicely if the page scrolls up automatically once you start dragging, which we do on line 7.
Lines 8-13 are used to retrieve our “tiny image,” which we are able to access easily through our image path structure. In other words no matter what the size of the image you start to drag, the “clone” will actually be the 60x60 pixel thumbnail. There are other ways to do this, however, and solutions will vary from one application to the next.
Lines 17-68:
This is the “meat” of the application, which defines the “droppable” behavior for the comparison box itself. We make the entire comparison box droppable (rather than the individual slots) and use a tolerance of “touch” which basically means it is very forgiving from the user standpoint.
This section contains a series of routines that check to see if there is a slot available, whether there are duplicates, etc. If there is a problem, an alert is sent to the user. Otherwise it executes via AJAX that script we created in Step 2, and then adds the product image to the first available slot. The function parses the ID using the consistent naming structure we established in Step 1.
Lines 70-84:
Its all downhill from here. We simply bind an event to the submit button in our actions for the comparison box, in order to catch the submit and open a lightbox containing the output of the script we set up in Step 3. We need to first make sure at least 2 items are in the cart, and then if so, we open a lightbox pointing to that URL.
You’ll notice one thing we did here was to multiply the number of products in the comparison cart times 150, and added 100. We cross-referenced this formula with the CSS in our comparison chart, so that the lightbox that opens will always exactly fit our chart.
Conclusion.
So there you have it- a nice, unobtrusive and very handy comparison tool that can span multiple categories and pages on your website without confusing your customers. Is there a better, quicker way to do it? Almost certainly. Will our solution work perfectly for you? Almost certainly not. However we do hope this little tutorial is somewhat useful and we hope to see cool DHTML effects using JQuery on more E-commerce sites in the near future.
