Store Framework 101

Antes de comenzar a poner manos a la obra, veamos algunos conceptos importantes a los que se hará referencia de forma recurrente a partir de ahora.

Introducción

Store Framework es una herramienta commerce low-code de construcción de frentes de tienda únicas y personalizadas.

El flujo de construcción es mediante la personalización de un tema que se puede trabajar en diferentes workspaces sin impactar el ambiente de producción.

Tema

Un tema es, esencialmente, un arreglo de bloques y sus posiciones. En este se definen todas las personalizaciones, posiciones y estilos de cada uno de los bloques que lo componen. También es posible declarar nuevas páginas en un tema que, en el futuro, pueden representar páginas institucionales o landing pages promocionales (día de la madre, black friday, cyber monday). El resultado final de un tema y el contenido que lo compone es el frente de una tienda.

Bloques

Los bloques son la abstracción mínima en el Store Framework. Estos declaran pequeñas piezas que componen el layout de una tienda. Por más simples que parezcan, los bloques tienen un alto poder de personalización, lo que permite que sea posible alcanzar diseños complejos. Hay cuatro niveles de personalización para los bloques:

• Estilo semántico (styles).
• Propiedades (props).
• Clases css (handles).
• Hijos (children).

Workspaces

Ambientes de trabajo protegidos que representan una copia muy cercana a lo que existe en producción, permitiendo la evolución de los temas sin afectar nada en la tienda.

🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback

Para continuar, haga clic en Close Issue

Configuraciones básicas

Introducción

Antes de comenzar a poner manos a la obra y aprender más sobre el Store Framework de VTEX IO, usted debe realizar algunas configuraciones básicas, como:

• Instalar Git.
• Instalar Toolbelt.
• Hacer login en una cuenta VTEX.
• Crear un workspace de desarrollo.
• Enlazar sus archivos locales con la plataforma.

A continuación, consulte el procedimiento para cada una de estas configuraciones:

Instalando Git

Instale Git en su computadora accediendo al siguiente enlace y seleccionando el software usado por su computadora (Windows, MAC o Linux):

https://git-scm.com/downloads

Instalando Toolbelt

Toolbelt es la herramienta de línea de comando de VTEX IO. Este le permite realizar cualquier actividad en la plataforma, como crear un nuevo workspace de desarrollo, iniciar sesión en una cuenta VTEX, desarrollar nuevas apps, gestionar las ya existentes, etc.

Dado que Toolbelt es el que establece la comunicación entre el desarrollador y la plataforma, usted lo necesitará para lograr realizar todas las actividades propuestas durante el curso de Store Framework.

1. Instale Node.js. Si la computadora que usted está usando es MAC, instale también Yarn.
2. Ejecute el comando npm i -g vtex en su terminal si usted está trabajando de un Windows y yarn global add vtex en MAC.

Usted puede ejecutar el comando vtex-v (Windows) o vtex (MAC) para confirmar si la instalación de Toolbelt ocurrió como se esperaba.

Con la instalación concluida, su próximo paso debe ser iniciar sesión en una cuenta VTEX.

Iniciando sesión

1. Ejecute el comando vtex login contaVTEX en su terminal, reemplazando contaVTEX con el nombre real de la cuenta en la que desea trabajar. Por ejemplo, vtex login appliancetheme .

2. Una vez que haya iniciado sesión, ejecute el comando vtex whoami para confirmar en qué cuenta y workspace usted está.

Workspaces no son más que espacios de trabajo. En la plataforma VTEX IO, las cuentas tienen tres tipos principales de workspaces: master, de producción y desarrollo.

El siguiente paso hará que se cree un workspace de desarrollo para usted, permitiendo que las configuraciones realizadas en las actividades del curso no cambien la versión pública final de la tienda.

Creando un workspace de desarrollo

1. Ejecute vtex use nome-do-workspace, reemplazando nome-do-workspace con el nombre deseado. Por ejemplo, vtex use devworkspace .

Visualizando su workspace

Una vez creado su workspace, podrá acceder a este desde el enlace https://{workspace}--{cuenta}.myvtex.com, reemplazando {workspace} y {cuenta} con el workspace creado anteriormente y el nombre de la cuenta, respectivamente. Por ejemplo, https://devworkspace--appliancetheme.myvtex.com

Enlazando sus archivos locales

Al ejecutar vtex link a partir de la carpeta donde están los archivos de su tema, estos pasarán a ser automáticamente sincronizados con la plataforma de VTEX IO. Esto significa que cualquier alteración que usted haya realizado y guardado será reflejada en el workspace y en la cuenta en que usted esté conectado, y podrá visualizarse a través de la dirección descrita anteriormente.

🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback

Con todas las configuraciones básicas completadas, ¡usted está listo para comenzar el curso!

Para continuar, haga clic en Close Issue