El frontend de una tienda online, también conocido como storefront, es la interfaz visual e interactiva de la tienda a través de la cual los clientes interactúan con los productos y realizan acciones, como navegar por las categorías, buscar y agregar productos al carrito.
El propósito de este artículo es brindar orientación en la elección de la tecnología para construir el storefront, detallando los ajustes necesarios para cada opción, considerando los siguientes puntos:
- Tecnologías de desarrollo de storefront de VTEX.
- Principales funcionalidades de cada tecnología.
- Etapas de desarrollo.
La implementación del frontend es una etapa centrada en la definición de las tecnologías a implementar, en función de las necesidades del negocio relacionadas con el storefront.
El frontend puede ser implementado tanto por el equipo de desarrollo interno de la empresa como por nuestros partners de implementación. Los usuarios con acceso al Admin VTEX pueden consultar la lista de nuestros partners a través del Partner Portal (exclusivo Brasil).
Antes de empezar
Antes de empezar a implementar el frontend, se recomienda que la tienda complete las siguientes fases de configuración:
| Fase | Descripción |
|---|---|
| Definición de la arquitectura de la tienda y la estrategia de ventas | El equipo define la arquitectura de la tienda VTEX en función de las estrategias y necesidades de tu modelo de negocio. Más información en el artículo Cuentas y arquitectura. |
| Configuración de roles | El equipo configura los roles de acceso necesarios de cada usuario para la utilización de la plataforma VTEX. Más información en el artículo Roles. |
| Configuración del catálogo | El equipo configura el catálogo con los productos, el árbol de categorías y la información relacionada, como descripciones, imágenes y precios, para completar y probar la tienda, incluyendo recursos como las páginas de lista de productos (PLP), funcionalidad de búsqueda, las páginas de detalles de producto (PDP) y checkout. La falta de catálogo puede resultar en pruebas incompletas y problemas en la integración de datos, lo que retrasa la implementación. Más información en el artículo Módulos de VTEX I. |
| Definición de las aplicaciones necesarias para la operación de la tienda | El equipo define las aplicaciones, tanto nativas como de terceros, necesarias para la operación de la tienda. Hay una lista de aplicaciones nativas y de terceros para tiendas que se construyan usando Store Framework. Más información en el artículo VTEX IO Apps. |
La fase de desarrollo puede llevarse a cabo simultáneamente con otras fases de las integraciones de backend y configuración de módulos, como por ejemplo, la configuración de medios de pago y ajustes logísticos. Esto va a depender del tipo de arquitectura y planificación elegida para la tienda VTEX y deberá ir acompañado de la agencia implementadora o del soporte VTEX.
Tecnologías de desarrollo de frontend de VTEX
VTEX cuenta con tres diferentes tecnologías para el desarrollo del storefront: FastStore, Store Framework y CMS Portal Legado. CMS Portal Legado fue la primera tecnología de VTEX para la construcción de storefronts. Este sistema, basado en HTML, CSS y JavaScript, centraliza todo el proceso de desarrollo y edición de código a través del Admin VTEX.
Aunque algunas tiendas aún lo utilizan, CMS Portal Legado es una tecnología heredada y ya no está disponible para tiendas que inician su trayectoria con VTEX.
Las siguientes secciones tratan sobre las principales características y funcionalidades de FastStore y Store Framework.
FastStore
FastStore es una innovación tecnológica diseñada para permitir a los equipos de desarrollo crear tiendas enfocadas en el desempeño y la estabilidad. Además, destaca por su facilidad de mantenimiento, incluso para editar páginas del sitio web de la tienda.
Esta tecnología es un toolkit open-source basado en React y en la arquitectura Jamstack. Para más información, consulta el portal de documentación de FastStore.
Principales funcionalidades de FastStore
La siguiente tabla muestra algunas de las principales funcionalidades de FastStore:
| Funcionalidad | Descripción |
|---|---|
| Starter | Plantilla funcional diseñada para el desarrollo rápido de la tienda, que ya integra los componentes de FastStore UI. Incluye páginas como páginas de inicio, páginas de lista de productos (PLP), páginas de detalles de productos (PDP) y también la funcionalidad minicart. |
| FastStore UI | Biblioteca de componentes para ecommerce que ofrece recursos y estilos básicos para agilizar la implementación y personalización de storefronts. |
| Tecnologia headless | Proceso de personalización que separa el código de la tienda, creado por el equipo de desarrollo, del código base suministrado por VTEX. Esto simplifica las actualizaciones del frontend de la tienda, haciendo que no impacten al código personalizado. |
| Integración con GitHub | Los equipos de desarrollo pueden gestionar todo el código del storefront mediante GitHub. |
| Headless CMS | Sistema de gestión de contenido (CMS) que permite editar y crear nuevas páginas y previsualizar los cambios en el contenido. |
| Verificaciones automáticas | Se llevan a cabo de forma continua y automática pruebas funcionales y evaluación del desempeño de la tienda y de la calidad del código para detectar impactos de velocidad y bugs durante toda la fase de desarrollo del storefront. |
| Integración con Intelligent Search | Funcionalidad de autocompletar en la barra de búsqueda, junto con sugerencias de búsqueda y productos basados en preferencias configurables. |
| Integraciones con Checkout, My Account y Login | Integración con otras fases de la jornada de compra del cliente. Las tiendas VTEX previamente desarrolladas con Store Framework pueden mantener los ajustes relacionados con Checkout, My Account y Login al migrar a FastStore, ya que ambas se benefician de la misma infraestructura. |
Store Framework
Store Framework es una solución tecnológica establecida de framework para implementar storefronts low-code con un enfoque en el modelo composable commerce, es decir, el framework permite combinar diferentes apps de VTEX IO para crear un storefront.
En esta tecnología, la implementación y el lanzamiento de la tienda se centra en componentes preconstruidos, también conocidos como bloques, y en la posibilidad de personalizar estos componentes en función de las necesidades del modelo de negocio. Este framework se basa en:
- React
- TypeScript
- Node.js
- GraphQL
Para más información, consulta el artículo What is VTEX Store Framework.
Entorno de desarrollo
Cuando se habla de implementación frontend, cabe recordar que VTEX IO no es una tecnología de construcción de storefront, sino una plataforma de desarrollo. Store Framework es una tecnología de construcción de storefront ejecutada por VTEX IO, que a su vez es una solución de desarrollo y ejecución basada en la nube para aplicaciones personalizadas y storefronts.
Esto significa que cuando trabajas con VTEX IO, desarrollas tu código localmente. Sin embargo, en lo que respecta a implementar y ejecutar la tienda, además de encargarse del proceso de deploy, VTEX IO gestiona la infraestructura, CI/CD y la seguridad. La siguiente imagen muestra cómo se relacionan estos conceptos entre sí:
Principales funcionalidades de Store Framework
La siguiente tabla muestra algunas de las principales funcionalidades de Store Framework:
| Funcionalidad | Descripción |
|---|---|
| Starter | Plantilla funcional diseñada para el desarrollo rápido de la tienda, que ya integra los componentes preconstruidos. |
| Componentes preconstruidos | Componentes nativos basados en React. |
| Arquitectura modular | Personalización y reutilización del código de elementos de la interfaz para lanzar y replicar tiendas rápidamente. |
| Workspaces y entornos de prueba | Permite crear distintas versiones de la tienda y probarlas antes para hacer cambios con seguridad. |
| Site Editor | Sistema de gestión de contenido (CMS) para editar plantillas y crear nuevas páginas en el sitio web de la tienda. |
| Pruebas A/B nativas | Permite probar y validar la versión de la tienda que tiene las tasas de conversión más altas. |
| Integración con Intelligent Search | Funcionalidad de autocompletar en la barra de búsqueda, junto con sugerencias de búsqueda y productos basados en tus preferencias. |
| Progressive Web App (PWA) | Permite experiencias similares a las de una aplicación nativa en cualquier dispositivo con tecnología preparada para PWA. |
| Cross-border | Posibilita que una multitienda VTEX opere en diferentes países, adaptando su estrategia de manera individualizada para cada uno de ellos. |
| Integración con Checkout, My Account y Login | Integración con otras fases de la jornada de compra del cliente. |
Elegir la tecnología frontend
A la hora de elegir entre Store Framework y FastStore, el equipo debe evaluar las necesidades específicas del proyecto y considerar la experiencia del equipo con ambas tecnologías.
Store Framework es una opción más madura, que ofrece una estructura flexible adecuada para casos de uso complejos, así como soporte para tiendas que operan a escala internacional y con varios idiomas. Para las tiendas B2B, Store Framework es una excelente opción, ya que ofrece el B2B Suite, una aplicación que permite el manejo de organizaciones, permisos de la tienda virtual y configuraciones de pago para relaciones comerciales B2B.
FastStore es una alternativa más reciente en proceso de evolución, enfocada en el desempeño de la tienda. Esta solución ofrece una experiencia de carga rápida, que es esencial para mantener el interés de los visitantes de la tienda y reducir las tasas de abandono de carrito. FastStore es la tecnología más recomendada para casos de uso más simples enfocados en desempeño.
El equipo de soporte de VTEX puede ayudarte a elegir una de las tecnologías de storefront disponibles.
En la siguiente tabla se comparan las dos tecnologías según sus principales funcionalidades:
| Funcionalidad | Store Framework | FastStore |
| Starter (plantilla inicial) | Store Theme es la plantilla inicial que el equipo puede utilizar como base para iniciar el proyecto de tienda o comenzar desde cero. | FastStore Starter se disponibiliza al finalizar el Onboarding de FastStore, lo que permite al equipo comenzar el proyecto con una plantilla base centrada en desempeño. |
| Desempeño | Los recursos SSR (Server Side Rendering) generan todo el HTML de una página en el servidor en respuesta a un request de la página, mientras que la SPA (Single Page Application) carga elementos como el header solamente cuando la página se ha cargado. | Posibilidad de máximo desempeño, ya que utiliza la arquitectura Jamstack para crear las páginas del sitio web de la tienda con antelación, lo que hace que la entrega del sitio web sea más rápida y eficiente en términos de recursos. |
| Tech Stack |
|
|
| Personalización de componentes | Flexible y fácil de personalizar. | Permite personalizar los componentes nativos y garantiza el desempeño de la tienda basándose en las mejores prácticas. |
| Gestión del código | Utiliza workspaces y la arquitectura VTEX IO para distintas versiones, actualización y rollback (reversión) de componentes y aplicaciones. | Utiliza GitHub y el concepto de branch para colaboración. Los usuarios con autorización para acceder al repositorio del storefront en GitHub pueden ver y trabajar en el código. |
| Comunidad de soporte | ||
| Monitoreo del desempeño y Analytics |
|
|
| Sistema de gestión de contenido (CMS) | Compatible con Site Editor. | Compatible con Headless CMS. |
Fases de desarrollo
Antes de lanzar la tienda en producción, y antes del go-live, enumera los ajustes esenciales y las características que deben incluirse en el storefront. Estas definiciones ayudan a establecer el Producto Mínimo Viable (PMV) para el storefront. En los siguientes temas se describen:
Las recomendaciones a continuación abordan configuraciones básicas de storefront. Dependiendo de la arquitectura elegida para la operación de la tienda, pueden ser necesarias otras configuraciones.
Desarrollo con FastStore
El equipo de desarrollo debe iniciar un nuevo proyecto con FastStore a través del proceso de Onboarding. Al final de este proceso, el equipo tendrá una tienda básica y funcional basada en FastStore Starter. Una vez hecho esto, ya se habrán implementado los requisitos básicos de la página:
- Página de inicio
- Página de lista de productos (PLP)
- Página de detalles de producto (PDP)
- Minicart
Requisitos para un PMV de FastStore
A continuación se presentan los requisitos de cada tema:
- Catálogo
- VTEX Intelligent Search
- Integración con Headless CMS
- Configurar Headless CMS en la cuenta
- Definir content types y las secciones que estarán disponibles
- Crear y editar páginas utilizando Headless CMS en el Admin VTEX
- Página de inicio
- Editar los componentes y estilos ya presentados en Starter
- Página de inicio de sesión
- Integrar con VTEX Login
- Editar los componentes y estilos ya presentados en Starter
- Página de lista de producto (PLP)
- Editar los componentes y estilos ya presentados en Starter
- Página de detalles de producto (PDP)
- Editar los componentes y estilos ya presentados en Starter
- Configuración de minicart
- Editar los componentes y estilos ya presentados en Starter
- Checkout
- Integrar con VTEX Checkout
- Integrar con VTEX Order Placed y My Account
- Logística
- Pagos
- Desempeño y SEO
- Optimizar el desempeño del sitio web de la tienda utilizando herramientas tecnológicas
- Métricas
- Configurar o módulo Analytics
Desarrollo con Store Framework
El equipo de desarrollo debe iniciar un nuevo proyecto con Store Framework clonando y asociando el Store Theme en un workspace de desarrollo. Store Theme es una plantilla funcional básica para iniciar una tienda con componentes esenciales y páginas como:
- Página de inicio
- Página de lista de productos (PLP)
- Página de detalles de producto (PDP)
Requisitos para un PMV de Store Framework
A continuación se presentan los requisitos para cada tema:
- Catálogo
- VTEX Intelligent Search
- Página de inicio
- Editar los componentes y estilos ya presentados en Starter
- Página de inicio de sesión
- Integrar con VTEX Login
- Editar los componentes y estilos ya presentados en Starter
- Página de lista de producto (PLP)
- Editar los componentes y estilos ya presentados en Starter
- Página de detalles de producto (PDP)
- Editar los componentes y estilos ya presentados en Starter
- Configuración de minicart
- Editar los componentes y estilos ya presentados en Starter
- Logística
- Pagos
- Desempeño y SEO
- Optimizar el desempeño del sitio web de la tienda utilizando herramientas tecnológicas
- Métricas
- Configurar Google Tag Manager