Variables y formatos de la tarjeta de fidelización ({{ }} y pipes)

Las variables permiten que cada cliente vea sus propios datos en la tarjeta de fidelización: su nombre, sus puntos, su nivel o su cumpleaños. Se escriben entre dobles llaves, como {{ firstName }}, en Label o Value de cualquier campo del anverso de la tarjeta en Customize → Loyalty card. Añade un formato después de una barra vertical (|) para cambiar cómo se ven los datos, por ejemplo {{ birthdate | date:'dd/MM/yyyy' }}. Esta guía recoge todas las variables y formatos, con ejemplos que puedes copiar. Para elegir qué campos aparecen en la tarjeta, consulta cómo diseñar tu tarjeta de fidelización.

Dónde escribir las variables ¶

1

Abre el anverso de la tarjeta

Ve a Customize → Loyalty card, elige Apple Wallet store card o Google Wallet loyalty card y comprueba que la vista muestra Card front.

2

Abre los campos

Haz clic en la zona resaltada sobre los textos de la tarjeta para abrir Card front fields. Haz clic en cualquier campo para editarlo.

3

Escribe la etiqueta y el valor

Escribe texto, variables o ambos en Label y Value. Haz clic en el icono { } al final de cada cuadro para elegir una variable de una lista en lugar de escribirla. Para fechas y números, la lista también ofrece formatos ya preparados.

4

Guarda

Haz clic en Save en el campo y después en Save en Card front fields. Todavía no se ha guardado nada: haz clic en Save en la barra de guardado de la parte superior de la página para publicar los cambios. Las tarjetas instaladas se actualizan unos minutos después.

La vista previa del panel de administración usa datos de ejemplo (Ada Lovelace, 1250 puntos, y tu primer nivel o el nivel que estás editando), así que puedes comprobar el resultado antes de guardar.

Cómo se escribe una variable ¶

Una variable va entre dobles llaves. Los espacios dentro de las llaves no importan, así que {{firstName}} y {{ firstName }} son lo mismo.

{{ variable }}
{{ variable | format }}
{{ variable | format:'text' }}
{{ variable | format:'text':'other text' }}
{{ variable | first format | second format }}

• Los formatos van después de una barra vertical (|). Puedes encadenar varios y se aplican de izquierda a derecha.
• Los valores de un formato van después de dos puntos (:), unos dos puntos por cada valor.
• Los textos van entre comillas simples o dobles: default:'Customer'. Los números no necesitan comillas: slice:0:12.
• Otra variable puede ser un valor sin comillas: default:email muestra el correo cuando la primera variable está vacía.
• Mezcla con libertad texto y variables en el mismo cuadro: Hi {{ firstName }}!
• Los nombres de las variables distinguen mayúsculas y minúsculas: firstName funciona, firstname no.
• Escribe cada variable en una sola línea.

Si no se puede leer una variable o un formato, la tarjeta muestra el texto exactamente como lo escribiste, con las llaves incluidas. El panel de administración detecta estos errores antes de guardar (consulta los mensajes de error).

Variables que puedes usar en el anverso de la tarjeta ¶

Estas variables funcionan en todas las etiquetas y valores del anverso de la tarjeta y en el título del pase de Apple Wallet. La columna In the { } list muestra el nombre en el selector de variables. Algunos textos del programa no están en la lista, pero funcionan si los escribes.

Los identificadores están en More variables dentro de la lista. Tier status y Tier points solo aparecen en la lista cuando tu programa tiene niveles.

No se pueden poner enlaces en el anverso de la tarjeta. Variables como referralLink, inviteFriendLink o los enlaces a las páginas del cliente (linkCustomerAppRewards y similares) solo funcionan en el reverso de la tarjeta y en los botones. Lo mismo vale para las direcciones web escritas.

Formatos (pipes) ¶

Los formatos solo funcionan con el tipo de dato que esperan. date necesita una fecha (birthdate, memberSince), number y plural necesitan un número (balance, tierPoints), y uppercase, lowercase, titlecase y slice necesitan texto. default y if funcionan con cualquier dato. El panel de administración te avisa cuando un formato no encaja con la variable.

0 no es vacío. Un cliente con 0 puntos muestra 0, no el valor de default.

Patrones de fecha ¶

date acepta cuatro estilos ya preparados que se adaptan al idioma de la tarjeta, o tu propio patrón.

En tus propios patrones, d es el día, dd el día con dos cifras, MM el mes en número, MMM el nombre corto del mes, MMMM el nombre completo del mes y yyyy el año. Usa yyyy y dd en minúsculas: YYYY o DD en mayúsculas no dan la fecha que esperas, y entonces la tarjeta muestra la fecha tal como está guardada, por ejemplo 1990-05-14 para birthdate.

Números ¶

number usa el separador del idioma de la tarjeta: 1,250 en inglés, 1.250 en alemán. El español y el italiano solo lo añaden a partir de cinco cifras (12.500). Sin un valor, muestra hasta tres decimales. Tu saldo es un número entero, así que {{ balance | number }} suele bastar. Para forzar los decimales, añade un valor con el patrón '{minimum digits}.{minimum decimals}-{maximum decimals}', por ejemplo number:'1.0-0' para no mostrar decimales.

Recetas ¶

Copia estas fórmulas en Value o Label y adapta los textos.

Contenido predeterminado de cada campo ¶

Cada campo empieza con contenido integrado, y las etiquetas integradas se traducen por ti. Restore default las recupera.

Reglas del anverso de la tarjeta ¶

• Un valor vacío oculta el campo. Cuando Value queda vacío para un cliente, por ejemplo {{ phone }} para alguien sin teléfono, el campo no aparece en su tarjeta. El panel avisa con "May be left off the pass for customers without this data. Add a default to always show it." Añade default para mostrar siempre algo.
• 255 caracteres como máximo por etiqueta o valor. El título del pase admite 80, en Apple Wallet y en Google Wallet.
• Sin enlaces. Los enlaces y las direcciones web se rechazan en el anverso. Ponlos en una sección del reverso o en un botón.
• Fila de Apple Wallet. Los cuatro campos bajo el banner comparten una fila, empezando por la izquierda. Los campos ocultos o vacíos no dejan hueco. Los textos largos se reducen y luego se cortan, así que mantén los valores cortos.
• Filas de Google Wallet. Cada fila tiene dos campos. Si uno está vacío, el otro empieza la fila, y una fila vacía se omite.
• Niveles. Un diseño de nivel puede cambiar cualquier campo o mostrar un campo que el diseño predeterminado oculta. Consulta los diseños por nivel.
• Actualizaciones. Las tarjetas instaladas reciben un diseño nuevo unos cinco minutos después de guardar. Cuando cambian los datos de un cliente, como sus puntos, sus puntos de nivel o su nivel, su tarjeta se actualiza en cuestión de segundos.

Traducciones ¶

Para traducir etiquetas y valores, elige el idioma con el botón de idioma bajo la vista previa y después abre Card front fields. La ventana muestra el idioma que estás traduciendo. Solo cambian entre idiomas tus propios textos. Deja los nombres de variables, los nombres de formatos y los patrones exactamente como están. Traduce solo los textos entre comillas, por ejemplo default:'Cliente'. Si muestras los puntos de nivel, deja también la variable de puntos de nivel en tu texto predeterminado: cuando solo aparece en una traducción, la tarjeta no se actualiza al cambiar los puntos de nivel del cliente.

Las fechas y los números siguen el idioma de cada texto. {{ memberSince | date:'longDate' }} muestra "February 3, 2024" en inglés y "3 de febrero de 2024" en español. Google Wallet lo hace en todos los idiomas. En Apple Wallet, un texto solo se formatea en otro idioma cuando añades una traducción para él, aunque la traducción sea el mismo texto.

Los valores de la primera fila de Google Wallet (First row, left field y First row, right field) muestran el mismo texto en todos los idiomas, escrito en tu idioma predeterminado. Consulta traducir las secciones de Wallet.

Otros lugares que usan variables ¶

El reverso de la tarjeta, los enlaces de los botones y los mensajes push automáticos también admiten variables entre dobles llaves y resuelven los mismos formatos. Ahí el panel no comprueba los formatos mientras escribes, así que prueba el resultado en una tarjeta. Las variables de enlace (referralLink, inviteFriendLink, linkCustomerAppRewards, linkCustomerAppProfile y el resto de enlaces a páginas del cliente) están permitidas en las secciones del reverso, los botones y los mensajes push automáticos. El texto de las notificaciones push de campañas solo admite referralLink e inviteFriendLink. El título de Google Wallet es texto sin formato y no usa variables.

Mensajes de error ¶

El panel comprueba cada etiqueta y valor mientras escribes y muestra el problema bajo el cuadro.