21 Dec

dropbox tracer

I’m just finishing off a shopping cart for an Irish examination papers website, and was thinking about what I have learned from this site and how I could improve it in future sites.
One of the things I learned in this one is that the basket of a shopping cart must not be visible at all times, as it can get quite large. In the present example, I have solved this by hiding the basket, unless explicitly displayed (see the "[show]" link in the Basket area (one you have added something to the cart)).
I was considering going a step further in the next project, though – maybe just displaying a basket icon in the top-right of the page, which symbolises the shopping cart – clicking on it would open up a view of the basket.
Then, it occured to me that it could get very user-unfriendly – how would the shoppers know where to look for their stuff?
The answer is that I would have to show them.
In Microsoft’s Windows Update site, when you click to add an item to the product list to download, the item appears to float up and into a drop-box, giving a very good analogy of putting an item into the box for later. This solves two problems – first, it shows that something is actually happening (which can be a problem in AJAX!!), and secondly, it shows where to look for the item.
So, I’ve written a simple function which can do something similar.
Here is the demo
What it does is that when you click on an action link, it "shows" a box being placed in another box. I will use this in future shopping carts to "show" items being placed in the cart.
The usage of it is incredibly simple. All you need to do is link to this file, and start off the thing with this:

boxdropTracer('from','to');

In the above, "from" is the id of the element being placed in the other element "to".

5 thoughts on “dropbox tracer”

  1. Fred -

    That is realy excelent idea. But there are some problems in older opera version with opacity.  This href="javascript:boxdropTracer(‘from’,’to’);"could be easily replaced with
    href="#something"  onclick="boxdropTracer(this,’to’);return false;"
    because var fromEl=document.getElementById(idFrom) could be just var fromEl=idFrom

    If you dont have to use id of clicked href, you can simply
    remove onclick from html and remove script for opera and old browsers.

    just ad some id to shop area and then call everything with

    function init(){
    var kde=document.getElementById(‘shop’)
    var co=kde.getElementsByTagName(‘a’)
    for(var i=0;i<co.length;i++){
    co[i].onclick=function(){
    boxdropTracer(this,’to’);return false;
    }
    }
    }
    op7=window.opera&&!window.XMLHttpRequest;
    if(d.childNodes&&!op7){window.onload=init;}

    Also are there some forgoten +’px’ that is why it is not work with doctype.

    But it is realy beautifull, what is the copyrigth for that?
    I uploaded a test to here http://xy.wz.cz/verens-test/js-shoping-cart.html
    and with correct extension http://xy.wz.cz/verens-test/js-shoping-cart.xhtml

  2. Kae Verens -

    I thought of using the this object, but considering that I was thinking of using it in a cart system where the click is actually on a shared button (“add to cart” adds multiple items – not one – see the example site I mentioned), it made sense for me to name both elements, so I could call the function in a loop.
    I haven’t tried this in Opera, but I don’t anticipate a problem – I’m in Konqueror at the moment, which also does not do opacity – there is no usability problem with a fully opaque rectangle instead of a transparent one – the opacity was really just eye candy.

    Nice example. The background image in the tracer really adds some extra glitz to it!

Comments are closed.

%d bloggers like this: