Using the JavaScript 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 our demo Flipbook:
🔰 Before we get started
This article assumes that you already have an understanding of using the iPaper JavaScript API. If you're unsure on how this works to integrate your Flipbooks with your website, take a look at our guide, below:
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.
How JavaScript integration works
Before we dive into the coding part of this tutorial let's 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 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:
iPaper Flipbook API script
onProductAddedeventiFrame 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. You can find your Flipbook API script by right-clicking on the account level from the Flipbook view, and selecting Get Flipbook API script.
The onProductAdded event
The following snippet will fire the onProductAdded 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.
|
| Product title |
|
| Product description |
|
| Product Id |
|
| Product price |
|
| Page where the product is located on |
|
| Quantity of product to ad |
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>
<script src='https://cdn.ipaper.io/flipbooks/api/v3/latest.js'></script>
</head>
<body><iframe id="myFlipbook" src="https://viewer.ipaper.io/code-examples/javascript/?page=2" style="width: 100%; height: 500px;" data-ipaper></iframe></body>
<script>
const myIframe = document.getElementById('myFlipbook');
// Create a new V3 API instance with the iframe
const myApiInstance = iPaperJsApi(myIframe, 3);
myApiInstance.basket.onProductAdded((product) => {
// Use template literals to display the product information in an alert dialog box
alert(`Product Information:
Title: ${product.title}
Description: ${product.description}
Product ID: ${product.productId}
Price: ${product.price}
Quantity: ${product.quantity}`);
});
</script>
</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 v3 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 :)