Store Theme VTEX U

VTEX U Store Theme es un modelo básico de tienda basado en VTEX IO Store Framework, con fines netamente educativos.

Debe usarse solo cuando desee iniciar un nuevo tema de tienda sin ninguna configuración preestablecida.

Mientras el Store Theme base de vtex da un modelo definitivo, este tema estará disponible para poder crear un esquema desde cero.

Previsualización

Screenshot del home del sitio.

Configuración

Paso 1 - Configuración básica

Ingrese a la guía básica de configuración de VTEX IO y siga los pasos.

Al final de la configuración, debería tener instalada la interfaz de línea de comandos de VTEX (Toolbelt) junto con un workspace para desarrolladores en el que pueda trabajar.

Paso 2 - Clonación del repositorio de IT Globers Store Theme.

Use este repositorio como plantilla para crear un repositorio de forma local para poder comenzar a trabajar de manera efectiva en él

Luego, acceda al directorio del repositorio usando su terminal.

Paso 3 - Editando el archivo Manifest.json

Una vez en el directorio del repositorio, es hora de editar el archivo manifest.json de Store Theme de IT Globers.

Una vez estemos en el archivo, deberá remplazar los valores de vendor y account. vendor es el nombre de la cuenta en la que estamos trabajando y account es lo que desee colocar de nombre para su tema. Por ejemplo:

{
  "vendor": "itglobers",
  "name": "store-theme",
}

Paso 4 - Instalando las apps requeridas

Para usar Store Framework y trabajar en el tema de su tienda, es necesario tener vtex.store-sitemap y vtex.store instalados.

Ejecute vtex list y compruebe si esas aplicaciones ya están instaladas.

Si no es así, ejecute el siguiente comando para instalarlos: vtex install vtex.store-sitemap vtex.store -f

Paso 5 - Desinstalar cualquier tema existente

Al correr vtex list, puede verificar si hay algún tema instalado.

Es común tener ya instalado un vtex.store-theme cuando inicia el proceso de desarrollo front de la tienda.

Por lo tanto, si lo encuentra en la lista de la aplicación, copie su nombre y utilícelo junto con el comando vtex uninstall. Por ejemplo:

vtex uninstall vtex.store-theme

Paso 6 - Ejecute y obtenga una vista previa de su tienda

Entonces ha llegado el momento de cargar todos los cambios que realizó en sus archivos locales a la plataforma. Para eso, use el comando vtex link.

Si el proceso se ejecuta sin errores, se mostrará el siguiente mensaje: App linked successfully. Luego, ejecute el comando vtex browse para abrir una ventana del navegador con su tienda vinculada.

Esto le permitirá ver los cambios aplicados en tiempo real, a través de la cuenta y el espacio de trabajo en el que está trabajando.

Dependencies

odos los componentes de la tienda que ve en este documento también son de código abierto. Listo para producción, puede encontrar esas aplicaciones en esta organización de GitHub.

Store framework es la base para crear cualquier tienda usando VTEX IO Web Framework.

• Store

Store component dependencies

• Header
• Footer
• Slider Layout
• Shelf
• Telemarketing
• Menu
• Login
• Minicart
• Category Menu
• Product Summary
• Breadcrumb
• Search Result
• Product Details
• Store Components
• Order Placed

Dependencias Peer store component

Dependencias Custom component

Desarrollos realizados en el tema:

1. Se prepara la base del tema
2. Se instala el builder assets para trabajo de imágenes