Comece por aqui

Nesta documentação você aprenderá os conceitos essenciais da arquitetura Tempbox para criação de websites em nossa plataforma. Já a biblioteca de dados, com todos os comandos e tags você encontrará no catálogo completo em http://docs.tempbox.com.br

Crie uma conta em https://www.tempbox.com.br. Feito isso, a equipe Tempbox irá criar o seu ambiente de desenvolvimento do seu site. Enquanto o acesso não é liberado, você pode iniciar a edição do seu site localmente.


Editando o site

Baixe um template HTML, pode ser qualquer um.

No seu editor de preferência, edite o HTML como quiser, desde que use apenas HTML, CSS e JavaScript. (você pode definir a estrutura de pastas como preferir).


Publicando o site

A publicação é feita em 2 etapas:

1) Configure o template

No Painel de Controle, acesse o menu Configurações > Templates >, edite o template existente com duplo clique (por padrão, há 1 template já cadastrado). Neste formulário há o gerenciador de arquivos.

Faça o upload de todos os arquivos do seu site na pasta raiz, respeitando a estrutura de pastas. Clique em Salvar. Obs: não é necessário subir os arquivos HTML. Apenas imagens, CSS e JS.

2) Crie as páginas
Pelo menu Configurações, acesse a opção Páginas. Neste cadastro são criadas todas as páginas! Clique em Novo. No cadastro da Página, defina um título (esta informação não é exibida no site), escolha o tipo e a URL amigável. Já na aba DESIGN, edite o HTML como quiser. Clique em Salvar.



Usando a API

Para integrar com a API de dados, basta usar comandos e/ou tags especiais, tudo em HTML.


1. Por PALAVRAS-CHAVE

Coloque a palavra-chave onde quiser no HTML.

Exemplo:
Resultado:
                
Nome do nosso site: <b> {{Site.Nome}} </b>

Nome do nosso site: Tempbox
Para ver todas as tags, acesse http://docs.tempbox.com.br ( Funcionalidades gerais > Tags gerais )



2. Por COMANDOS

Coloque os comandos em comentários do HTML para listar dados. E dentro deste bloco de comandos, coloque as palavras-chave junto com HTML, como preferir.

<!-- start comando -->
Seu código HTML e palavras-chave
<!-- end comando -->


Exemplo: Listagem dos posts do blog
Resultado:
                
                    Últimas postagens em nosso blog:<br /><br />
<!-- start blog --> Post: "{{Post.Titulo}}" em {{Post.DataPublicacao}} /><br /> <!-- end blog -->
                
                Últimas postagens em nosso blog:
                
Post: "Governo anuncia acordo com congresso" em 02.10.18
Post: "União européia incentiva turismo na região" em 07.11.18


Exemplo: Usando parâmetros ao listar posts da categoria "turismo"
Resultado:
                
                    Últimas postagens em nosso blog:<br /><br />
<!-- start blog{categoria:turismo,quantidade:3} --> Post: "{{Post.Titulo}}" em {{Post.DataPublicacao}} /><br /> <!-- end blog -->
                
                    Últimas postagens em nosso blog:
                    
Post: "União européia incentiva turismo na região" em 07.11.18
Post: "América central organizará eventos relacionados a negócios e turismo" em 12.12.18
Post: "Novas opções de pacotes de viagens estão disponíveis online" em 12.12.18
Cada Módulo da plataforma tem os seus próprios comandos e tags. Veja a lista completa na DOCs http://docs.tempbox.com.br


3. CONTENT MANAGEMENT CLASSES (CMC)

Utilize as classes CSS do nosso framework (as CMCs) para funções avançadas

Exemplo: Formulário de contato

                
                    Nome: <input id="Text1" type="text" class="cmc-contato-nome" />  <br />
                    <input id="Button1" type="button" class="cmc-contato-botao-enviar" value="Enviar" />
                
            

Neste exemplo, ao clicar em Enviar (o botão cmc-contato-botao-enviar), o sistema irá submeter à API o Nome (campo cmc-contato-nome).

Cada formulário tem os seus campos obrigatórios e suas funcionalidades, Veja a lista completa de classes em cada módulo na DOCs http://docs.tempbox.com.br Nas abas Formulários de Filtro e Formulário de Cadastro, de cada módulo)


Exemplos

Alguns exemplos práticos de uso da API. Veja todos os comandos e tags em http://docs.tempbox.com.br

Acontecimentos NOVO
Anunciantes
Base de Conhecimentos NOVO
Blog
Blog (Categorias)
Blog (Categorias com 1 nível apenas)
Carrinho
Carrinho - 2 carrinhos na mesma página, com parâmetros diferentes
Carrinho - 2 carrinhos na mesma página, sem parâmetros (css por fora)
Cadastro
Características contextuais
Cartola - Clubes
CEP
Chamados NOVO
Checkout
Ocultar objeto quando a tag não tem conteúdo
Contato
Contato (campos mesclados)
Contato (campos mesclados - parte 2) Atualizado
Cursos
Cursos (categorias)
Depoimentos
Eventos
Funcionários
Galeria de fotos (Todas)
Galeria de fotos (em Páginas, via parametro no código)
Galeria de fotos (com URL dinamica personalizada)
Galeria de fotos - Modal
Imagens 1 - Imagem ausente é tratada por padrão
Imagens 2 - Imagem ausente tratada e não cupa espaço
Imagens 3 - Imagem ausente é substituída por uma de escolha no html
Imóveis
Imóveis (por comando)
Login
Newsletter
Notícias
Notícias (Categorias)
Notícias (Listando por código da seção) NOVO
Notícias (Listando por código da categoria)
Notícias - Mais lidas
Notícias - Por setor
Notícias - Por categoria
Notícias (todas as hashtags de todas as notícias)
Notícias (URL da categoria)
Paginação
Parceiros
Pedidos NOVO
Portfólios
Produtos
Produtos (Categorias)
Produtos (Categorias com 1 nível apenas)
Radio NOVO
Recibo Atualizado
RSS
Saudacao
Validação
Vídeos NOVO


Dicas e truques

Crie o HTML como quiser, apenas seguindo algumas pequenas regras, premissas e explicações:

  • No cadastro do Template (menu Configurações > Templates), há campos para colocar o cabeçalho e rodapé do site! Daí não precisa replicar em cada páginas criada.
  • Há ainda outro cabeçalho e rodape opcionais para as páginas internas, caso as páginas internas tenham um formato diferente da homepage.
  • Javascript, CSS e HTML podem ser usados como quiser
  • Para mapeamentos relativos, basta usar a barra no HREF. Ex: Para linkar para a homepage, basta usar somente uma barra. Ex: href="/"
  • As imagens podem ser linkadas com o caminho relativo ou mesmo o link direto. Ex: src="/img/foto.png"
  • A programação pesada do sistema (server side) é inteira feita pela equipe Tempbox. Se precisar de algo, é só pedir :)