shopbeam

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 to create widgets on load, but scan can be triggered again (eg. if new content is loaded with ajax) using:

shopbeam.scan();

Declaration

Any link pointing to a shopbeam product will be converted into a shopbeam widget automatically.

• If the link contains an image, video or any other "block" media or element, a translucent overlay will be shown on hover.
• If the link contains just text, a popover will be shown on hover

in any case, clicking will open a modal with product details

Image

<a href="https://www.shopbeam.com/product/123456">
  <img src="<!-- product image -->" />
</a>

Note: no extra attributes are required (class, id, fixed width and height or data-*)

Note 2: video, canvas or div can be used instead of img

Text

hey, check
<a href="https://www.shopbeam.com/product/123456">this bag</a>
I found

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);
});