Info Card: el call to action de Store Framework

✨ Branch: infocard

Introducción

Una tienda necesita un buen home page para mantener la atención del usuario, aumentando el tiempo de sesión y, por lo tanto, aumentando las posibilidades de conversión. Para que esto sea posible, se pueden usar varios elementos, como: banners promocionales, estantes de destaque, contenidos institucionales.

Crearemos el siguiente bloque en el home page usando un Call to Action. En el Store Framework, tenemos un bloque que sirve para este propósito llamado Info Card.

Info Card

Con el Info Card, es posible crear imágenes con enlaces y botones (en la parte superior o lateral del bloque) que dirigen el flujo del usuario (Call to Action).

Revisando la documentación es posible ver que:

• isFullModeStyle define si el Call to Action (CTA) debe estar arriba del banner.
• textPosition definirá la posición del texto.
• textAlignment definirá el alineamiento del texto.
• imageUrl definirá cuál imagen será usada como banner.
• headline determinará cuál es el texto que será usado de título.
• callToActionMode permitirá elegir el CTA como un enlace o un botón.
• callToActionText definirá el texto del CTA.
• callToActionUrl determinará el enlace al que será dirigido.

Así, quedamos con las siguientes props:

  {
    "store.home": {
      "blocks": [
        "rich-text",
        "info-card"
      ]
    },
    "rich-text": {
      "props": {
        "text": "*Hello, World!*",
        "textPosition": "RIGHT"
      }
    },
    "info-card": {
      "props": {
      "isFullModeStyle": false,
      "textPosition": "right",
      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
      "headline": "Vintage Pink",
      "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
      "callToActionMode": "button",
      "callToActionText": "Explore",
      "callToActionUrl": "/sale/d",
      "textAlignment": "center"
      }
    }
  }

Instanciando bloques

Puede ser que usted se haya preguntado:

"¿Y si quiero tener dos Info Cards con apariencias diferentes?"

Esto es posible a través de la instanciación de bloques.

Todos los bloques tienen nombres preestablecidos, pero puede crear instancias de estos y definir apariencias diferentes para el mismo tipo de bloque. Para hacer esto, simplemente coloque un # con un nombre arbitrario y que tenga sentido después de definir cada bloque, por ejemplo:

  {
    "store.home": {
      "blocks": [
        "rich-text",
        "info-card#button-right"
      ]
    },
    ...
    "info-card#button-right": {
      "props": {
        "isFullModeStyle": false,
        "textPosition": "right",
        "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
        "headline": "Vintage Pink",
        "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
        "callToActionMode": "button",
        "callToActionText": "Explore",
        "callToActionUrl": "/sale/d",
        "textAlignment": "center"
      }
    }
  }

ATENCIÓN Durante el curso se verán varios ..., esta parte no debe copiarse y representa el progreso de steps anteriores.

Actividad

A partir del código anterior, en el archivo home.jsonc, cree el info-card#button-left justo debajo del infocard info-card#button-right . Este nuevo infocard debe contener:

1. El título Shining chrome .
2. Un call to action del tipo enlace con el texto Go to Collection en el lugar del botón.
3. La imagen https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png .
4. El subtítulo Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.
5. El texto colocado a la izquierda de la imagen (textPosition).

El resultado esperado es semejante al que se presenta en la siguiente imagen:

ℹ️ Recuerde acceder a la documentación del Info Card si tiene alguna duda durante la actividad.

🚫 ¿Perdido?

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

Crear feedback

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

Flex Layout: cree layouts utilizando el poder de Flexbox

✨ Branch: flexlayout

Introducción

Flex Layout es un paradigma de estructuración de layout creado en el Store Framework para permitir la construcción de layouts complejos. Este paradigma utiliza el concepto de líneas y columnas para definir la estructura y la colocación deseadas de los bloques en una determinada página.

Hay dos bloques de construcción básicos de cada Flex Layout:

• flex-layout.row
• flex-layout.col

Si ya está familiarizado con Flexbox utilizado en CSS, Flex Layout debería ser fácil de entender, pues flex-layout.row y flex-layout.col utilizan Flexbox por debajo.

Flex Layout

Con Flex Layout es posible crear layouts personalizados, utilizando la estructura de líneas y columnas de Flexbox.

Analizando la documentación del bloque, vemos que puede utilizar cualquier array de bloques como children de Flex Layout. Además, siempre debe usar flex-layout.row y flex-layout.col, NUNCA flex-layout de forma aislada.

A continuación, tenemos un ejemplo de flex layout compuesto de un flex-layout.row con dos children: un info-card y un rich-text:

  "flex-layout.row":{
    "children": [
      "info-card#rethink",
      "rich-text#deletar"
    ]
  },
  
 "info-card#rethink": {
    "props": {
      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/utensilios-cozinha-min.png",
      "isFullModeStyle": true,
      "headline": "Time to rethink your kitchen",
      "callToActionText": "Discover",
      "textPosition": "center"
    }
  },
  
  "rich-text#deletar": {
    "props": {
      "text": "I'll be deleted soon"
    }
  }

Actividad

1. Declare el flex-layout.row dentro de los blocks del template de store.home y declare los bloques propuestos arriba en su archivo home.jsonc .

2. Altere los children de flex-layout.row reemplazando el bloque rich-text por una columna flex-layout.col .

3. Elimine el bloque de rich-text propuesto arriba de su tema.

4. Declare el bloque flex-layout.col en su archivo home.jsonc con dos componentes de imagen como children: image#electronics y image#major-appliance, en este orden.

5. Defina los bloques image con las siguientes props:

   ...
   "image#electronics": {
     "props": {
       "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
       "maxWidth": "100%"
     }
   },
   "image#major-appliance": {
     "props": {
       "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
       "maxWidth": "100%"
     }
   }

El resultado obtenido debe ser semejante a este:

ℹ️ Recuerde acceder a la documentación de Flex Layout si tiene alguna duda durante la actividad.

🚫 ¿Perdido?

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

Crear feedback

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

Funcionamiento del curso

Objetivo

Es importante establecer que este no es un curso expositivo. Su objetivo es enseñar a los participantes sobre el Store Framework de VTEX IO a partir de actividades prácticas. Por lo tanto, para que sea posible avanzar, es necesario que se invierta un poco de su tiempo y dedicación.

Al comienzo del curso usted recibió un repositorio con código mínimo y queremos que, al completar todas las tareas, lo haya transformado en una tienda completa y funcional.

Introducción

El curso está dividido en etapas. Al comienzo de cada etapa, usted recibirá instrucciones iniciales, como ya recibió en esta y en la anterior. Debe leer todo el contenido presentado y recibirá, al final, una pequeña actividad.

Para que sus respuestas se envíen, siga los siguientes pasos:

1. Abrir una nueva ventana de VSCode.
2. Ejecute Ctrl + Shift + P (Cmd + Shift + P).
3. Digite git clone .

4. Digite el nombre del repositorio como https://github.com/mauriciodinamarca/store-framework .
5. Confirme y seleccione el lugar donde desea descargar el repositorio.
6. Haga clic en Open en la notificación que se abre en la esquina inferior derecha.

7. Abra la página de instalación de nuestro robot de pruebas y haga clic en Configure.
   • ⚠️ Note que este bot es diferente del bot de GitHub Learning Lab. Este es responsable de analizar la respuesta en cada etapa del curso.
8. Seleccione Only selected repositories, haga clic en Select repositories y digite store-framework .
9. Haga clic en mauriciodinamarca/store-framework y haga clic en Install.

Enviando sus respuestas

Cuando haya terminado de leer todo el contenido y de realizar la actividad propuesta, debe enviar su respuesta siguiendo los pasos que se indican a continuación:

1. Haga clic en Source Control, en el menú lateral de VSCode.

2. Haga clic en + en la sección de CHANGES.

3. Escriba algún mensaje que represente su alteración. Por ejemplo:

4. Haga clic en ✓ (Commit).

5. Haga clic en la esquina inferior izquierda.

6. Cuando aparezca una nueva ventana, coloque el nombre del Branch que se le dio al comienzo del texto y haga clic en
   + Create new branch...

7. Para finalizar, haga clic en la nube en la esquina inferior izquierda:

Cuando termine de hacer el flujo completo, nuestro robot responderá si logró o no acertar la respuesta que esperábamos. Si es así, obtendrá una respuesta como:

En seguida, recibirá otra respuesta que le indicará los siguientes pasos:

Si está familiarizado con el git, todo este flujo equivale a crear un branch con un nombre predefinido, hacer commit de los cambios y dar push.

Intentándolo nuevamente

A lo largo del curso, es posible que no pueda completar la actividad correctamente en el primer intento. Si esto sucede, recibirá un mensaje de feedback que le indicará cuál fue el porqué de la falla:

Usted puede enviar tantas respuestas como quiera, basta rehacer todo el proceso explicado en la sección anterior.
⚠️ En el ítem 6 no será necesario rehacer todo, ya que el branch del step ya ha sido creado. En el ítem 7, en vez de ver una nube, usted verá algunas flechas, basta hacer clic en estas para reenviar:

Progreso del curso

En cualquier momento del curso, usted puede acompañar su progreso volviendo a la página de inicio. En esta, se indicarán todos los steps que ya completó y un botón para que vuelva al step desde donde lo dejó:

No olvide enlazar

En todo momento, al abrir el terminal VSCode, puede ejecutar un vtex link y acompañar la evolución de su proyecto en https://{workspace}--{conta}.myvtex.com . Asegúrese de que visualmente la solución es equiparable con lo que se presentó y que no se haya producido ningún error en el enlace.

⚠️ Cuidado ⚠️

No cree issues y PRs durante el flujo del curso, ya que esto puede interferir en su funcionamiento.

🚫 ¿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

🚫 ¿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

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

CSS Handles y el poder de la personalización de bloques

✨ Branch: csshandles

Introducción

Si echa un vistazo a su tienda actual, podrá ver que todos los componentes tienen estilos parecidos, incluso si usted no ha realizado ninguna personalización.

Todos estos, incluyendo el Info Card recién configurado, comparten valores preestablecidos para fuente, color de fondo, color principal, formato de los botones, etc.

Esto se debe al style.json, archivo responsable de declarar valores genéricos de personalización para toda tienda del Store Framework.

Para crear una identidad propia para los componentes de su tienda, puede sobrescribir estos valores a través de personalizaciones de CSS.

Analizando el recipe para personalizaciones de tienda por CSS, percibimos que serán necesarios algunos pasos para aplicar el estilo propio que usted desea, como:

1. Cree un nuevo archivo dentro de la carpeta CSS con el nombre vtex.{AppName}.css.

2. Utilice el CSS Handle del componente que se personalizará dentro de este archivo siguiendo el formato a continuación:

   .{CSSHandle} {
       {PropriedadeDeCSS}: {ValorDesejado};
       {PropriedadeDeCSS}: {ValorDesejado};
   }

3. En ausencia de CSS Handles, aplicar CSS Selectors permitidos, como es el caso de :global(vtex-{componentName}).

4. Para aplicar CSS en un bloque específico y no a todos los bloques de aquel tipo, se utiliza el recurso de blockClass, que aparece junto a los handles de css al inspeccionar el código. Los blockClass deben ser declarados como una prop en el bloque en cuestión, y luego hacer referencia en el archivo de estilo como se muestra a continuación:

   .{CSSHandle}--{blockClass} {
       {PropriedadeDeCSS}: {ValorDesejado};
       {PropriedadeDeCSS}: {ValorDesejado};
   }

Personalizando el Info Card

Para descubrir los CSS Handles de un componente, como el Info Card, basta con acceder a la sección Customization de su documentación.

De acuerdo con la descripción de CSS Handles y con el recipe de personalizaciones de tienda por CSS, pudimos implementar un ejemplo de Info Card personalizado, cambiando su título y la configuración del botón call to action al agregar el siguiente código al archivo vtex.store-components.css dentro de /styles/css:

.infoCardHeadline {
    font-family: serif;
    font-size: 2.25rem;
    font-weight: normal;
    color: gray;
    border: 2px solid black;
    padding: 24px;
}

.infoCardCallActionContainer :global(.vtex-button) {
    color: white;
    background-color: gray;
    border: transparent;
}

.infoCardCallActionContainer :global(.vtex-button):hover {
    color: gray;
    background-color: blue;
    border: transparent;
}

Puedes comprobar el efecto de los cambios realizados ejecutando el comando vtex link.

En seguida, añadiremos un estilo específico al info card Vintage. Para empezar, agregue la prop blockClass en el info-card#button-right como se muestra a continuación:

"info-card#button-right": {
  "props": {
    "isFullModeStyle": false,
    "textPosition": "right",
    "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
    "headline": "Vintage Pink",
    "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
    "callToActionMode": "button",
    "callToActionText": "Explore",
    "callToActionUrl": "/sale/d",
    "textAlignment": "center",
    "blockClass": "vintage"     //  <------------
  }
}

Y entonces declare un background-color para este info card específico en su archivo de css:

.infoCardContainer--vintage {
  background-color: #edcfd1
}

Observe el efecto alcanzado al enlazar su app.

Actividad

1. En el archivo vtex.store-components.css, copie el código anterior para usarlo en el archivo CSS de su tema, siguiendo el recipe sobre personalizaciones de tienda por CSS.
2. Basado en los Handles del Info Card, defina el ancho máximo (max-width) de todos los info cards en 1260px, el margin en 0 auto y el padding en 0.
3. Cambie el color del título del componente a black .
4. Coloque el título en negrita (bold) .
5. Cambie el color de fondo del botón durante el hover a white .
6. Paralelamente al blockClass vintage, aplique un nuevo block class llamado metal en el info card info-card#button-left y aplique el color de fondo de #e1e1e1 en este.

🚫 ¿Perdido?

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

Crear feedback

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

Hello, World!

✨ Branch: helloworld

Introducción

Comencemos nuestra jornada a través del clásico "Hello, World!". Para crear algo como esto, necesitamos conocer los bloques del Store Framework y usar uno que nos permita crear textos. Este bloque se llama Rich Text.

Rich Text

Rich Text es solo una de las decenas de bloques disponibles en el Store Framework. Es un bloque que parece simple, pero que permite una serie de personalizaciones para crear textos. Para empezar, todo el texto escrito en Rich Text soporta el lenguaje Markdown, esto hace con que la estilización del texto sea mucho más fácil.

Revisando la documentación del bloque es posible encontrar la especificación técnica. Una de las secciones presentes es la de Blocks API en la que puede ver la lista completa de propiedades (props) que posee el Rich Text. Las propiedades son el principal punto de personalización de un bloque, son las que garantizan que un mismo bloque pueda verse y comportarse de manera completamente diferente, dependiendo de cómo esté configurado.

Comenzando

Comencemos, entonces, a personalizar el home page. En su tema es posible encontrar un archivo llamado home.jsonc en la carpeta /store/blocks . En este archivo se determina la organización de los bloques que se desea utilizar. El lenguaje para la composición del layout es simple y está basado en JSON.

En home.jsonc se ve un bloque que es estándar en todos los temas: store.home . Este bloque determina los bloques hijos que se mostrarán en el home page.

{
  "store.home": {
    "blocks": []
  }
  ...
}

Entonces, vamos a usar el Rich Text en su cuerpo:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  }
  ...
}

De esta forma, el store.home ahora sabe que necesitará renderizar un Rich Text. Sin embargo, aún no hemos especificado cómo se ve este Rich Text. Para esto, necesitamos hacer una definición de bloque.

Definición de bloques

La definición de bloques se debe hacer siempre fuera de cualquier otro bloque, en el nivel de la raíz del archivo JSON.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Aquí el bloque está siendo usado dentro de otro
    ]
  },
  "rich-text": { <----- Aquí está en la raíz
  }
}

En la definición es posible determinar el comportamiento y aspecto de un bloque. Para esto, deben usarse puntos de personalización, comenzaremos usando las props del Rich Text:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {

    }
  }
}

Consulte nuevamente la documentación del Rich Text y definamos, entonces, las props que usaremos para personalizarlo.

Queremos hacer un simple "Hello, World!", examinando las props vemos una que se llama: text (Text written in markdown language to be displayed). Esta es, entonces, la prop que determinará cuál texto será exhibido.

Incluyendo esta prop tenemos, entonces:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "Hello, World!"
    }
  }
}

Revisando la documentación del Markdown vemos que para dejarlo en cursiva basta colocar * antes y después del texto:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*"
    }
  }
}

Para centrarlo, podemos agregar la prop textPosition y atribuirle el valor CENTER:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*",
      "textPosition": "CENTER"
    }
  }
}

Actividad

Defina un Rich Text en su home y cree un texto "Hello, World!" en negrita y alineado a la derecha.

ℹ️ Recuerde acceder a la documentación del Rich Text si tiene alguna duda durante la actividad.

🚫 ¿Perdido?

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

Crear feedback

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.