Carrusel de productos: zapatillas deportivas (TrainARs)

Resumen de la experiencia 📖

En esta experiencia mostramos un ejemplo de un carrusel de productos deportivos, representando una experiencia de tipo e-commerce, en la que el usuario puede reconocer una imagen de un anuncio, flyer o catálogo de ropa, y comenzar una experiencia en web AR para visualizar los diferentes productos. Además se incluye cierta lógica que permite modificar el aspecto de la experiencia web, incluyendo botones para añadir elementos a un carrito de la compra, y el resultado de dichas acciones, en la interfaz de usuario.

La escena se compone de varios modelos 3D de cada uno de los productos, así como de elementos gráficos para representar los componentes de la pantalla: botones, banner, carrito, etc.. 

Además de ello se hace uso del editor de código online para incluir la lógica de los botones de navegación, así como del botón de añadir al carrito de la compra. La programación de los botones se hace mediante un bloque de código dentro del editor de JavaScript.

Usos y beneficios 🌱

Este tipo de experiencias con interacción dentro de un entorno e-commerce son experiencias que aportan un valor añadido a la actual experiencia de compra digital. Es un modo de aprovechar recursos ya existentes que se generan como parte de todo proceso de marketing y comercialización a nivel gráfico. Mediante este tipo de experiencias se añade un nivel más de interacción en este tipo de dinámicas y anuncios, para que el cliente tenga una experiencia de compra novedosa

Con estas experiencias de web AR asociadas a ventas y e-commerce se pueden conseguir numerosos beneficios para el comprador y la empresa:

• Reducción de tiempos en toma de decisiones por parte del comprador: visualiza el producto con mayor detalle.
• Mayor trazabilidad de los anuncios mediante la inclusión de herramientas de analítica digital.
• Reducción de peticiones de devolución de productos.
• Incremento de los canales de venta dentro del proceso de branding asociado al lanzamiento de nuevos productos.

Características y consejos💡

Las siguientes características de Onirix se utilizan en esta experiencia:

Fichas de contenido

Fichas con información extra asociada al contenido de RA (título, imagen y descripción) que aparecen asociadas a cada uno de los productos, zapatillas deportivas en este caso.

Acceda a la documentación de las fichas de contenido.

Editor de código: HTML, CSS y JavaScript

Utilizamos el editor de código para añadir diferentes bloques personalizados a la escena con sección HTML, y CSS para darles algo de estilo: 

• Bloque superior con logo de la marca
• Icono superior del carrito de la compra
• Bloque inferior con los botones de navegación, el nombre del producto y los botones de navegación.

En la parte de JavaScript programamos el cambio de contenido en función de la pulsación de los botones de navegación, así como el cambio de estado en función del añadido de productos al carrito de la compra.

Acceda a la documentación del editor de código online.

Escena de seguimiento de imágenes (image tracking)

En este caso una imagen de captación de clientes (poster, flyer, marquesina de autobús) hace las veces de marcador. En cualquier lugar el usuario podrá interactuar con este tipo de anuncios para entrar en un siguiente nivel de relación con la tienda y las marcas de productos. 

Acceda aquí a la documentación sobre las escenas de image tracking.