components.json

O arquivo components.json é composto por um array de objetos que especificam detalhes de todos os componentes utilizáveis na construção do site.

Este objeto é composto pelos seguintes atributos:

Atributo	Tipo	Obrigatório	Descrição
name	string	Sim	Nome pelo qual o componente será chamado
path	string	Sim	Caminho do arquivo html dentro da pasta Components
params	array de object	Não	Parâmetros passados para uso dentro do componente
inheritVariables	bool	Não	Deve herdar as variáveis disponíveis na página ou outro componente que chame este componente. Se não definido, seu valor padrão é false
availableInAllPages	bool	Não	Deve ser disponível para chamada em todas as páginas. Se não definido, seu valor padrão é false
availableInAllComponents	bool	Não	Deve ser disponível para chamada em todos os componentes. Se não definido, seu valor padrão é false
availableInPages	array de string	Não	Nome do tipo de página onde será possível a chamada
availableInComponents	array de string	Não	Nomes dos outros componentes onde será possível a chamada

❗️

Atributo inheritVariables

Recomendamos que seja marcado como true apenas quando for realmente necessário para uso dentro do componente. Senão prefira passar apenas os dados necessários por parâmetro, evitando excesso de dados descartados e melhor performance

No objeto params é definido o nome e a obrigatoriedade dos parâmetros, ambos necessários para o cadastro no componente:

Atributo	Tipo	Descrição
name	string	Nome do parâmetro a ser usado dentro do componente
required	bool	Define se o parâmetro é obrigatório para o funcionamento do componente

Exemplo de cadastro de um componente

components.json

[
    {
        "name": "banners_carousel",
        "path": "banners_carousel.html",
        "params": [
            {
                "name": "banners",
                "required": true
            },
            {
                "name": "position",
                "required": false
            }
        ],
        "availableInAllPages": true
    }
]

Neste exemplo foi cadastrado um componente com o nome banners_carousel, implementado no arquivo banners_carousel.html (localizado na pasta Components), que recebe obrigatoriamente um parâmetro banners e opcionalmente um parâmetro position. Ele não herda nenhuma variável de quem o chama e é disponível para chamada em todas as páginas, mas não em outros componentes.

Chamando um componente cadastrado

Na chamada em um arquivo .html utilize exatamente os nomes configurados para o componente e para os parâmetros:

{{ banners_carousel banners: data...banners position: "Topo" }}

Como resultado, esta chamada adiciona o trecho html implementado no arquivo do componente.