LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page

Was this helpful?

  1. Construindo seu Template
  2. Editor do Tema
  3. Novo
  4. Estrutura

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"
         }
       ]
     }
   ]
 }
]
PreviousAlertNextThumb preview do tema

Last updated 2 years ago

Was this helpful?

🧱