El presente repositorio contiene el componente custom Bullets diagramation. Dicho componente fué implementado con React y Typescript para Vtex IO. Su principal objetivo es brindar la ayuda pertinente en la navegación por categorías de la tienda.
En primer lugar se debe crear un nuevo repositorio utilizando la estructura del Template-React
Despúes, deberas clonar el repositorio creado, en tu editor de código elegido.
Una vez, tengas el repositorio clonado en tu ambiente de trabajo, procedes a configurar el Manifest.json
. detallando los siguientes puntos:
- vendor
- name
- version
- title
- description
Veamos un ejemplo:
{
"vendor": "itgloberspartnercl",
"name": "bullets-diagramation",
"version": "0.0.1",
"title": "Bullets Diagramation",
"description": "Es un contexto de elementos que renderizarán los niveles inferiores de navegación dentro de una lista de bullest con imagenes"
}
Además, configurar la sección de builders, agregando la app store, así:
{
"builders": {
"react": "3.x",
"messages": "1.x",
"docs": "0.x",
"store": "0.x"
}
}
Ahora, si la App requiere configuraciones de dependencias, deberas hacerlo de ls siguiente manera:
{
"dependencies": {
"vtex.native-types": "0.x",
"vtex.list-context": "0.x",
"vtex.device-detector": "0.x",
"vtex.css-handles": "0.x"
}
}
En esta sección se debe modificar el archivo package.json
así:
{ "version": "0.0.1", "name": "bullets-diagramation" }
Tambien, deberas modificar el archivo package.json
dentro de la carpeta React
Ahora, lo que prosigue es, estando dentro del folder react
, instalar las dependencias, para este proyecto utilizamos Yarn
Es importante crear un folder a nivel global llamado store
, dicho folder va a contener un archivo llamado interfaces.json
, en ese archivo vamos a encontrar lo siguiente:
{
"list-context.bullet-group": {
"component": "BulletGroup",
"composition": "children",
"allowed": "*",
"content": {
"properties": {
"bullets": {
"$ref": "app:itgloberspartnercl.bullets-diagramation#/definitions/BulletGroup"
}
}
}
}
}
Una vez declarada esta información, ahora sí, podremos llamar a nuestro componente desde nuestra app base o store theme
En el folder React, debemos crear un archivo name-componente.tsx
, esto es, porque trabajaremos con React y Typescript.
Para recordar: el comando vtex link
nos permite vincular nuestros archivos locales con la plataforma vtex
. En ese orden de ideas:
NOTA: Es recomendable, iniciar vinculando tu app custom antes que tu tienda base ó store theme.
- Lorraine Gelis Díaz