🔀 Condicionales en Plantillas

Use lógica condicional para mostrar contenido de forma inteligente y dinámica en sus documentos.

📖 Introducción

Los condicionales le permiten:

• Mostrar texto solo cuando una variable tiene valor
• Mostrar contenido diferente basado en condiciones
• Ocultar secciones vacías automáticamente
• Comparar valores numéricos

🎯 Helpers Condicionales

if - Condicional Básica

Muestra contenido si la variable existe y es verdadera:

{{#if custom.observaciones}}
  <p><strong>Observaciones:</strong> {{custom.observaciones}}</p>
{{/if}}

Con alternativa (else):

{{#if custom.descuento}}
  <p>Descuento aplicado: {{custom.descuento}}%</p>
{{else}}
  <p>Sin descuento</p>
{{/if}}

ifExists - Verificar Existencia

Verifica si la variable existe (no es null o undefined):

{{#ifExists customer.phone}}
  <p>Teléfono: {{customer.phone}}</p>
{{/ifExists}}

ifNotEmpty - Verificar si No Está Vacío

Útil para mostrar sufijos o prefijos solo cuando hay valor:

{{#ifNotEmpty custom.descuento}}
  {{custom.descuento}}%
{{/ifNotEmpty}}

Ejemplo práctico:

<p>Descuento: {{#ifNotEmpty custom.descuento}}{{custom.descuento}}%{{/ifNotEmpty}}</p>

- ✅ Si `custom.descuento = 10` → "Descuento: 10%" - ✅ Si `custom.descuento` está vacío → "Descuento: "

ifEquals - Comparación de Igualdad

Compara si dos valores son iguales:

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

Con alternativa:

{{#ifEquals custom.estado "activo"}}
  <span style="color: green;">✓ Activo</span>
{{else}}
  <span style="color: red;">✗ Inactivo</span>
{{/ifEquals}}

ifNotEquals - Comparación de Diferencia

Verifica si dos valores son diferentes:

{{#ifNotEquals custom.tipo "basico"}}
  <p>¡Beneficios exclusivos incluidos!</p>
{{/ifNotEquals}}

ifGreaterThan - Mayor Que

Compara si un valor es mayor que otro:

{{#ifGreaterThan custom.valor 1000}}
  <p style="color: red;">⚠️ Valor por encima del límite estándar</p>
{{/ifGreaterThan}}

Con alternativa:

{{#ifGreaterThan custom.edad 18}}
  <p>Mayor de edad</p>
{{else}}
  <p>Menor de edad - Responsable necesario</p>
{{/ifGreaterThan}}

ifLessThan - Menor Que

Compara si un valor es menor que otro:

{{#ifLessThan custom.cuotas 12}}
  <p>Pago al contado o a plazos hasta {{custom.cuotas}}x</p>
{{/ifLessThan}}

💡 Ejemplos Prácticos

1. Mostrar Descuento Solo si Existe

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

{{#ifNotEmpty custom.descuento}}
<p>Descuento: {{custom.descuento}}%</p>
<p>Valor con Descuento: $ {{custom.valor_final}}</p>
{{/ifNotEmpty}}

2. Mostrar Dirección Completa o Parcial

<h3>Dirección</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}} - CP: {{customer.address.zip_code}}</p>

3. Clasificación de Cliente por Valor

{{#ifGreaterThan custom.valor_contrato 50000}}
  <div style="background: gold; padding: 10px;">
    <h3>🌟 CLIENTE VIP</h3>
    <p>Atención prioritaria y beneficios exclusivos</p>
  </div>
{{else}}
  {{#ifGreaterThan custom.valor_contrato 10000}}
    <div style="background: silver; padding: 10px;">
      <h3>⭐ CLIENTE PREMIUM</h3>
      <p>Beneficios y descuentos especiales</p>
    </div>
  {{else}}
    <div style="background: lightblue; padding: 10px;">
      <h3>✓ CLIENTE ESTÁNDAR</h3>
      <p>Atención de calidad garantizada</p>
    </div>
  {{/ifGreaterThan}}
{{/ifGreaterThan}}

4. Estado del Pago

<h2>Estado del Pago</h2>

{{#ifEquals custom.estado_pago "pagado"}}
  <p style="color: green; font-weight: bold;">✓ PAGADO</p>
  <p>Fecha de Pago: {{formatDateShortES custom.fecha_pago}}</p>
{{else}}
  {{#ifEquals custom.estado_pago "pendiente"}}
    <p style="color: orange; font-weight: bold;">⏳ PENDIENTE</p>
    <p>Vencimiento: {{formatDateShortES custom.fecha_vencimiento}}</p>
  {{else}}
    <p style="color: red; font-weight: bold;">✗ ATRASADO</p>
    <p>Venció el: {{formatDateShortES custom.fecha_vencimiento}}</p>
  {{/ifEquals}}
{{/ifEquals}}

5. Datos Opcionales del Cliente

<h2>Información de Contacto</h2>

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

{{#ifExists customer.phone}}
<p><strong>Teléfono:</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 Condicionales en Contrato

<h2>CLÁUSULAS ESPECIALES</h2>

{{#ifGreaterThan custom.plazo_meses 12}}
<p><strong>Cláusula 1:</strong> Debido al plazo extendido de {{custom.plazo_meses}} meses, 
se aplican condiciones especiales de renovación automática.</p>
{{/ifGreaterThan}}

{{#ifNotEmpty custom.garantia}}
<p><strong>Cláusula 2:</strong> El CONTRATADO ofrece garantía de {{custom.garantia}} 
contra defectos de fabricación y mano de obra.</p>
{{/ifNotEmpty}}

{{#ifEquals custom.tipo_pago "cuotas"}}
<p><strong>Cláusula 3:</strong> El pago se realizará en {{custom.num_cuotas}} 
cuotas mensuales de $ {{custom.valor_cuota}}.</p>
{{/ifEquals}}

7. Sección de Observaciones Condicional

{{#if custom.observaciones}}
<div style="border: 1px solid #ccc; padding: 15px; margin-top: 20px;">
  <h3>📝 Observaciones</h3>
  <p>{{custom.observaciones}}</p>
</div>
{{/if}}

🎨 Condicionales con Estilo

Aplicar Clases CSS Condicionalmente

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

Íconos y Emojis Condicionales

<p>
  Estado: 
  {{#ifEquals custom.estado "completado"}}✅{{/ifEquals}}
  {{#ifEquals custom.estado "en_progreso"}}🔄{{/ifEquals}}
  {{#ifEquals custom.estado "pendiente"}}⏳{{/ifEquals}}
  {{uppercase custom.estado}}
</p>

🚨 Casos de Uso Avanzados

Validación de Edad para Contrato

{{#ifLessThan customer.edad 18}}
<div style="background: #fff3cd; border: 2px solid #856404; padding: 15px; margin: 20px 0;">
  <h3>⚠️ ATENCIÓN</h3>
  <p>Cliente menor de edad. Necesaria firma de responsable legal.</p>
  <p><strong>Responsable:</strong> {{custom.responsable_nombre}}</p>
  <p><strong>DNI Responsable:</strong> {{custom.responsable_dni}}</p>
</div>
{{/ifLessThan}}

Rango de Valores con Múltiples Condiciones

<h2>Categoría de Inversión</h2>

{{#ifGreaterThan custom.inversion 100000}}
  <p style="font-size: 20px; color: gold;">💎 INVERSOR DIAMANTE</p>
  <ul>
    <li>Asesoría personalizada 24/7</li>
    <li>Rentabilidad preferencial</li>
    <li>Eventos exclusivos</li>
  </ul>
{{else}}
  {{#ifGreaterThan custom.inversion 50000}}
    <p style="font-size: 18px; color: silver;">🌟 INVERSOR PLATINUM</p>
    <ul>
      <li>Asesoría dedicada</li>
      <li>Informes mensuales</li>
    </ul>
  {{else}}
    <p style="font-size: 16px; color: bronze;">⭐ INVERSOR GOLD</p>
    <ul>
      <li>Soporte prioritario</li>
      <li>Informes trimestrales</li>
    </ul>
  {{/ifGreaterThan}}
{{/ifGreaterThan}}

✅ Buenas Prácticas

✅ Haga

• Use condicionales para ocultar secciones vacías
• Combine con helpers de formato: {{#if custom.nombre}}{{uppercase custom.nombre}}{{/if}}
• Proporcione alternativas con else cuando sea apropiado
• Use ifNotEmpty para sufijos/prefijos (%, $, etc)

❌ Evite

• Condicionales muy complejas y anidadas (dificulta el mantenimiento)
• Repetir código en cada condición (use clases CSS cuando sea posible)
• Olvidar cerrar etiquetas {{/if}}, {{/ifEquals}}, etc

🎯 Resumen de Helpers

Helper	Uso	Ejemplo
if	Verifica si existe y es verdadero	{{#if var}}...{{/if}}
ifExists	Verifica si no es null/undefined	{{#ifExists var}}...{{/ifExists}}
ifNotEmpty	Verifica si no está vacío (0, "", null)	{{#ifNotEmpty var}}...{{/ifNotEmpty}}
ifEquals	Comparación de igualdad	{{#ifEquals var "valor"}}...{{/ifEquals}}
ifNotEquals	Comparación de diferencia	{{#ifNotEquals var "valor"}}...{{/ifNotEquals}}
ifGreaterThan	Mayor que	{{#ifGreaterThan var 100}}...{{/ifGreaterThan}}
ifLessThan	Menor que	{{#ifLessThan var 100}}...{{/ifLessThan}}

💡 Recuerde

Todos los helpers condicionales pueden usar {{else}} para especificar contenido alternativo cuando la condición es falsa.

🎬 Conclusión

¡Con condicionales, sus documentos se vuelven verdaderamente dinámicos e inteligentes, adaptándose automáticamente a los datos disponibles y a las reglas de negocio específicas de cada situación!