Opções do schema para componentes configuráveis no Site Editor

VTEX in your native language 🌎 Português
, , ,
2

@dien não sei se existe uma documentação já pronta, e se tiver não sei te dizer se está aberta. Entretanto vou ver se crio uma documentação simples para ajudar a comunidade nesse quesito.
Em relação a esses controles que você mostrou na imagem, é possível criá-los com a implementação abaixo:

MyComponent.schema = {
    title: 'Brincando com o Schema',
    type: 'object',
    properties: {
        // Select
        testSelect: {
            title: 'Select',
            type: 'string',
            enum: ['opt1', 'opt2', 'opt3'], // Define os valores
            enumNames: ['Opção 1', 'Opção 2', 'Opção 3'], // Define os textos
        },

        // Checkbox boleano
        testBoolean: {
            title: 'Boolean',
            type: 'boolean',
        },

        // Radio
        testRadio: {
            title: 'Radio',
            type: 'string',
            enum: ['opt1', 'opt2', 'opt3'], // Define os valores
            enumNames: ['Opção 1', 'Opção 2', 'Opção 3'], // Define os textos
            widget: {
              "ui:widget": "radio"
            }
        },
    }
}

O código acima irá gerar controles similares a esses:
image

image

Existem mais opções. Para cada controle que encontramos no Site Editor dá para criar um semelhante, entretanto o grande empecilho é justamente essa falta de documentação.

8 Likes