shopbeam
v0.0.12
Published
shopbeam js client library
Downloads
1
Readme
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);
});