BookGrail-powered E-commerce
With BookGrail everyone can recommend books via email, Twitter and Facebook, but did you know that you can also embed a BookGrail-powered shopping cart and checkout process on your website… in just three simple steps?

STEP 1
Include the following reference in your webpage header:-
<script type="text/javascript" src="http://www.bookgrail.com/assets/scripts/bg.min.js"></script>
STEP 2
Your ‘Add to Basket’ button will need to include a few BookGrail specific data attributes.
Firstly, there are two attributes that must be included on your button:
  • data-cart – add with the ISBN of the book as its value
  • data-cart – open with the name of your container for your shopping cart as its value
Heres a complete list of parameters you can use to further customise your BookGrail shopping cart:
  • data-price – takes an ISBN as its value and makes a call to BookGrail to populate the price
  • data-cart-add – takes an ISBN as its value, adds the book to the user’s shopping basket and displays an appropriate alert message
  • data-cart-open – inserts an iframe containing the BookGrail cart into the container denoted by the attribute’s value
  • data-cart-close – removes the iframe from the container denoted by the attribute’s value
  • data-theme-color – used along with the data-cart-open attribute to set the cart button background colours using this attribute value
  • data-book-message – used along with the data-cart-open attribute to display a html entry under each book title

STEP 3
Add a call to initialise the BookGrail connection in your webpage footer.
<script type="text/javascript">
BG.init('<Enter your BookGrail referrer key here>');
</script>
You can find your BookGrail referrer key by clicking on a book in Bookgrail, selecting Recommend and navigating to the Html tab.
You’ll see a URL:
http://www.bookgrail.com/book/the-book-title-91167/?referrer=tF4nJ6gqtRVcHxQ2gNrpjHew9T3OYCShD0kckDTE3mk%3D
Your referrer key is the string in bold.

EXAMPLE
Putting it all together, here’s a bare-bones demo that links to London publisher Head of Zeus’s BookGrail Account. Publishers are also able to set discount coupons, as Head of Zeus have done here:
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BookGrail Shopping Cart Demo</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://www.bookgrail.com/assets/scripts/bg.min.js?8ff393&8ff393&8ff393&8ff393&8ff393&8ff393&8ff393&8ff393&8ff393&8ff393&8ff393"></script>
	</head>

	<body>
		<p>Price for The Thorn Birds: <strong data-price="9781781852514"></strong> <button data-cart-add="9781781852514" data-cart-open="#mycart" data-theme-color="#f26788" data-book-message="<small><i>Enter code OWL33 at checkout and save 33%</i></small>">Add to basket</button></p>
		<button data-cart-close="#mycart">Close Cart</button>
		<div id="mycart"></div>
	</body>
			
	<script type="text/javascript">
		BG.init('Ad1b7pmKUrGUjHh9EcsrmCkwKi8MQoYdLyMZ%2F5zOfgc%3D');
	</script>
	
</html>
 
Coming soon: a WordPress plugin to do the same.

2 thoughts on “BookGrail-powered E-commerce”

    Profile Photo

    bookgrail 1 year, 1 month ago / •

    Hi Julie, We're pleased to announce that our Wordpress plugin is now available: https://en-gb.wordpress.org/plugins/bookgrail/


    Profile Photo

    Julie Willis 1 year, 7 months ago / •

    Is the Wordpress plug in available yet please?


    Leave a Reply