# 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](#the-two-building-blocks)
* [Afficher une valeur sur une Carte](#showing-a-value-on-a-pass)
* [Assign — créez votre propre variable](#assign--create-your-own-variable)
* [if / elsif / else — contenu intelligent selon le client](#if--elsif--else--smart-content-per-customer)
* [unless — la condition silencieuse](#unless--the-quiet-condition)
* [Opérateurs — comment comparer des éléments](#operators--how-to-compare-things)
* [case / when — logique propre à plusieurs niveaux](#case--when--clean-multi-tier-logic)
* [Filtres — transformer n’importe quelle valeur](#filters--transform-any-value)
* [Filtres de chaîne](#string-filters)
* [Filtres numériques](#number-filters)
* [Filtres de tableau](#array-filters)
* [Formatage des dates](#date-formatting)
* [Arithmétique des dates](#date-arithmetic)
* [Indicateurs de date — cette Carte est-elle encore valide ?](#date-flags--is-this-pass-still-valid)
* [now / today](#now--today)
* [Combiner des filtres de date](#combining-date-filters)
* [capture — construire un bloc de message](#capture--build-a-message-block)

### 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

{% hint style="info" %}
Si vous tapez `{{ }}` vous verrez une liste des variables possibles.
{% endhint %}

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
```

{% hint style="info" %}
Si le champ est vide, rien ne s’affiche. Pas d’erreur, pas de libellé vide.
{% endhint %}

### 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

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

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`

<div data-with-frame="true"><figure><img src="/files/2c404dd5ab315eb168be436afe995669e8943ad9" alt="Date Formatting example in our template editor" width="563"><figcaption><p>Exemple de formatage des dates dans notre éditeur de modèles</p></figcaption></figure></div>

### 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 %}
```

{% hint style="warning" %}
Convertissez toujours les deux dates en horodatages Unix avant de les comparer. La comparaison de chaînes de dates brutes ne fonctionne pas.
{% endhint %}

### 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](https://docs.thewalletcrew.io). Bon templating&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thewalletcrew.io/fr/configurer/wallet/template-configuration/liquid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.