En algunos casos, puede que quieras combinar la comodidad del widget de checkout estándar de Ventrata con la flexibilidad de tu propio carrito personalizado. Puedes hacerlo dejando que los clientes utilicen el widget hasta que lleguen a la Contact Details (Detalles de contacto) página, y luego cambiar a un carrito personalizado desde allí.
Este enfoque te brinda más control sobre la experiencia de checkout sin necesidad de construir todo desde cero.
Cuándo cambiar
El momento ideal para cambiar es después de que el cliente seleccione sus productos y configure su carrito, pero antes de que ingrese cualquier información personal o de pago. Esto sucede cuando el flujo de checkout llega a la Contact Detail (Detalle de contacto) página.
En este punto, el widget ha recopilado todos los detalles relacionados con el producto y eres libre de redirigir al cliente a un carrito personalizado.
Cómo funciona
De forma predeterminada, el widget de checkout no redirige a los clientes a páginas externas. Para crear un flujo híbrido, necesitas escuchar un evento personalizado y gestionar la redirección manualmente.
Evento: ventrata-open-external-cart
Este evento personalizado se dispara automáticamente por el widget cuando el cliente llega a la Contact Details (Detalles de contacto) página. En este punto aún no se ha recogido información personal.
Utiliza este evento para iniciar una redirección a tu carrito personalizado:
document.addEventListener('ventrata-open-external-cart',
({detail: {id}}) =>
alert(`order ${id} created and flow is finished, now you can redirect`
)
)📒 NOTA
Reemplaza el alert ( .. ) con tu lógica real de redirección.
Si necesitas los datos de contacto del cliente
Si tu flujo personalizado requiere recopilar la información de contacto del cliente, deberás escuchar dos eventos, en este orden específico:
ventrata-open-external-cart- se dispara cuando el checkout llega a la Contact Details (Detalles de contacto) página.ventrata-order-updated- se dispara cuando el pedido se actualiza, incluida la adición de los datos de contacto.
📒 NOTA
El primer evento indica que el usuario ha llegado al paso de contacto, mientras que el segundo confirma que sus datos están disponibles. Redirigir demasiado pronto puede resultar en datos faltantes o incompletos.
Redirige solo después de que los datos del cliente estén disponibles.
Ventajas de un enfoque híbrido
🎨 Personalización y control del diseño
Crea una interfaz personalizada, agrega pasos adicionales o divide el proceso en varias páginas.
🔄 Enriquecimiento de datos previo al checkout
Añade lógica personalizada antes de recopilar la información del usuario, como comprobar la disponibilidad con sistemas externos o etiquetar el carrito con datos adicionales.
🌍 Localización o cumplimiento legal
Implementa flujos específicos por región o pasos de consentimiento legal.