Wednesday, November 26, 2008

Analyzing the Amazon Universal WishList Bookmarklet

Amazon added a nifty Universal Wishlist function to their site back in August but I just discovered it today (thanks Yuriy!).  Essentially it is a personalized bookmarklet/favelet that injects code into any page, letting you add any and everything to your Amazon wishlist.

The code for the bookmarklet is this:


Not very readable – so I decided to expand it.  I added linebreaks, and in some cases vars, {}s and in one case changed a tertiary conditional to a regular if..else statement:

(function() {

    //order of execution:
    //1. Initialization
    //2. Script check
    //3. Load remote script
    //4. Execute remote script

    //***Initialization ***
    //create short aliases for common objects
    var w = window, l = w.location, d = w.document;
    //create a script element and give it a short alias
    var s = d.createElement('script');
    //create some more short aliases...
    var e = encodeURIComponent, x = 'undefined';
    var u = '';

    //***Script check ***
    //if the script element was not properly created...
    if (typeof s != 'object') {
        //..navigate to the Wishlist add page, passing along the current page url and title
        l.href = u + '?u=' + e(l) + '&t=' + e(d.title);
        //effectively ends the script

    //...else (script successfully created)

    //*** Load remote script ***
    //create a function that we can call recursively until the document is fully loaded
    function g() {
        //if the document is not fully loaded...
        if (d.readyState && d.readyState != 'complete') {
            //.. wait 200 milliseconds and then try again
            setTimeout(g, 200);
        } else { //... the document IS fully loaded
            //if the Amazon Universal Wishlist object is undefined...
            if (typeof AUWLBook == x) {
                //set the source of the script element to 
                //This is a pretty complex and large JavaScript object, not discussed here
                //Essentially it displays a floating div in the top left corner of the page
                //in which the user can enter product details and select from the pictures on the
                //current page.
                //AUWLBook is personalized for each user, setting Wishlist titles and regystryIds
                //If the user is signed out, it will navigate to the Amazon sign in page, and then 
                //to the wishlist
                //If the user is signed in, it will display a floating confirmation div with options
                //of navigating to the list or "continue shopping".
                //I don't BELIEVE the loc query parameter actually alters the generated JavaScript, 
                //it must be used for other purposes
                s.setAttribute('src', u + '.js?loc=' + e(l));
                //append the script
            //***Execute remote script ***
            //create a function that we can call recursively until the AUWLBook object is fully loaded
            function f() {
                //if the AUWLBook object is not loaded yet, wait 200 ms and try again
                if (typeof AUWLBook == x) {
                    setTimeout(f, 200);
                } else { //when loaded display the pop-over div - see above
            //call the f function
    //call the g function
} ())
See for the full js with proper highlighting.

Labels: , , , , ,


Post a Comment

<< Home