Using the JS Flipbook integration within an E-Commerce platform open many possibilities for a very fluid shopping experience, such as allowing the customer to directly interact with the shopping cart.
For a live example, checkout the following link.
To get a better overview of how the above example was achieved, we will dive into how the communication between the parent window and the Flipbook works. We will assemble a short code snippet which will consist of the API, magic callback event and embed script, and display product information in an alert dialog.
Before we dive into the coding part of the tutorial lets overview how the connection is made.
As the above diagram shows, this implementation works as a two-way communication between the parent window (embed location) and the and the embedded Flipbook.
For more in depth information, please refer to our documentation here
To achieve this, we will compile a script from 3 different parts.
The embed script
onItemAddeventiFrame embed
The Embed Script
To establish communication between the parent window and Flipbook which we will embed we need to get the Flipbook API script which we can do by accessing the menu by right-clicking on the account name.
The Flipbook API script will be presented which we can copy, and place to the head of embed script.
onItemAdd event
The following snippet will fire the onItemAdd event which will be dispatched from the iFramed flipbook to the JavaScript API via window.postMessage().
Once the API receives this event, it then invokes a callback present in the parent window, which will show us an alert with the following product data.
|
| Shop item title |
|
| Shop item description |
|
| Shop item product ID |
|
| Shop item price |
|
| Number of items added |
<
script >
function iPaperInit() {
iPaperAPI.onItemAdd = function(data) {
console.log(data);
ID = data.productId;
Price = data.price;
Description = data.description;
Title = data.title;
Quantity = data.quantity;
alert("Product information: \n \n " + "ID:" + " " + ID + " \n" + "Title:" + " " + Title + " \n" + "Price:" + " " + Price + " \n" + "Description:" + " " + Description + " \n" + "Quantity:" + " " + Quantity + " \n");
}
}
<
/script>iFrame embed
With our final piece of the script we will add the URL of the Flipbook we wish to embed.
<body>
<iframe src="https://library.ipaper.io/demo/demo-catalog-shop-embed/" style="width: 100%; height: 1000px;"></iframe>
</body> More in depth information on Flipbook iFrames can be found here
When we combine it all together we get the following script is ready to use!
<!doctype html>
<html>
<head>
<title>Example Flipbook JS API use</title>
<!-- Start of async iPaper Flipbook API script --> <!-- NOTE: The entire code snippet below can be obtained directly from the Admin. Refer to our help article for further information. -->
<script>
(function(i,P,a,p,e,r){if(i.getElementById(a=a+'-'+e))return;
r=i.querySelector(P).parentNode.appendChild(i.createElement(P));
r.id=a;r.async=1;r.src=p+'/'+e+'.js'})
(document,'script','ipaper-flipbook-api','https://cdn.ipaper.io/api','MTY6OWEyZmQ2NDItMzY2Ni00ZDkwLWE4NDQtN2JjZTBmMjc1MWE0');
</script>
<script>
function iPaperInit() {
iPaperAPI.onItemAdd = function(data) {
console.log(data);
ID = data.productId;
Price = data.price;
Description = data.description;
Title = data.title;
Quantity = data.quantity;
alert("Product information: \n \n " + "ID:" + " " + ID + " \n" + "Title:" + " " + Title + " \n" + "Price:" + " " + Price + " \n" + "Description:" + " " + Description + " \n" + "Quantity:" + " " + Quantity + " \n" );
}
}
</script>
<body>
<iframe src="https://viewer.ipaper.io/Javascript-integration-demo/demo/" style="width: 100%; height: 1000px;"></iframe>
</body>
</html>
As you can see once, a product CTA is clicked the onItemAdd event is fired which returns the product information.
This was a very basic showcase what v2 Flipbook JavaScript API cant do. It gave insights in to how to proceed further to integrating with an e-commerce solution.
Further guidance of what is needed to achieve the full e-commerce experience can
be found here.
Happy coding :)