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 how the above example was achieved, we will dive into how it works 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.

  1. The embed script

  2. onItemAdd event

  3. iFrame 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.

title

string

Shop item title

description

string

Shop item description

productId

string

Shop item product ID

price

number

Shop item price

quantity

number

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 :)

Did this answer your question?