Configuração de input.checkbox/radiogroup no formulário de fale conosco

[IgorSantos]

Olá pessoal, espero que todos estejam bem!

Hoje em nossa loja possuímos um formulário desenvolvido no Storefront com VTEX IO, conectado com Master Data. Antes utilizávamos um “Assunto” padrão para todas as entradas, porém surgiu a necessidade de direcionarmos as solicitações para setores diferentes do E-commerce: Vendas e Pós-vendas.

Faço alterações básicas nos CustomApps e StoreFront da nossa loja, que estão dentro do meu nível de conhecimento e que consigo encontrar soluções aqui na comunidade e na documentação da VTEX. Seguindo a documentação sobre formulários( Store Form<!-- --> by <!-- -->vtex ), vi que há a possibilidade de inserirmos um input de seleção, sendo eles: form-input.radiogroup, form-input.dropdown, form-input.textarea e form-input.checkbox.

Eu consigo inserir e conectá-los com o MasterData, mas não encontrei nada sobre como posso adicionar as opções que desejo inserir para que o cliente escolha, no caso “Vendas” e “Pós-vendas”. Deixarei abaixo minha declaração atual desse componente:

“form-input.radiogroup#fc-assunto”: {
“props”: {
“pointer”: “#/properties/assunto”,
“label”: “Minha solicitação é sobre:”
}
},

Fico grato pela atenção dada a este tópico.

[IgorSantos]

Através de um ticket, consegui solucionar essa questão. Trago aqui a resposta para possíveis dúvidas futuras:

A configuração para ambas propriedades são parecidas, para criar esta lista você deve, primeiro ir no master data e criar as informações que você deseja criar para os campos como exemplo abaixo:

Em seguida basta fazer as referências na próprio app como mostra o código abaixo:

{
 "store.home": {
 "blocks": [
 "form"
    ]
  },

 "form": {
 "props": {
 "entity": "rodrigotadeu",
 "schema": "rodrigo-test"
    },
 "children": [
 "form-input.dropdown#test",
 "form-input.dropdown#test2"
    ]
  },

 "form-input.dropdown#test": {
 "props": {
 "pointer": "#/properties/productTypes",
 "label": "Product Types"
    }
  },

 "form-input.dropdown#test2": {
 "props": {
 "pointer": "#/properties/gender",
 "label": "Genders"
    }
  }
}

As propriedades de “entity” e “schema” devem ser as que você criou no master data e o “pointer” o caminho relativo as informações que foram criadas para serem exibidas, como referenciado no Help: