Skip to content

🔀 Condicionais em Modelos

Use lógica condicional para exibir conteúdo de forma inteligente e dinâmica nos seus documentos.

📖 Introdução

Condicionais permitem que você:

  • Exiba texto apenas quando uma variável tem valor
  • Mostre conteúdo diferente baseado em condições
  • Oculte seções vazias automaticamente
  • Compare valores numéricos

🎯 Helpers Condicionais

if - Condicional Básica

Exibe conteúdo se a variável existir e for verdadeira:

handlebars
{{#if custom.observacoes}}
  <p><strong>Observações:</strong> {{custom.observacoes}}</p>
{{/if}}

Com alternativa (else):

handlebars
{{#if custom.desconto}}
  <p>Desconto aplicado: {{custom.desconto}}%</p>
{{else}}
  <p>Sem desconto</p>
{{/if}}

ifExists - Verificar Existência

Verifica se a variável existe (não é null ou undefined):

handlebars
{{#ifExists customer.phone}}
  <p>Telefone: {{customer.phone}}</p>
{{/ifExists}}

ifNotEmpty - Verificar se Não Está Vazio

Útil para exibir sufixos ou prefixos apenas quando há valor:

handlebars
{{#ifNotEmpty custom.desconto}}
  {{custom.desconto}}%
{{/ifNotEmpty}}

Exemplo prático:

handlebars
<p>Desconto: {{#ifNotEmpty custom.desconto}}{{custom.desconto}}%{{/ifNotEmpty}}</p>
- ✅ Se `custom.desconto = 10` → "Desconto: 10%" - ✅ Se `custom.desconto` está vazio → "Desconto: "

ifEquals - Comparação de Igualdade

Compara se dois valores são iguais:

handlebars
{{#ifEquals custom.tipo "premium"}}
  <div class="badge-premium">Cliente Premium</div>
{{/ifEquals}}

Com alternativa:

handlebars
{{#ifEquals custom.status "ativo"}}
  <span style="color: green;">✓ Ativo</span>
{{else}}
  <span style="color: red;">✗ Inativo</span>
{{/ifEquals}}

ifNotEquals - Comparação de Diferença

Verifica se dois valores são diferentes:

handlebars
{{#ifNotEquals custom.tipo "basico"}}
  <p>Benefícios exclusivos incluídos!</p>
{{/ifNotEquals}}

ifGreaterThan - Maior Que

Compara se um valor é maior que outro:

handlebars
{{#ifGreaterThan custom.valor 1000}}
  <p style="color: red;">⚠️ Valor acima do limite padrão</p>
{{/ifGreaterThan}}

Com alternativa:

handlebars
{{#ifGreaterThan custom.idade 18}}
  <p>Maior de idade</p>
{{else}}
  <p>Menor de idade - Responsável necessário</p>
{{/ifGreaterThan}}

ifLessThan - Menor Que

Compara se um valor é menor que outro:

handlebars
{{#ifLessThan custom.parcelas 12}}
  <p>Pagamento à vista ou parcelado em até {{custom.parcelas}}x</p>
{{/ifLessThan}}

💡 Exemplos Práticos

1. Exibir Desconto Apenas se Houver

html
<h2>Valores</h2>
<p>Valor Total: R$ {{custom.valor_total}}</p>

{{#ifNotEmpty custom.desconto}}
<p>Desconto: {{custom.desconto}}%</p>
<p>Valor com Desconto: R$ {{custom.valor_final}}</p>
{{/ifNotEmpty}}

2. Mostrar Endereço Completo ou Parcial

html
<h3>Endereço</h3>
<p>{{customer.address.street}}, {{customer.address.number}}</p>

{{#ifExists customer.address.complement}}
<p>{{customer.address.complement}}</p>
{{/ifExists}}

<p>{{customer.address.city}}/{{customer.address.state}} - CEP: {{customer.address.zip_code}}</p>

3. Classificação de Cliente por Valor

html
{{#ifGreaterThan custom.valor_contrato 50000}}
  <div style="background: gold; padding: 10px;">
    <h3>🌟 CLIENTE VIP</h3>
    <p>Atendimento prioritário e benefícios exclusivos</p>
  </div>
{{else}}
  {{#ifGreaterThan custom.valor_contrato 10000}}
    <div style="background: silver; padding: 10px;">
      <h3>⭐ CLIENTE PREMIUM</h3>
      <p>Benefícios e descontos especiais</p>
    </div>
  {{else}}
    <div style="background: lightblue; padding: 10px;">
      <h3>✓ CLIENTE PADRÃO</h3>
      <p>Atendimento de qualidade garantido</p>
    </div>
  {{/ifGreaterThan}}
{{/ifGreaterThan}}

4. Status do Pagamento

html
<h2>Status do Pagamento</h2>

{{#ifEquals custom.status_pagamento "pago"}}
  <p style="color: green; font-weight: bold;">✓ PAGO</p>
  <p>Data do Pagamento: {{formatDateShortPT custom.data_pagamento}}</p>
{{else}}
  {{#ifEquals custom.status_pagamento "pendente"}}
    <p style="color: orange; font-weight: bold;">⏳ PENDENTE</p>
    <p>Vencimento: {{formatDateShortPT custom.data_vencimento}}</p>
  {{else}}
    <p style="color: red; font-weight: bold;">✗ ATRASADO</p>
    <p>Venceu em: {{formatDateShortPT custom.data_vencimento}}</p>
  {{/ifEquals}}
{{/ifEquals}}

5. Dados Opcionais do Cliente

html
<h2>Informações de Contato</h2>

<p><strong>Nome:</strong> {{customer.name}}</p>
<p><strong>Email:</strong> {{customer.email}}</p>

{{#ifExists customer.phone}}
<p><strong>Telefone:</strong> {{customer.phone}}</p>
{{/ifExists}}

{{#ifExists customer.mobile}}
<p><strong>Celular:</strong> {{customer.mobile}}</p>
{{/ifExists}}

{{#ifExists customer.whatsapp}}
<p><strong>WhatsApp:</strong> {{customer.whatsapp}}</p>
{{/ifExists}}

6. Cláusulas Condicionais em Contrato

html
<h2>CLÁUSULAS ESPECIAIS</h2>

{{#ifGreaterThan custom.prazo_meses 12}}
<p><strong>Cláusula 1:</strong> Devido ao prazo estendido de {{custom.prazo_meses}} meses, 
aplicam-se condições especiais de renovação automática.</p>
{{/ifGreaterThan}}

{{#ifNotEmpty custom.garantia}}
<p><strong>Cláusula 2:</strong> O CONTRATADO oferece garantia de {{custom.garantia}} 
contra defeitos de fabricação e mão de obra.</p>
{{/ifNotEmpty}}

{{#ifEquals custom.tipo_pagamento "parcelado"}}
<p><strong>Cláusula 3:</strong> O pagamento será realizado em {{custom.num_parcelas}} 
parcelas mensais de R$ {{custom.valor_parcela}}.</p>
{{/ifEquals}}

7. Seção de Observações Condicional

html
{{#if custom.observacoes}}
<div style="border: 1px solid #ccc; padding: 15px; margin-top: 20px;">
  <h3>📝 Observações</h3>
  <p>{{custom.observacoes}}</p>
</div>
{{/if}}

🎨 Condicionais com Estilo

Aplicar Classes CSS Condicionalmente

html
<div style="{{#ifEquals custom.prioridade 'alta'}}background: #ffcccc;{{else}}background: #ccffcc;{{/ifEquals}} padding: 10px;">
  <p>Prioridade: {{uppercase custom.prioridade}}</p>
</div>

Ícones e Emojis Condicionais

html
<p>
  Status: 
  {{#ifEquals custom.status "concluido"}}✅{{/ifEquals}}
  {{#ifEquals custom.status "em_andamento"}}🔄{{/ifEquals}}
  {{#ifEquals custom.status "pendente"}}⏳{{/ifEquals}}
  {{uppercase custom.status}}
</p>

🚨 Casos de Uso Avançados

Validação de Idade para Contrato

html
{{#ifLessThan customer.idade 18}}
<div style="background: #fff3cd; border: 2px solid #856404; padding: 15px; margin: 20px 0;">
  <h3>⚠️ ATENÇÃO</h3>
  <p>Cliente menor de idade. Necessária assinatura de responsável legal.</p>
  <p><strong>Responsável:</strong> {{custom.responsavel_nome}}</p>
  <p><strong>CPF Responsável:</strong> {{custom.responsavel_cpf}}</p>
</div>
{{/ifLessThan}}

Faixa de Valores com Múltiplas Condições

html
<h2>Categoria de Investimento</h2>

{{#ifGreaterThan custom.investimento 100000}}
  <p style="font-size: 20px; color: gold;">💎 INVESTIDOR DIAMANTE</p>
  <ul>
    <li>Assessoria personalizada 24/7</li>
    <li>Rentabilidade preferencial</li>
    <li>Eventos exclusivos</li>
  </ul>
{{else}}
  {{#ifGreaterThan custom.investimento 50000}}
    <p style="font-size: 18px; color: silver;">🌟 INVESTIDOR PLATINUM</p>
    <ul>
      <li>Assessoria dedicada</li>
      <li>Relatórios mensais</li>
    </ul>
  {{else}}
    <p style="font-size: 16px; color: bronze;">⭐ INVESTIDOR GOLD</p>
    <ul>
      <li>Suporte prioritário</li>
      <li>Relatórios trimestrais</li>
    </ul>
  {{/ifGreaterThan}}
{{/ifGreaterThan}}

✅ Boas Práticas

✅ Faça

  • Use condicionais para ocultar seções vazias
  • Combine com helpers de formatação: {{#if custom.nome}}{{uppercase custom.nome}}{{/if}}
  • Forneça alternativas com else quando apropriado
  • Use ifNotEmpty para sufixos/prefixos (%, R$, etc)

❌ Evite

  • Condicionais muito complexas e aninhadas (dificulta manutenção)
  • Repetir código em cada condição (use CSS classes quando possível)
  • Esquecer de fechar tags {{/if}}, {{/ifEquals}}, etc

🎯 Resumo dos Helpers

HelperUsoExemplo
ifVerifica se existe e é verdadeiro{{#if var}}...{{/if}}
ifExistsVerifica se não é null/undefined{{#ifExists var}}...{{/ifExists}}
ifNotEmptyVerifica se não está vazio (0, "", null){{#ifNotEmpty var}}...{{/ifNotEmpty}}
ifEqualsCompara igualdade{{#ifEquals var "valor"}}...{{/ifEquals}}
ifNotEqualsCompara diferença{{#ifNotEquals var "valor"}}...{{/ifNotEquals}}
ifGreaterThanMaior que{{#ifGreaterThan var 100}}...{{/ifGreaterThan}}
ifLessThanMenor que{{#ifLessThan var 100}}...{{/ifLessThan}}

💡 Lembre-se

Todos os helpers condicionais podem usar {{else}} para especificar conteúdo alternativo quando a condição for falsa.

🎬 Conclusão

Com condicionais, seus documentos se tornam verdadeiramente dinâmicos e inteligentes, adaptando-se automaticamente aos dados disponíveis e às regras de negócio específicas de cada situação!

Documentação em constante atualização