Headless CMS

Headless CMS (VTEX hCMS) é a solução de Content Management System para gestão de páginas e conteúdos em projetos FS.

Para além da VTEX

De fato, Headless CMS é uma tecnologia de uso geral que visa permitir ao usuário criar, editar e publicar sem ter conhecimento do código (no-code), em uma abordagem que separa o back-end onde o conteúdo está do front-end ao qual será aplicado (daí que vem o “headless” no nome), permitindo flexibilidade sobre onde e como será apresentado.

Diversas são as vantagens, casos de uso e sistemas existentes. Entretanto, o foco aqui é a abordagem da VTEX, que é apenas uma dentre várias no cenário tecnológico.

O hCMS está para a FastStore assim como o Site Editor está para o Store Framework do VTEX IO

Acesse o hCMS pelo caminho Storefront > Headless CMS do Admin VTEX

Content Types

São os tipos de conteúdo aos quais cada página/documento é associado. Embora a FS já forneça amplamente content-types predefinidos, é possível criar novos em cms/faststore/content-types.json.

A cada tipo, pode-se vincular escopos/contextos específicos (de 0 a n scopes), que servem de agrupamento para a definição.

Para mais detalhes sobre a estrutura de um content-type, acesse aqui

Múltiplas páginas

Perceba que nem todo tipo permite que múltiplas páginas sejam associadas a ele, mas sim uma única instância (singleton).

Na verdade, por padrão só é possível fazer isso com:

• Landing Pages ⇒ de acordo com o path definido em Settings
• Product Pages ⇒ conforme os critérios de template
• Product List Pages ⇒ conforme os critérios de template

Sections

São os blocos reutilizáveis, selecionados e cadastrados durante a composição de uma página. Várias seções são fornecidas nativamente, sendo possível sobrescrevê-las ou, é claro, criar do zero.

Cada seção:

• Possui um schema de configuração
• Pode ter seu uso restrito a certas páginas, ao vincular escopos (requiredScopes)
  • Não informar ou definir como um array vazio torna livre de restrições!
• Pode expor campos editáveis na(s) página(s) do hCMS onde for inserida
• É renderizada por um componente React correspondente

Global Sections

Dentre os documentos únicos introduzidos por padrão, Global Sections — como o nome implica — é o responsável por aplicar seções globalmente na aplicação.

Nele, a seção especial Children, na ordem em que for posicionada, promove a separação entre o que for global e as seções “filhas”, isto é, todo conteúdo específico de cada página:

Estruturando uma seção

O primeiro passo para desenvolver uma seção cadastrável no hCMS é definir um objeto JSON com name e schema em cms/faststore/sections.json.

Nome da seção

Nomear uma seção com o mesmo name de uma já existente, fará com que esta seja totalmente sobrescrita, ao sincronizar o conteúdo local

As propriedades definidas em schema servem para criar os campos do formulário JSON Schema onde os dados serão registrados.

Para mais detalhes, acesse aqui

Veja a seguir um exemplo de definição para a seção HelloWorld:

cms/faststore/sections.json

[
  {
    "name": "HelloWorld",
    "schema": {
      "title": "Hello World",
      "description": "An example section",
      "type": "object",
      "properties": {
        "title": {
          "type": "string",
          "title": "Title",
          "default": "Hello World!"
        },
        "listItems": {
          "type": "array",
          "title": "Items",
          "description": "These items will be rendered as a List",
          "items": {
            "type": "object",
            "title": "Item",
            "required": ["label", "link"],
            "properties": {
              "label": {
                "type": "string",
                "title": "Label"
              },
              "link": {
                "type": "string",
                "title": "Link"
              }
            }
          }
        }
      }
    }
  }
]

Ao sincronizar o conteúdo local e clicar no botão ”+” de alguma página do hCMS (com o respectivo workspace), será listado algo como:

Widgets

Os widgets são elementos de interface convenientes que podem ser associados aos campos definidos para receber os dados. Em sua maioria, são vinculados ao tipo string.

São exemplos:

• Seletor de data
• Uploader de imagem
• Editor rich text

Nós podemos, por exemplo, incluir um campo de imagem para a seção HelloWorld com a seguinte adição:

cms/faststore/sections.json

[
  {
    "name": "HelloWorld",
    "schema": {
      "title": "Hello World",
      "description": "An example section",
      "type": "object",
      "properties": {
        // previous properties here
        "image": {
          "title": "Image",
          "type": "string",
          "widget": {
            "ui:widget": "media-gallery"
          }
        }
      }
    }
  }
]

Para mais detalhes sobre os widgets disponíveis, acesse aqui

Development Mode

Durante a manipulação do rascunho de uma página, as alterações podem ser visualizadas em um host .vtex.app ou localhost por meio do path:

/api/preview/?contentType={contentType}&documentId={documentId}&versionId={versionId}

Você pode consultar esses parâmetros — assim como seções e demais informações relacionadas com a página — em detalhes pela API do hCMS, cuja URL fica exposta ao habilitar o Development Mode através do console do DevTools:

localStorage.setItem('cmsDevMode', 1)

---

Uma vez estruturada a seção, é hora de desenvolver o respectivo componente React.