Personalización Avanzada del Checkout de VTEX

Introducción

VTEX es una plataforma de comercio electrónico tipo SaaS que permite a todo tipo de empresas implementar sus tiendas en línea rápidamente. En este contexto, una de las etapas más importantes de cualquier comercio electrónico es el checkout. Es en esta parte del proceso donde buscamos ofrecer herramientas que permitan lograr una personalización más profunda y avanzada, superando las limitaciones predeterminadas de VTEX empleando la aplicación Checkout UI Custom que nos proveen. Con nuestro enfoque, será posible crear aplicaciones complejas, aprovechando todo el poder de la componentización.

Visón Técnica

Checkout PRO DevKit es una aplicación que se ha desarrollado empleando un flujo de trabajo con herramientas como Vite, React, Vitest, SonarQube, entre otros. Además, al ser versátil y de código libre, ofrece la posibilidad que puedan modificarlo empleando por ejemplo Tailwind, Styled Components o la librería de UI de su preferencia. Y en el caso de que su equipo de desarrollo tenga conocimientos en otras tecnologías como Vue en vez de React, se puede adaptar el workflow a dicha tenología dado que empleamos Vite que es compatible con Vue, Vanilla, React, Solid, Qwik, y otros.

Esta guía te mostrará cómo implementarlo paso a paso para mejorar la experiencia de compra de tus clientes.

Requisitos previos

•Conocimientos básicos de React y TypeScript
•Node.js versión 16 o superior
•Acceso administrativo a tu cuenta VTEX
•CLI de VTEX instalado globalmente, ver guía oficial
•Instalar la aplicación Checkout Customizer en tu tienda desde VTEX App Store
Esta aplicación agrega una capa de personalización por parte del equipo de VTEX, más adelante se podrá desinstalar si así lo deseas.

1. Configuración Inicial

Primero, necesitamos preparar nuestro ambiente de desarrollo. Ejecuta estos comandos en tu terminal:

# Login en tu cuenta VTEX
vtex login {account-name}

# Crear un nuevo workspace
vtex use {workspace-name}

# Instalar la aplicación checkout-ui-custom
vtex install vtex.checkout-ui-custom

# Instalar la aplicación checkout-ui-settings 
# Ejecuta el comando y selecciona la opción 'checkout-ui-settings' 
vtex init

2. Instalación de Checkout PRO DevKit

Una vez configurado el ambiente, procedemos a instalar Checkout PRO DevKit:

# Clonamos la aplicación desde Ignitoz
git clone https://github.com/IgnitozCode/checkout-pro-devkit

# Ingresamos al proyecto
cd checkout-pro-devkit

Esta aplicación de Ignitoz reemplaza a la aplicación que se crea desde VTEX CLI seleccionando la opción `checkout-ui-settings` que es la que por defecto nos brinda la plataforma, puede visitar su repositorio aquí.

3. Personalización Standard

Ahora es momento de personalizar el checkout. Ubicados en nuestra carpeta raíz ejecutamos el siguiente comando, esto hará que se sincronicen los cambios de los archivos dentro del directorio /checkout-ui-custom directamente en la plataforma VTEX:

vtex link

Los archivos indicados por VTEX a modificar son:

/checkout-ui-custom/checkout6-custom.cssPara estilos personalizados
/checkout-ui-custom/checkout6-custom.jsPara lógica personalizada en JavaScript

Los cambios que hagamos en esos archivos se sincronizarán directamente en la plataforma VTEX y para verificar los cambios debes acceder al checkout de tu tienda VTEX, empleado el workspace creado en pasos anteriores, ejemplo:

https://{worspace-name}--{account-name}.myvtex.com/checkout

4. Personalizando con Checkout PRO DevKit 🚀

Ahora vamos a usar el workflow avanzado que plateamos empleando Vite y React. Ubicándonos dentro de la carpeta /app ejecutamos lo siguiente:

# Instalamos las dependencias con npm o 
# yarn(también puedes adaptarlo)
yarn install

# Iniciamos el proyecto en modo desarrollo
yarn dev

Estos pasos previos harán que los archivos /checkout-ui-custom/checkout6-custom.css y /checkout-ui-custom/checkout6-custom.js se generen de manera automática. Asegúrate que el comando vtex link siga en ejecución en la carpeta raíz.

5. Despliegue

Finalmente, despliega tus cambios generando los builds e instalando en VTEX.

# Generar los archivos optimizados
yarn build

# Instalar en VTEX
vtex install {vendor}[email protected]

# Desplegar en VTEX
vtex deploy

⚠️ Nota:El valor de vendor a usar será el nombre de la cuenta que desees usar, típicamente el account name de tu ambiente VTEX y la versión 0.0.1 variará según los cambios que realices y está en tu completo control antes de desplegar en producción. Y el val

6. Despedida

¡Felicidades! Has completado la guía de personalización del checkout de VTEX. Esperamos que esta información te haya sido de gran ayuda y que puedas implementar todas las mejoras en tu tienda. Si tienes alguna duda o necesitas asistencia, no dudes en contactarnos a [email protected]. ¡Buena suerte y sigue creando experiencias de compra increíbles!

Checkout PRO DevKit: Guía de Personalización