Sections
O schema de uma seção é utilizado para gerar a página de configuração das seções no editor do tema. A estrutura base de um schema deve seguir o padrão abaixo:
{
"name": "Nome do componente", // nome que será exibido na lista de seções
"type": "content", // tipo da seção podendo ser: content ou fixed
"category": "Multimídia", // agrupador das seções
"settings": [], // lista dos componentes de configuração da seção
"blocks": {} // lista dos componentes de configuração dos blocos da seção
}Nome que será exibido na lista de seções
Tipo da seção podendo ser:
- Content: Seções que serão usadas para conteúdo dinâmico, como banner, vitrines e etc…
- Fixed: Seções que serão usadas para conteúdo fixo, como header, footer, newsletter
Agrupador das seções, tendo tratamento diferente em cada tipo de seção:
-
Type content: será agrupado as seções conforme o valor descrito no campo
-
Type fixed: Deve ser usado as seguintes categorias:
-
header: será agrupado as seções e exibidas na sidebar na área acima da seleção das seções
-
footer: será agrupado as seções e exibidas na sidebar na área abaixo da seleção das seções
-
Lista dos componentes de configuração da seção, devemos seguir um schema base dos settings. Veremos mais detalhes de configuração nos componentes
"settings": [
{
"type": "component-editor", //tipo do componente que será renderizado
"tab": "Aba", // agrupador dos campos por abas
"group": "Grupo", // agrupador dos campos por acordeon
"id": "idCampo", // índice do qual será retornado o valor cadastrado no editor
"label": "Nome do campo", // título do campo exibido no editor
"info": "*informação adicional", // informação adicional exibida abaixo do campo
"default": "Valor padrão" // valor padrão do campo
}
]Lista dos componentes de configuração dos blocos da seção, os blocks podem ter mais de um tipo, para que o usuário possa escolher quando for cadastrar seu conteúdo. Devemos seguir um schema base dos blocks.
{
"blocks_name": "Imagens",
"blocks_max": 5,
"blocks": {
"image": {
"name": "Banner item",
"settings": [
{
"type": "image-picker",
"group": "Conteúdo",
"id": "src",
"label": "Banner",
"info": "*recomendado imagens jpg, 1920x700"
}
]
}
}
}{
type: 'checkbox',
id: 'myId',
label: 'My label',
info: 'My info',
default: true
}
{
type: 'color-picker',
id: 'myId',
label: 'My label',
info: 'My info',
default: '#000000'
}
{
type: 'date-picker',
id: 'myId',
label: 'My label',
info: 'My info',
default: '31/01/2022'
}
{
type: 'font-picker',
id: 'myId',
label: 'My label',
info: 'My label',
default: ''
}{
type: 'header',
id: 'myId',
content: 'My Header'
}
{
type: 'html',
id: 'myId',
label: 'My label',
info: 'My info',
default: '<p>Content</p>'
}
{
type: 'image-picker',
id: 'myId',
label: 'My label',
info: 'My info',
default: ''
}
{
type: 'range',
id: 'myId',
step: 10,
max: 100,
min: 0,
unit: 'px',
label: 'My label',
info: 'My info',
default: 50
}
{
type: 'richtext',
id: 'myId',
label: 'My label',
info: 'My info',
default: ''
}
{
type: 'select',
id: 'myId',
label: 'My label',
info: 'My info',
default: '',
options: [
{
label: 'Option 1',
value: 'option1'
},
{
label: 'Option 2',
value: 'option2'
},
{
label: 'Option 3',
value: 'option3'
}
]
}
{
type: 'text',
id: 'myId',
label: 'My label',
info: 'My info',
default: 'Hello world'
}
{
type: 'textarea',
id: 'myId',
label: 'My label',
info: 'My info',
default: 'Hello world'
}
{
type: 'toggle',
id: 'myId',
label: 'My label',
info: 'My info',
default: 'm',
// options: 'h-align',
// options: 'v-align',
options: [
{
label: 'P',
value: 'p'
},
{
label: 'M',
value: 'm'
},
{
label: 'G',
value: 'g'
}
]
}
{
type: 'url',
id: 'myId',
label: 'My label',
info: 'My info',
default: ''
}
{
type: 'video_url',
id: 'myId',
label: 'My label',
info: 'My info',
default: ''
}