O'Reilly Hacks
oreilly.comO'Reilly NetworkSafari BookshelfConferences Sign In/My Account | View Cart   
Book List Learning Lab PDFs O'Reilly Gear Newsletters Press Room Jobs  


 
Buy the book!
Amazon Hacks
By Paul Bausch
August 2003
More Info

HACK
#61
Sell Items with Pop-up Windows
Amazon Quick-Click Buying pop-ups are as close as you can get to 1-Click buying on your site
The Code
[Discuss (0) | Link to this hack]

The Code

Add this code to any existing web page to display one Quick-Click "Buy from Amazon.com" button. Be sure to include your associate tag and the ASIN for the item.

<script language="JavaScript">
function popUp(URL,NAME) {
  // Set pop-up Window Options
  var winoptions = 'location=yes,';
  winoptions += 'scrollbars=yes,';
  winoptions += 'status=yes,';
  winoptions += 'toolbar=yes,';
  winoptions += 'resizable=yes,';
  winoptions += 'width=380,';
  winoptions += 'height=450,';
  winoptions += 'screenX=10,';
  winoptions += 'screenY=10,';
  winoptions += 'top=10,';
  winoptions += 'left=10';

  // Open the Window and set focus
  amznwin=window.open(URL,NAME,winoptions);
  amznwin.focus(  );
}
// Set Associate Tag
var affTag = "insert associate tag";

// Set ASIN
var asin = "insert ASIN";

// Write out the Quick-Click Button
document.open(  );

// Set Amazon Quick-Click URL
var qcurl = "http://buybox.amazon.com/exec/obidos/redirect?";
qcurl += "tag=" + affTag + "&link_code=qcb&creative=23424";
qcurl += "&camp=2025&path=/dt/assoc/tg/aa/xml/assoc/-/";
qcurl += asin + "/" + affTag + "/ref=ac_bb1_,_amazon";

// Begin Link Tag
document.write("<a href=\"" + qcurl + "\" ");
document.write("onClick=\"popUp('" + qcurl + "','amzn');return false;\">");

// Begin Button Image
document.write("<img src=http://rcm-images.amazon.com/images/G/01/");
document.write("associates/remote-buy-box/buy1.gif border=0 ")
document.write("alt='Buy from Amazon.com'>");

// Close Link
document.write("</a>");
document.close(  );
</script>

Notice that this code uses the Quick-Click URL in both the href and onClick attributes of the link. This ensures the link will work even if someone has JavaScript pop-ups disabled; the Quick-Click page will just open in the same window if necessary.

If someone has JavaScript completely disabled, they won't see the link at all, so it's a good idea to add an option inside <noscript> tags. You can put a standard HTML "add to cart" form inside the tags, and it will show up for those who have JavaScript disabled or are using a device with minimal JavaScript support. Simply add this bit of HTML to the code after the closing </script> tag:

<noscript>
<form method="POST" 
   action="http://www.amazon.com/o/dt/assoc/handle-buy-box=insert ASIN">
<input type="hidden" name="asin.insert ASIN" value="1">
<input type="hidden" name="tag-value" value="insert associate tag"> 
<input type="hidden" name="tag_value" value="insert associate tag">
<input type="submit" name="submit.add-to-cart" value="Buy From Amazon.com">
</form>
</noscript>

Keep in mind that this HTML displays only a button. It's up to you to list item images or details along with the button so your visitors know what they're buying!


O'Reilly Home | Privacy Policy

© 2007 O'Reilly Media, Inc.
Website: | Customer Service: | Book issues:

All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners.