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

Estava desenvolvendo uma aplicação e mexendo no schema pra criar uma interface agradável no site editor pro cliente. E me deparei com a necessidade de colocar um botão de on/off, ou um check box igual tem em alguns componentes nativos, mas ao procurar não achei nenhuma doc falando sobre.

image

E isso me abriu um questionamento, existe alguma documentação sobre o Schema da VTEX? Opções que você pode ou não utilizar?

Por exemplo, eu uso muito o widget pra gerar um botão de upload de imagem, mas eu só sei disso porque vi em outro repositório alguém usando, teriam mais opções?

3 Likes

@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.

6 Likes

Muito obrigado @alexm4tos, isso vai ajudar muito! Aguardo ansiosamente sua documentação, se puder me notificar quando criá-la agradeceria muito.

Novamente, obrigado pela informação!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.