shopbeam.js

[DRAFT PROPOSAL]

Shopbeam js client for 3rd parties.

Sites including shopbeam.js gain access to these shopbeam features:

• universal cart
• automatic product widgets (individual image, text)
• create a custom inventory ui (eg. a Flash product carrousel)
• convenient access to Shopbeam http API

Installation

<script src="www.shopbeam.com/js/v1/shopbeam.js"></script>

Cart

Loading shopbeam.js will automatically load the universal cart, and allow the user to add products in the current site. If the cart is not empty, it will become visible on the bottom-right corner.

To prevent the cart from loading automatically you can use a data attribute on the script tag:

<script src="www.shopbeam.com/js/v1/shopbeam.js" data-auto-cart="no"></script>

And load it at any time with:

shopbeam.cart();

Automatic Product Widgets

shopbeam js will automatically scan the document for declarative widgets on load, but scan can be triggered again (eg. if new content is loaded with ajax) using:

shopbeam.scan();

Declaration

Image

<img
  data-shopbeam-widget
  data-shopbeam-productid="<!-- product id -->"
  src="<!-- product image -->" />

Text

<span
  data-shopbeam-widget
  data-shopbeam-productid="<!-- product id -->"
  src="<!-- product image -->">
  <!-- product description -->
</span>

Custom Product Widgets

In some cases publishers may want to create a custom ui for product inventory:

• Silverlight product carrousel
• Flash banners

For that purpose the shopbeam js client provides methods to obtain product info and communicate with the universal cart.

var product = shopbeam.product(123456);

product.info().then(function(info) {
  if (!info.outOfStock && confirm("would you be interested in a nice " +
    info.title +
    "at just $" + info.price + "?")) {
    // show product details and "add to cart" button
    product.show();
  }
}, function(err) {
  console.error('unable to get product info', err);
});