Plantillas dinámicas

Por qué necesitamos plantillas dinámicas

Esta sección te presentará la lógica de plantillas de EUmail que puedes usar tanto con el editor de plantillas integrado de EUmail como con tus plantillas HTML. La idea principal es que tienes una plantilla con el diseño de tu correo electrónico y dentro de esa plantilla puedes poner algunas etiquetas de sustitución que EUmail puede reemplazar con los datos de combinación que proporciones.

Proporcionas esta información desde tu sistema cuando llamas a la API de EUmail y EUmail la fusionará en tu plantilla antes de enviar el correo electrónico. Para propósitos de desarrollo, también puedes definir datos de combinación dentro del editor.

EUmail implementa un conjunto modificado de “instrucciones” basadas en la biblioteca Handlebars.

Con esto queremos decir que la mayoría de las instrucciones definidas en la biblioteca Handlebars funcionarán como en otras aplicaciones que usan la misma biblioteca, mientras que hemos elegido mejorar otras en EUmail.

Generalmente esto significa que la instrucción estándar de Handlebars funcionará, pero también hemos añadido una versión mejorada.

Cómo funciona

Necesitarás dos cosas para usar EUmail con fines de producción:

• Una plantilla con el diseño de tu correo electrónico
• Datos de combinación en formato JSON

La plantilla puede residir en EUmail o puedes proporcionarla en la llamada a la API de EUmail. Los datos de combinación JSON son opcionales, pero la mayoría de los correos electrónicos transaccionales tienen algún tipo de campos variables, por lo que rara vez tiene sentido enviar un correo electrónico transaccional sin algunos datos de combinación como un nombre, nombre de usuario o correo electrónico.

datos de combinación + plantilla = correo electrónico final

Ejemplo de algunos datos de combinación en formato JSON:

{

	"mergedata": 

	{

		"vehicle_variant": "Convertible",

		"is_fourwheel": true

	}

}

Ejemplo de una plantilla con los campos anteriores

<table>

  <thead>

    <th>Parameter</th>

    <th>Value</th>

  </thead>

  <tr>

    <td>Variant:</td>

    <td>{{vehicle_variant}}</td>

  </tr>

  <tr>

    <td>Four wheel drive:</td>

    <td>{{#if is_fourwheel}}YES {{else}}NO {{/if}}</td>

  </tr>

</table>

HTML resultante:

Sustitución de variables

La sustitución simple es la forma más básica de sustitución – o el uso de variables.

Ejemplo de plantilla:

Hello {{firstname}}

Ejemplo de datos:

{

	"firstname":"Jane Doe"

}

Salida resultante:

Hello Jane Doe

Declaraciones

Condición IF

La declaración IF es un concepto fundamental en programación y se usa ampliamente. Te permite tomar decisiones y controlar el flujo de tu código basándote en ciertas condiciones. Al evaluar una condición específica, la declaración IF determina si ejecutar un bloque de código o no. Si la condición es verdadera, el código dentro de la declaración IF se ejecuta; de lo contrario, se omite. Esto te permite crear plantillas web dinámicas y receptivas que muestran contenido o realizan acciones basándose en criterios específicos o entrada del usuario.

####### Declaración IF simple

{{#if is_raining}}

Show this paragraph when variable 'is_raining' is true

{{/if}}

IF statement - comparison

{{#if weather=="raining"}}

Show this paragraph if variable "weather" equals "raining"

{{/if}}

IF - ELSE statement

{{#if weather=="raining"}}

Show this paragraph if variable "weather" equals "raining"

{{else}}

Show this if variable "weather" is not "raining"

{{/if}}

Condiciones UNLESS

La declaración UNLESS es una construcción condicional que te permite ejecutar un bloque de código solo si una condición específica es falsa. Proporciona una forma alternativa de manejar situaciones donde quieres realizar una acción o mostrar contenido cuando una condición no se cumple. Es como decir “haz esto a menos que esa condición sea verdadera”. La declaración “unless” ofrece flexibilidad para controlar el flujo de tu plantilla basándose en la negación de una condición.

{{#unless is_raining}}

Show this paragraph when 'is_raining' is false

{{/unless}}

Bucle EACH

La declaración EACH es una construcción que te permite iterar sobre una colección o array de datos y generar contenido dinámico basado en cada elemento de la colección. Proporciona una forma de recorrer elementos y repetir un bloque de código para cada elemento en la colección. Esto es particularmente útil para generar listas, tablas u otras estructuras repetitivas en tu salida HTML. La declaración EACH simplifica el proceso de mostrar múltiples elementos al manejar automáticamente la lógica de iteración por ti.

Plantilla

<ul>

{{#each cheeses}}

<li>{{this}}</li>

{{/each}}

</ul>

Datos de combinación

{

"cheeses":["Havarti","Emmentaler"]

}

Salida

<ul>

    <li>Havarti</li>

    <li>Emmentaler</li>

</ul>

Puedes usar la etiqueta opcional else para manejar la situación donde no hay elementos en la lista.

{{#each sections}}

<p>{{this}}</p>

{{else}}

<p>The sections list is empty</p>

{{/each}}

Operadores booleanos

Los operadores booleanos se usan en combinación con otras declaraciones - a menudo las declaraciones IF u UNLESS.

Los operadores booleanos se usan en programación y lógica para combinar o modificar condiciones. Ayudan a evaluar la veracidad o falsedad de expresiones y tomar decisiones basándose en ellas. Los dos operadores booleanos soportados por EUmail son “AND” y “OR”.

Los operadores booleanos se usan para crear condiciones complejas y controlar el flujo de ejecución del código en programación. Te permiten tomar decisiones basándose en la verdad o falsedad combinada de múltiples condiciones.

OR operator

The OR logic operator allows you to combine multiple conditions and evaluates to true if at least one of the conditions is true. In other words, it provides an “either/or” scenario.

Consideremos un ejemplo simple:

1. Condition 1: It’s raining outside.
2. Condition 2: It’s sunny outside.

Using the OR operator, we can create the following logical statement:

Condition 1 OR Condition 2

If either Condition 1 (raining) or Condition 2 (sunny) is true, the entire statement will evaluate to true. It means that as long as one of the conditions is met, the overall result will be true.

For instance:

• If it’s raining outside (Condition 1 is true), the statement evaluates to true.
• If it’s sunny outside (Condition 2 is true), the statement evaluates to true.
• If it’s both raining and sunny outside, the statement still evaluates to true because at least one of the conditions is true.

The OR operator is useful when you want to perform an action or make a decision based on multiple possibilities, and you only need one of those possibilities to be true.

With the OR operator you can evaulate a statement with two (and only two) parameters. If one of the two operators are true then the statement itself is true.

Example 1

{{#if (OR is_raining is_sunny)}}

Display this if the variable 'is_raining' or the variable 'is_sunny' are true

{{/if}}

Ejemplo 2

{{#if (OR weather=="raining" weather="sunny")}}

Display this if the variable weather is "raining" or "sunny".

{{/if}}

Operador AND

El operador lógico AND te permite combinar múltiples condiciones y evalúa como verdadero solo si todas las condiciones son verdaderas. Proporciona un escenario de “ambos/y”.

Let’s consider a simple example:

1. Condición 1: Está lloviendo afuera.
2. Condición 2: Tengo un paraguas.

Usando el operador AND, podemos crear la siguiente declaración lógica:

Condición 1 AND Condición 2

Para que toda la declaración se evalúe como verdadera, tanto la Condición 1 (lloviendo) como la Condición 2 (tener un paraguas) deben ser verdaderas. Si cualquiera de las condiciones es falsa, el resultado general será falso.

Por ejemplo:

Si está lloviendo afuera (Condición 1 es verdadera) y tienes un paraguas (Condición 2 es verdadera), la declaración se evalúa como verdadera.

Si no está lloviendo afuera (Condición 1 es falsa), independientemente de si tienes un paraguas o no, la declaración se evalúa como falsa.

Si está lloviendo pero no tienes un paraguas (Condición 2 es falsa), la declaración también se evalúa como falsa. El operador AND es útil cuando quieres asegurarte de que todas las condiciones especificadas se cumplan antes de tomar una acción o tomar una decisión. Requiere que todas las condiciones sean verdaderas para que el resultado general sea verdadero.

Ejemplo 1

{{#if (AND is_raining has_umbrella)}}

Display this if the variable 'is_raining' AND the variable 'has_umbrella' are both true

{{/if}}

Ejemplo 2

{{#if (AND weather=="raining" equipment="umbrella")}}

Display this if the value of variable "weather" is "raining" 

and the value of the variable "equipment" is "umbrella". 

{{/if}}

Operadores OR y AND anidados

Los operadores AND y OR solo pueden tomar dos argumentos cada uno. Si necesitas más argumentos necesitarás operadores “anidados”.

Los operadores anidados te permiten combinar múltiples condiciones juntas para tomar decisiones. Puedes usar “AND” para requerir que múltiples condiciones sean verdaderas, y “OR” para considerar que al menos una condición sea verdadera. Al anidar estos operadores, puedes crear condiciones complejas que consideren diferentes combinaciones de declaraciones.

Ejemplo de OR anidado

{{#if (OR is_raining (OR is_snowing is_thunder)}}

Display this if the value of "is_raining", "is_showing" or "is_thunder" are true.

{{/if}}

Ejemplo de AND anidado

{{#if (AND is_raining (AND is_snowing is_thunder)}}

Display this if the value of all three variables "is_raining", 

"is_showing" and "is_thunder" are true.

{{/if}}

Combinación de operadores

Cuando usas operadores lógicos como OR y AND en combinación, se deben usar paréntesis para agrupar condiciones y controlar el orden de evaluación. Al usar paréntesis, puedes crear expresiones lógicas más complejas y precisas. Por ejemplo, puedes priorizar ciertas condiciones sobre otras o especificar la relación entre diferentes grupos de condiciones. Asegura que las operaciones lógicas se realicen en el orden previsto y ayuda a aclarar la lógica de tus declaraciones.

{{#if (OR (AND is_raining has_umbrella) (AND is_snowing has_wintercoat))}}

Muestra esto si es seguro salir. 

Esto porque está lloviendo, pero tienes un paraguas, o está nevando, 

pero tienes un abrigo de invierno.

{{/if}}

HTML Escaping

HTML escaping en plantillas web es una técnica utilizada para asegurar que la entrada del usuario o los datos dinámicos se muestren como se pretende sin causar problemas o vulnerabilidades de seguridad. Implica convertir caracteres especiales en los datos a sus entidades HTML correspondientes, lo que evita que sean interpretados como código y potencialmente interrumpan la estructura o funcionalidad de la página web.

Usa triple handlebars para escapar el parsing de los merge-data. Puedes usar esto para incluir cualquier HTML sin que sea interpretado.

{{{body}}}