Exemplo de utilização

Segue um exemplo de código do structure.json

[
 {
   "label": "Primeira Seção - Configurações Gerais",
   "icon": "cog",
   "sessions": [
     {	
       "label": "Subseção 1 - Redes Sociais",
       "fields": [
         {
           "label": "Facebook",
           "type": "text",
           "description": "",
           "placeholder": "",
           "icon": "facebook",
           "field": "social_facebook",
           "validation": "required:true"
         },
         {
           "label": "Twitter",
           "type": "text",
           "description": "",
           "placeholder": "",
           "field": "social_twitter",
           "validation": "required:true"
         }
       ]
     },
     {	
       "label": "Subseção 2 - Estrutura",
       "fields": [
         {
           "label": "",
           "type": "radio",
           "description": "",
           "field": "structure",
           "options": [
             {
               "value": "1",
               "content": "Menu na lateral Esquerda",
		       "url": "https://images1.tcdn.com.br/assets/store/img/structure/structure-1.png"
             },
             {
               "value": "2",
               "content": "Menu na lateral Direita",
		       "url": "https://images1.tcdn.com.br/assets/store/img/structure/structure-2.png"
             }
           ]
         }
       ]
     }
   ]
 },
 {	
   "label": "Segunda Seção - Banners",
   "icon": "image",
   "sessions": [
     {	
       "label": "Subseção 1 - Configurações",
       "fields": [
         {
           "label": "Banners Responsivo",
           "type": "toggle",
           "description": "Habilita Banners Responsivo",
           "field": "home_slick"
         },
         {
           "label": "Setas",
           "type": "toggle",
           "description": "Exibe as setas de navegação nas laterais do banner. Por motivos de usabilidade as setas não são exibidas na versão mobile, apenas os Dots.",
           "field": "banner_arrows"
         },
         {
           "label": "Intervalo entre as fases",
           "type": "select",
           "description": "Funciona apenas quando o Autoplay estiver ativo, define o tempo de exibição entre uma fase e outra.",
           "field": "banner_interval",
           "options": [
             {
               "value": "3000",
               "content": "3 segundos"
             },
             {
               "value": "4000",
               "content": "4 segundos"
             },
             {
               "value": "5000",
               "content": "5 segundos"
             },
             {
               "value": "6000",
               "content": "6 segundos"
             },
             {
               "value": "7000",
               "content": "7 segundos"
             },
             {
               "value": "8000",
               "content": "8 segundos"
             },
             {
               "value": "9000",
               "content": "9 segundos"
             },
             {
               "value": "10000",
               "content": "10 segundos"
             }   
           ]
         }
       ]
     },
     {	
       "label": "Subseção 2 - Cores",
       "fields": [
         {
           "label": "Cor das setas",
           "type": "color",
           "description": "",
           "placeholder": "",
           "field": "color_slick_arrow",
           "validation": "required:false"
         },
         {
           "label": "Cor das setas ao passar o mouse",
           "type": "color",
           "description": "",
           "placeholder": "",
           "field": "color_slick_arrow_hover",
           "validation": "required:false"
         },
         {
           "label": "Cor dos Dots",
           "type": "color",
           "description": "",
           "placeholder": "",
           "field": "color_slick_dot",
           "validation": "required:false"
         },
         {
           "label": "Cor dos Ativos",
           "type": "color",
           "description": "",
           "placeholder": "",
           "field": "color_slick_dot_active",
           "validation": "required:false"
         }
       ]
     }
   ]
 },
 {	
   "label": "Terceira Seção - Vitrines",
   "icon": "store",
   "sessions": [
     {	
       "label": "Subseção 1 - Geral",
       "fields": [
         {
           "label": "Exibir apenas produtos disponiveis",
           "type": "toggle",
           "description": "Remove da listagem os produtos indisponiveis na home",
           "field": "show_available_products"
         },
         {
           "label": "O que exibir na primeira vitrine?",
           "type": "radio",
           "description": "",
           "field": "showcase",
           "options": [
             {
               "value": "featured",
               "content": "Destaques"
             },
             {
               "value": "new",
               "content": "Lançamentos"
             },
             {
               "value": "free_shipping",
               "content": "Frete Grátis"
             },
             {
               "value": "promotion",
               "content": "Promoções"
             },
             {
               "value": "top_seller",
               "content": "Mais Vendidos"
             }
           ]
         }
       ]
     }
   ]
 },
 {	
   "label": "Quarta Seção - Selo Adicional",
   "icon": "bookmark",
   "sessions": [
     {	
       "label": "Subseção 1 - Selo",
       "fields": [
         {
           "label": "Selo Adicional",
           "type": "toggle",
           "description": "O selo adicional será exibido no rodapé da loja.",
           "field": "enable_seal"
         },
         {
           "label" : "Adicione abaixo o código do selo adicional",
           "type" : "textarea",
           "description": "",
           "placeholder": "",
           "field": "seal_code",
           "validation": "required:true|min:10|max:1000"
         }
       ]
     }
   ]
 }
]

Last updated