User:Lucia Dossin/Self-directed Research/Exercise1

Exercise 1

What happens when there's time to reflect on what you're doing online? In this specific case, when you're buying something?

Description

A Firefox plugin that interferes in the shopping flow by delaying the 'Add to Cart' action.

Instead of putting the product in the shopping cart after just one click, one question (out of a set) is presented on screen each time the User clicks the 'Add to Cart' button. In the current structure, by clicking OK, this mechanism is kept activated. By clicking Cancel, the mechanism is canceled and the User will then be able to put the product in the shopping cart. Besides that, while the mechanism ia active, the main product picture is substituted (currently by a 'garbage monster').

This is an ongoing exercise, currently a mock-up. Yet to be done/tested:

• design another 'Add to Cart' button. Currently there's a sandclock to indicate whether the mechanism is activated or not.
• questions posed will make stronger use of graphic language (instead of the default javascript gray boxes). OR there will be no overwhelming graphic elements and no questions. Just the need to click the 'Add to Cart' button N times before a product is put there. Second option seems more attractive to me.
• questions posed could be more persuasive (if there are any questions at all).

Screenshots

File:Lucia_SDR_Output2.ogv

Code

// ==UserScript==
// @name	Postpone Add to Cart
// @description	Initially just trying things out.
// @grant none
// @include http://www.amazon.tld/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @version 0.1
// ==/UserScript==


$('div.a-button-stack').css('display','none');

function htmlToDomNode(html) {
	var container = document.createElement('div');
	container.innerHTML = html;
	return container.firstChild;
}

$('#bbop').after(
    htmlToDomNode('<div class="new" id="more-time" style="cursor: pointer;"><img src="http://thecatlab.com/inc/img/new_cart.png" title="More Time is enabled" /></div>')
);

product_name = $('span#productTitle').text();
product_price = $('span#priceblock_ourprice').text();
product_image = $('li.image img').attr('src');

args = [
        'Take some time to think about it, you really don\'t have to rush.',
        'Maybe you don\'t really a '+ product_name + '. Do you?',
        'Can\'t you think of something more useful to do with ' +product_price + ' than buying this?',
        'Have you already considered the amount of garbage involved in the making, selling and discarding of a product such as '+product_name+'?',
        'Check what Richard Stallman has to say about Amazon:\n http://stallman.org/amazon.html'
       ];
i = 0;

$('#more-time').on('click', function(){
    $('li.image img').attr('src' , 'http://thecatlab.com/inc/img/uaha.jpg'); 
    if(i<=args.length-1){
       conf(i);
       i++;
    }else{
       i = 0;
       conf(i);
       i = 1;
    }
});

function conf(i){
  if(confirm(args[i])){
     //do_something_here() (or not!)
  }else{
     erase_it()
  }; 
  return false;
}

function erase_it(){
  $('div.a-button-stack').css('display','block');
  $('div.new').css('display','none');
  $('li.image img').attr('src' ,product_image);
}