Rompiendo las barreras del checkout de VTEX con ReactJS

VTEX es una plataforma de e-commerce SaaS (Software as a Service) que ofrece varios beneficios a los minoristas que buscan expandir su negocio en el universo virtual.

Con la alta búsqueda de soluciones diferenciadas para cada cliente, la implementación de complejas personalizaciones de front-end dentro del e-commerce se ha vuelto esencial.

En los últimos años, VTEX creció considerablemente e implementó varias novedades, lo que le permitió cumplir con las expectativas del mercado. Para las personalizaciones dentro del checkout, VTEX proporciona el Checkout UI Custom que se puede habilitar fácilmente en la tienda y luego implementar y complementar por parte de los desarrolladores front-end. Sin embargo, esta herramienta todavía tiene dificultades para mantenerse al día con algunas demandas más específicas de los consumidores.

Durante la consultoría para un cliente del segmento de Grocery, tres desarrolladores full stack del equipo de Corebiz (Enzo Spagnolli, Gabriel Nobrega y Gustavo Amemiya) crearon una funcionalidad muy interesante dentro del checkout de VTEX, denominada Super Checkout, para facilitar el día a día de quien funciona con la plataforma.

En este artículo, hablaremos sobre esta solución, presentaremos sus beneficios, obstáculos y lo que aún está en el horizonte de esta nueva tecnología. Continúa leyendo para obtener más información al respecto.

El mayor problema con el checkout actual de VTEX

Desde el punto de vista tanto de los comerciantes como de los desarrolladores front-end, el mayor problema es la dificultad de progresar con personalizaciones más profundas. Lo que puede afectar las tasas de conversión de la tienda y la eficiencia del trabajo de los empleados, respectivamente.

El Checkout UI Custom se compone solo de un archivo JS y un CSS, es decir, el desarrollador se limita a usar solo JavaScript puro y JQuery para satisfacer las necesidades de los clientes, en lugar de poder desarrollar con tecnologías más populares y ricas como react, angular, vue, entre otros.

Además, con el tiempo estos dos archivos JS y CSS empiezan a crecer, por lo que en algún momento terminarán convirtiéndose en algo desorganizado y difícil de mantener.

Super Checkout y sus beneficios

Aquí es donde entra Super Checkout, una aplicación que ofrece varios beneficios, tales como:

• Soporte para ReactJS y sus tecnologías (componentes, hooks, context api, etc.);
• Soporte para Typescript;
• Soporte para SCSS;
• Soporte para código heredado (las personalizaciones ya implementadas seguirán funcionando sin problemas);
• Fácil implementación de imágenes SVG;
• Hash de integridad de archivos (para la comparación de versiones de checkout);
• Mejor organización de archivos.

Super Checkout utiliza webpack para compilar todas las personalizaciones en los archivos personalizados de Checkout UI Custom de VTEX (originalmente un archivo JS y un CSS).

En pocas palabras, los desarrolladores que ya han tenido contacto con stacks que incluyen ReactJS se “sentirán como en casa”. Cada componente está separado del archivo original y cada uno de ellos tiene su archivo TSX y SCSS, proporcionando un nivel superior de organización de archivos.

Además de todas estas características, también es posible instalar y utilizar cualquier biblioteca de terceros como Swiper y React Bootstrap.

Soluciones creadas con Super Checkout

Para nuestro cliente del segmento de Grocery, fue posible crear personalizaciones complejas de manera muy eficiente (en solo unos días y utilizando un solo desarrollador) gracias a Super Checkout. Por ejemplo, el escaparate de cross-selling a continuación:

Es un vitrina de niveles complejos de interacción y con varias reglas comerciales detrás de escena que aumentaron considerablemente la tasa de conversión de la tienda al abrir una gama de discovery de nuevos productos para los clientes.

Otra personalización de alto impacto implementada para el mismo cliente fue el nuevo layout de los slots de entrega.

A la izquierda está el componente nativo de VTEX y a la derecha el nuevo. La nativa requiere dos clics para seleccionar la fecha de entrega o retiro de los productos, mientras que la segunda, además de requerir solo un clic, también es más clara en el suministro de información como precio de envío y tiempos de entrega. Esta última personalización es aún más compleja, ya que cambió el comportamiento de un recurso existente en el checkout.

¿Qué obstáculos existen todavía?

Incluso con toda esta transformación, todavía estamos dentro del alcance de VTEX. En otras palabras, seguirán existiendo algunos problemas porque todo se hace a partir de la manipulación de la interfaz ya existente del checkout de la plataforma.

Como Super Checkout aún no es una tecnología Headless, no sería posible, por ejemplo, deshabilitar funciones que ya están implementadas. Si la personalización es para cambiar el comportamiento de algo que ya existe, será necesario realizar ub workaround, lo que requerirá una curva de aprendizaje más larga de lo esperado.

Finalmente, Super Checkout incluye varias tecnologías en un solo paquete. Por lo tanto, un factor que necesitará más atención es el tamaño del paquete cuando se compila.

El futuro de Super Checkout

¡El cielo es el límite! Super Checkout es un proyecto de código abierto y puede ser utilizado y mejorado por todos los desarrolladores del mundo. ¡Cualquiera puede contribuir!

Además, el Super Checkout del cliente que usamos como referencia en este artículo, tiene características adicionales como pruebas automatizadas, llamadas de renderizado facilitadas, una biblioteca de utilidades y funciones helpers, entre otras que aún no están presentes en la versión publicada, pero que se pueden agregar más tarde.

Invitamos a todos los desarrolladores de VTEX a visitar la página de github y probar esta nueva función, si es posible, informar cualquier problema y sugerir nuevas funciones. Por lo tanto, esperamos que el proyecto se siga actualizando y mejorando con el tiempo.

Guilherme Arantes, Desarrollador Front-end del equipo de Corebiz, usó el repositorio recientemente en el proyecto en el que trabaja y contó un poco sobre su experiencia. ¡Compruébalo!

“Bueno, aquellos que están acostumbrados al checkout heredado saben lo difícil que es hacer cambios e implementaciones dentro de este entorno, principalmente por razones de seguridad. Este boilerplate de vtex-react-checkout nos brinda la posibilidad de realizar implementaciones a través de React sin dañar los scripts heredados y manteniendo el nivel de seguridad. Además, debido a que es posible usar hooks y el contexto de React, facilitó el intercambio de información entre la tienda-checkout y los estados de cambio que componían el checkout, sin mencionar que pudimos hacer implementaciones que agregan más valor al ambiente. Entonces, en general, creo que este modelo ayudó mucho en términos de flexibilidad y ayudará aún más, especialmente en términos de reglas comerciales para los clientes”.GUILHERME ARANTES CANELLA – DESARROLLADOR FRONT-END EN COREBIZ

Espero que este contenido haya sido útil para tu día a día como desarrollador VTEX. Si deseas seguir el nuevo contenido técnico que aparecerá aquí, no dejes de suscribirte a nuestro newsletter.