🔰 Antes de empezar: Este artículo asume que ya estás familiarizado con el uso de la API de JavaScript de iPaper. Si tienes dudas de cómo funciona para integrar tus Flipbooks con tu sitio web, visita nuestra guía.
Utilizar la integración de JavaScript para conectar tu Flipbook con una plataforma de comercio en línea abre muchas posibilidades para una experiencia de compra fluida, como permitir al usuario interactuar directamente con el carrito de compra.
Para entender mejor una integración con JavaScript, explicaremos cómo funciona la comunicación entre la ventana principal y el Flipbook. Ensamblaremos un fragmento de código corto que consistirá en la API, un evento de devolución de llamada especial y el script de inserción, y mostraremos la información del producto en un cuadro de diálogo de alerta.
¿Cómo funciona una integración de JavaScript?
Como se muestra en el diagrama, esta implementación funciona como una comunicación de dos partes entre la ventana principal (donde se incrusta el Flipbook) y el Flipbook embebido.
Para lograr esto, compilaremos un script a partir de tres partes:
Script de la API del Flipbook de iPaper
Evento
onProductAddediFrame embebido
El Script de Incrustación
Para establecer la comunicación entre la ventana principal y el Flipbook que vamos a incrustar, necesitamos obtener el script de la API de Flipbook. Puedes encontrar el script de la API de tu Flipbook dando clic derecho en el nivel de cuenta desde la vista del Flipbook y seleccionando "Get Flipbook API script".
El evento onProductAdded
El siguiente fragmento de código activará el evento onProductAdded, que será enviado desde el Flipbook dentro del iFrame a la API de JavaScript mediante window.postMessage().
Una vez que la API reciba este evento, invocará un callback en la ventana principal, que mostrará una alerta con la siguiente información del producto:
|
| Título del producto |
|
| Descripción del producto |
|
| Id del producto |
|
| Precio del producto |
|
| Página en la que se encuentra el producto |
|
| Cantidad de producto agregada al carrito |
Incrustar el iFrame
Para finalizar nuestro script, agregaremos la URL del Flipbook que queremos incrustar:
<body>
<iframe src="https://library.ipaper.io/demo/demo-catalog-shop-embed/" style="width: 100%; height: 1000px;"></iframe>
</body>
💡Para más información sobre Flipbooks en iFrames, consulta nuestra guía.
Al combinar todo, obtenemos el siguiente script, listo para ser usado:
<!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>
Qué sucede aquí?
Cuando un usuario hace clic en un botón CTA de producto, se dispara el evento onItemAdd, que devuelve la información del producto en una alerta.
Este fue un ejemplo básico de lo que la API de JavaScript v3 de Flipbook puede hacer. Te brinda una idea de cómo proceder con la integración en una solución de comercio electrónico.
💡 Para lograr una experiencia de e-commerce completa, consulta nuestra guía avanzada aquí.