Liquid

DotLiquid dans l’éditeur de modèles The Wallet Crew

Ce guide montre comment utiliser DotLiquid dans la plateforme The Wallet Crew pour créer des Cartes plus intelligentes, personnaliser le contenu et automatiser le bon message au bon moment.

Aucun développeur n’est requis pour les bases.

Contenu

• Les deux blocs de base

• Afficher une valeur sur une Carte

• Assign — créez votre propre variable

• if / elsif / else — contenu intelligent selon le client

• unless — la condition silencieuse

• Opérateurs — comment comparer des éléments

• case / when — logique propre à plusieurs niveaux

• Filtres — transformer n’importe quelle valeur

• Filtres de chaîne

• Filtres numériques

• Filtres de tableau

• Formatage des dates

• Arithmétique des dates

• Indicateurs de date — cette Carte est-elle encore valide ?

• now / today

• Combiner des filtres de date

• capture — construire un bloc de message

Les deux blocs de base

Tout dans DotLiquid repose sur deux types de balises :

{{ }}   → Affiche quelque chose. Montrez-le sur la Carte.
{% %}   → Logique. Conditions, boucles, affectations.

Tout le reste n’est que du texte affiché tel quel.

Afficher une valeur sur une Carte

Si vous tapez {{ }} vous verrez une liste des variables possibles.

Placez n’importe quel champ de données entre {{ }} et il s’affiche sur la Carte.

Carte de fidélité de {{ customer.first_name }}
Solde de points : {{ customer.points }}
Membre depuis : {{ customer.signup_date }}

Ce que le client voit sur sa Carte :

Carte de fidélité de Marie
Solde de points : 340
Membre depuis : 2023-06-15

Si le champ est vide, rien ne s’affiche. Pas d’erreur, pas de libellé vide.

Assign et créez votre propre variable

Besoin de calculer quelque chose, de le nommer et de le réutiliser ? Utilisez assign.

{% assign tier_label = "Gold Member" %}
Bon retour, {{ tier_label }}.

Ou construisez-le à partir de données existantes :

{% assign display_name = customer.first_name | upcase %}
{{ display_name }}, votre offre exclusive vous attend.

if / elsif / else — contenu intelligent selon le client

C’est ici que les Cartes deviennent intelligentes. Affichez un contenu différent selon la personne qui détient la Carte.

{% if customer.points >= 1000 %}
	Platinum — vous débloquez la livraison express gratuite.
{% elsif customer.points >= 500 %}
	Gold — profitez de la livraison standard gratuite à partir de 50 €.
{% elsif customer.points >= 200 %}
	Silver — 5 % de réduction sur votre prochaine visite.
{% else %}
	Bienvenue ! Collectez 200 points pour atteindre Silver.
{% endif %}

Terminez toujours avec {% endif %}. C’est l’erreur la plus courante.

Cas d’usage réel The Wallet Crew : afficher un message différent au dos de la Carte selon le niveau.

{% if customer.tier == "VIP" %}
	Accès prioritaire à toutes les nouvelles collections. Présentez cette Carte au moment du paiement.
{% else %}
	Gagnez 1 point pour chaque 1 € dépensé en magasin ou en ligne.
{% endif %}

condition unless

unless exécute le bloc lorsque la condition est pas vraie. Idéal pour la logique de désabonnement.

{% unless customer.push_disabled == true %}
	Les notifications push sont actives sur cette Carte.
{% endunless %}

Se lit naturellement en anglais simple : unless la push est désactivée, affichez ceci.

Opérateurs, comment comparer des éléments

Opérateur	Ce qu’il fait	Exemple sur la Carte
==	Exactement égal	tier == "Gold"
!=	Différent de	tier != "Standard"
>	Supérieur à	points > 500
<	Inférieur à	points < 100
>=	Supérieur ou égal à	points >= 500
<=	Inférieur ou égal à	points <= 99
et	Les deux doivent être vrais	points > 100 and active == true
ou	Au moins un vrai	tier == "Gold" or tier == "Platinum"
contient	Inclut cette valeur	tags contains "event_guest"

case / when, logique propre à plusieurs niveaux

Lorsqu’on compare le même champ à de nombreuses valeurs possibles, case est plus propre que d’empiler des elsif.

{% case customer.tier %}
	{% when "Platinum" %}
		Avantage : retours gratuits illimités + personal shopper.
	{% when "Gold" %}
		Avantage : livraison gratuite sur toutes les commandes.
	{% when "Silver" %}
		Avantage : accès anticipé aux soldes.
	{% else %}
		Avantage : bienvenue — gagnez des points à chaque achat.
{% endcase %}

Parfait pour les niveaux de fidélité, les catégories de billets d’événement ou les libellés de type coupon.

Filtres, transformez n’importe quelle valeur

Les filtres modifient une valeur avant de l’afficher. Utilisez la | barre verticale :

{{ value | filter }}
{{ value | filter: argument }}

Enchaînez-les de gauche à droite :

{{ customer.first_name | downcase | capitalize }}

Filtres de chaîne

Filtre	Ce qu’il fait	Exemple	Résultat
upcase	EN MAJUSCULES	{{ "hello" | upcase }}	HELLO
downcase	tout en minuscules	{{ "HELLO" | downcase }}	hello
capitalize	Première lettre en majuscule	{{ "marie" | capitalize }}	Marie
strip	Supprimer les espaces autour	{{ " hi " | strip }}	hi
replace	Remplacer un mot	{{ "Bonjour Monde" replace: "Monde", Marie" }}	Bonjour Marie
truncate	Raccourcir à N caractères	{{ "Long message here" | truncate: 10 }}	Long me
append	Ajouter à la fin	{{ "Gold" append: "Member" }}	Gold Member
prepend	Ajouter au début	{{ "Member" | prepend: "VIP" }}	VIP Member

Exemple réel : nettoyer un nom arrivé de façon désordonnée depuis un formulaire.

{% assign clean_name = customer.first_name | strip | capitalize %}
Bienvenue, {{ clean_name }} !

Filtres numériques

Filtre	Ce qu’il fait	Exemple	Résultat
plus	Ajouter	{{ customer.points	plus: 50 }}`	390
minus	Soustraire	{{ customer.points	minus: 200 }}`	140
times	Multiplier	{{ price	times: 1.2 }}`	120
divided_by	Diviser	{{ points	divided_by: 10 }}`	34
modulo	Reste	{{ points	modulo: 100 }}`	40
round	Arrondir à N décimales	{{ 9.876	round: 2 }}`	9.88
ceil	Toujours arrondir au supérieur	{{ 9.1	ceil }}`	10
floor	Toujours arrondir à l’inférieur	{{ 9.9	floor }}`	9

Afficher les points restants avant le prochain niveau :

{% assign points_needed = 500 | minus: customer.points %}
{% if points_needed > 0 %}
	{{ points_needed }} points pour atteindre Gold 
{% endif %}

Filtres de tableau

Filtre	Ce qu’il fait
first	Premier élément d’une liste
last	Dernier élément d’une liste
size	Nombre d’éléments
join	Combiner les éléments en une chaîne
sort	Trier par ordre alphabétique ou par champ
uniq	Supprimer les doublons
map	Extraire une propriété de tous les éléments
where	Filtrer les éléments selon la valeur d’un champ

Afficher combien de récompenses un client peut utiliser :

Vous avez {{ customer.available_rewards | size }} récompenses prêtes à être utilisées.

Lister tous les emplacements de magasin actifs :

{{ stores | where: "active", true | map: "city" | join: " · " }}

Formatage des dates

Appliquez le date filtre avec une chaîne de format pour afficher les dates proprement sur une Carte.

{{ pass.expiry_date | date: "%d/%m/%Y" }}

Jetons de format :

Jeton	Ce qu’il produit	Exemple
%d	Jour	26
%M	Mois	3
%y	Année courte	25
%A	Nom complet du jour	Wednesday
%m	Minutes	30
%H	Heure UTC au format européen	13
%h	Heure UTC au format américain	1
%s	Secondes	18
%H:%M	Heure (24 h)	14:30

Jetons abrégés sans %:

Jeton	Ce qu’il produit	Exemple
D	Jour, mois, année	Thursday, March 26
H	Heure UTC au format européen	13
M	Mois	3
d	Jour	26
h	Heure UTC au format américain	1
m	Minutes	30
s	Secondes	18
y	Année courte	26
H:M	Heure (24 h)	14:30

Exemple réel de Carte :

Valide jusqu’au {{ pass.expiry_date | date: "%d %B %Y" }}

→ Valide jusqu’au 31 décembre 2025

Exemple de formatage des dates dans notre éditeur de modèles

Arithmétique des dates

Ajoutez ou soustrayez du temps à une date. L’astuce consiste d’abord à convertir en secondes, faire le calcul, puis reformater.

1 jour = 86400 secondes.

{% assign expiry_ts = pass.expiry_date | date: "%s" | plus: 0 %}
{% assign grace_period_ts = expiry_ts | plus: 604800 %}
La période de grâce se termine : {{ grace_period_ts | date: "%d/%m/%Y" }}

Référence pratique :

Durée	Secondes
1 jour	86 400
7 jours	604 800
30 jours	2 592 000
90 jours	7 776 000
1 an	31 536 000

Indicateurs de date — cette Carte est-elle encore valide ?

Comparez une date de Carte à aujourd’hui pour afficher des messages contextuels.

{% assign today = 'now' | date: "%s" | plus: 0 %}
{% assign expiry = pass.expiry_date | date: "%s" | plus: 0 %}

{% if expiry < today %}
	Cette Carte a expiré. Rendez-nous visite en magasin pour la renouveler.
{% elsif expiry < today | plus: 604800 %}
	Expire dans moins de 7 jours — utilisez-la avant qu’elle ne disparaisse !
{% else %}
	Carte active
{% endif %}

Cas d’usage d’un billet d’événement : afficher un libellé différent avant et après l’événement.

{% assign now_ts = 'now' | date: "%s" | plus: 0 %}
{% assign event_ts = event.date | date: "%s" | plus: 0 %}

{% if now_ts < event_ts %}
	🎟 À bientôt le {{ event.date | date: "%d %B" }} !
{% else %}
	Merci d’être venu. Nous espérons que vous avez passé un bon moment.
{% endif %}

Convertissez toujours les deux dates en horodatages Unix avant de les comparer. La comparaison de chaînes de dates brutes ne fonctionne pas.

now / today

'now' donne le moment actuel. Utilisez-le partout où la date d’aujourd’hui est nécessaire.

Carte générée le {{ 'now' | date: "%d/%m/%Y" }}

Avec un format convivial :

{{ customer.first_name }}, voici votre statut au {{ 'now' | date: "%A %d %B %Y" }}.

→ Marie, voici votre statut au mercredi 25 mars 2025.

Combiner des filtres de date

Enchaînez plusieurs étapes pour calculer, comparer et afficher des dates dans un seul flux.

Afficher les jours restants sur un coupon :

{% assign today_ts = 'now' | date: "%s" | plus: 0 %}
{% assign expiry_ts = coupon.expiry_date | date: "%s" | plus: 0 %}
{% assign days_left = expiry_ts | minus: today_ts | divided_by: 86400 %}

{% if days_left > 0 %}
	Il reste {{ days_left }} jours pour utiliser ce coupon.
{% else %}
	Ce coupon a expiré.
{% endif %}

Afficher un rappel de renouvellement 30 jours avant l’expiration :

{% assign today_ts = 'now' | date: "%s" | plus: 0 %}
{% assign expiry_ts = pass.expiry_date | date: "%s" | plus: 0 %}
{% assign days_until_expiry = expiry_ts | minus: today_ts | divided_by: 86400 %}

{% if days_until_expiry <= 30 and days_until_expiry > 0 %}
	Votre adhésion se renouvelle le {{ pass.expiry_date | date: "%d %B %Y" }}.
	Ne laissez pas vos avantages expirer. Renouvelez en magasin ou en ligne.
{% endif %}

capture — construire un bloc de message

capture vous permet de construire une chaîne complète et de la conserver pour plus tard. Rien n’est affiché tant que la variable n’est pas rendue.

{% capture loyalty_summary %}
	{{ customer.first_name }}, vous avez {{ customer.points }} points.
	Niveau actuel : {{ customer.tier }}.
	Niveau suivant dans {{ next_tier_points | minus: customer.points }} points.
{% endcapture %}

{{ loyalty_summary }}

Idéal pour construire le corps d’une notification push, une description au dos de la Carte ou tout bloc de contenu qui doit être assemblé par étapes avant d’être affiché.

Des questions ? Contactez votre interlocuteur Wallet Crew ou consultez la Base de connaissances. Bon templating