Proyectos es una funcionalidad de VTEX Headless CMS que simplifica la gestión de varios proyectos de frontend, como aplicaciones móviles, páginas web y email marketing, desde un único dashboard.
Cada proyecto cuenta con sus propios ajustes, contenido y marca, pudiendo personalizarse en función de públicos u objetivos específicos.
En esta guía aprenderás a gestionar cada proyecto de frontend de tu tienda.
FastStore WebOps usuarios:Los cambios realizados a través del Headless CMS en el VTEX Admin, como la creación de nuevos tipos de contenido (content types), la adición de secciones o la actualización de campos, pueden no aparecer automáticamente en la tienda una vez que los publiques. Este es un problema conocido, y debes contactar a tu equipo de desarrollo para implementar la solución necesaria. Para obtener instrucciones detalladas, consulta el artículo sobre el problema conocido La aplicación Webops no está totalmente integrada con Headless CMS.
Antes de empezar
Para gestionar Headless CMS, asegúrate de que los recursos See CMS menu on the top-bar, Settings*, and CMS GraphQL API estén asociados con tu rol de usuario. De lo contrario, crea un rol de usuario y agrega estos recursos o añádelos a un rol de usuario existente.
Visión general
Para acceder a Proyectos, en el Admin VTEX ve a Storefront > Headless CMS.
| Opciones | Descripción |
|---|---|
| Tarjeta del proyecto | Abre el proyecto seleccionado, para que puedas crear y editar las páginas de su contenido. |
| Configuración (⚙️) | Abre una ventana que muestra los ajustes del proyecto organizados en tres pestañas:
|
| Crear nuevo | Abre una página para configurar un nuevo proyecto. |
Crear un nuevo proyecto
Crea un nuevo proyecto para tu tienda configurando ajustes generales como ID del proyecto y URL base de producción. Para conectar eficazmente un proyecto Headless CMS con el código fuente de tu proyecto también será necesario configurar webhooks y ajustes de compilación, como URL de compilación de webhook y URL de previsualización.
Un webhook es un endpoint HTTP que permite la comunicación automatizada entre VTEX Headless CMS y el código fuente del proyecto. Por ejemplo, permite que el CMS notifique a un proyecto FastStore sobre cambios de contenido u otros eventos, desencadenando acciones como la sincronización de contenido en tiempo real.
- En la página Proyectos, haz clic en
Crear nuevo. - En la página Nuevo proyecto, rellena los campos de la sección [Configuración del proyecto](#configuración del proyecto).
- Después de definir cada campo de la página, haz clic en
Creary un mensaje de éxito se mostrará en la pantalla.
Tras crear un nuevo proyecto, puedes crear páginas para el mismo con todas las rutas URL y modelos de página compatibles con tu tienda, como páginas de inicio, de producto y de inicio de sesión.
Para crear una nueva página sigue los pasos presentes en este artículo: Gestión de páginas en Headless CMS
Configuración del proyecto
En Configuración, puedes realizar ajustes en el proyecto en tres categorías principales:
-General: permite editar el ID del proyecto y la configuración de API y archivar el proyecto. -Content-Types: permite conectar el proyecto Headless CMS a tu código fuente a través de webhooks cuando configuras los tipos de contenido (content types) y las secciones. -Compilación: permite iniciar y administrar las compilaciones del sitio web. Puedes establecer una URL de webhook para las notificaciones de compilación y un endpoint para previsualizar las versiones de la página.
General
| Nombre del campo | Descripción | Ejemplo de valor |
|---|---|---|
| ID del proyecto (obligatorio) | ID del proyecto. | FastStore |
| Storefront | Define los storefronts VTEX disponibles (FastStore o Custom) y su propósito. | Consulta la sección Storefront para obtener más información. |
Storefront
Este campo determina la configuración de la compilación en función del storefront elegido. Las opciones incluyen:
- VTEX Storefront:
Selecciona un storefront de tu cuenta (por ejemplo, FastStore). La compilación se ajusta automáticamente según el storefront elegido. Puedes personalizarlo después.
- Custom
Escoger un storefront Custom (personalizado) te brinda la flexibilidad de definir tu propia configuración de compilación.
Content-Types
| Nombre del campo | Descripción | Ejemplo del valor |
|---|---|---|
| URL de las secciones | URL del webhook para recibir y guardar las secciones creadas en el código fuente de Headless CMS. | https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{projectId}/sections |
| URL de los tipos de contenido | URL del webhook para recibir y guardar los tipos de contenido creados en el código fuente de Headless CMS. | https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{builderId}/content-types |
Compilar
| Nombre del campo | Descripción | Ejemplo del valor |
|---|---|---|
| URL de las secciones | URL del webhook para recibir y guardar las secciones creadas en el código fuente en Headless CMS. | https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{builderId}/sections |
| URL de los tipos de contenido | URL del webhook para recibir y guardar los tipos de contenido creados en el código fuente en Headless CMS. | https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{builderId}/content-types |
| URL de compilación del webhook | URL del webhook para iniciar una nueva compilación en Headless CMS cuando se agrega o edita una página o contenido. | https://app.io.vtex.com/vtex.cms-builder-sf-jamstack/v1/{accountName}/{workspace}/build-releases |
| Guardar URL de webhook | URL de webhook para permitir previsualizaciones del proyecto en tiempo real, enviando una notificación para actualizar la página y que se reflejen los últimos cambios en Headless CMS. | - |
| URL de previsualización | URL de webhook que permite la previsualización de páginas en el Headless CMS. | https://{accountName}.vtex.app/api/preview |
Editar proyecto
Después de crear el proyecto, también puedes editar toda la información definida durante la creación del proyecto. En la página principal Proyectos, haz clic en Configuración (⚙️), y se abrirá una ventana con tres pestañas para realizar ajustes: General, Content-Types y Compilación.
Restaurar la URL predeterminada de las secciones
Una vez que has creado el proyecto y deseas editar el campo URL de las secciones, haz clic en Editar, agrega la nueva URL del webhook y haz clic en Guardar. Si deseas restaurar la URL predeterminada, haz clic en Restaurar URL predeterminada
Archivar proyecto
Al archivar un proyecto se desactiva la API y el acceso al contenido del proyecto. Para archivar un proyecto sigue los pasos a continuación:
- Accede a Storefront > Proyectos.
- Selecciona el proyecto que deseas archivar y haz clic en Configuración (⚙️).
- Haz clic en
Archivar proyectoen la páginaGeneral. Aparecerá un mensaje emergente para confirmar que deseas archivar el proyecto.
- Haz clic en
Archivar. A continuación aparecerá un mensaje informando que el proyecto se archivó con éxito.
Para restaurar un proyecto archivado, sigue los pasos descritos en [Restaurar proyecto] (#restaurar-proyecto).
Restaurar proyecto
Al restaurar un proyecto la API se reactiva y se puede acceder de nuevo a su contenido. Para restaurar un proyecto sigue los pasos a continuación:
- Accede a Storefront > Proyectos.
- Haz clic en la tarjeta del proyecto archivado.
- Haz clic en
Restaurar proyecto. Aparecerá un mensaje emergente para confirmar que deseas restaurar el proyecto. - Haz clic en
Restaurar. A continuación aparecerá un mensaje informando que el proyecto se restauró con éxito.