Comment sauter des lignes dans un bloc de tableau dynamique
Objectif de cet article
Découvrez comment ignorer des lignes (p. ex., des articles) dans un bloc de tableau dynamique. Le cas d’usage le plus courant consiste à masquer des articles non pertinents, comme l’assurance d’expédition ou des cadeaux gratuits, dans un e-mail de panier abandonné. Cependant, vous pouvez suivre ces étapes pour n’importe quel e-mail qui utilise un bloc de tableau dynamique.
Ce processus implique de modifier directement le code de votre e-mail. Cela n’est recommandé que pour les marketeurs ayant des compétences techniques ou ceux qui ont accès à un développeur. Notre équipe d’assistance ne peut pas vous aider à écrire du code personnalisé au-delà des conseils généraux abordés dans cette documentation. Pour assurer la sécurité de vos données, l’équipe d’assistance de Klaviyo n’est pas en mesure d’ouvrir des fichiers HTML.
Avant de commencer
Cet article explique comment masquer des éléments dans des blocs de tableau dynamique existants. Si vous n’avez pas encore créé de bloc de tableau dynamique fonctionnel (par exemple, les produits d’un panier abandonné ou d’un e-mail de confirmation de commande), découvrez comment en créer un à partir de zéro ou partez d’un message dans notre bibliothèque de flux.
Écrivez vos instructions if
Avant d’apporter des modifications à votre modèle, créez 2 extraits de code à l’aide d’un éditeur de texte ou de code (un endroit à partir duquel vous pourrez copier-coller les extraits plus tard). Chaque extrait de code sera composé de 3 parties :
- Une if tag d’ouverture,
{% if ... %}, indiquant quels éléments doivent apparaître dans votre bloc de tableau. - Contenu, comme une tag d’image ou du texte sur le produit.
- Un tag de fermeture,
{% endif %}.
Créez le tag if d’ouverture
Voici quelques exemples de tags if d’ouverture :
Tag | Signification |
{% if item.price != 0 %} | Si le prix de l’article (item.price) est différent de 0. |
{% if item.product.name != "Route Shipping Insurance" %} | Si le nom de l’article (item.product.name) est différent de « Route Shipping Insurance. ». |
{% if not "T-Shirt" in item.product.title %} | Si le titre de l’article (item.product.title) ne contient pas « T-shirt ». |
{% if item.title %} | Si le titre de l’élément (item.title) est défini (c’est-à-dire qu’il a une valeur). |
Ces tags sont sensibles à la casse et doivent correspondre exactement à vos données. Par exemple, si la variable du prix de votre article est autre chose que item.price (p. ex., item.Price ou item.details.line_price), mettez à jour le code pour qu’il corresponde à votre source de données.
Créez le contenu pour l’instruction « if »
Pour le contenu, suivez ces étapes pour utiliser le contenu existant de votre bloc de tableau dynamique. Rédigez cet extrait de code dans un éditeur de code ou de texte ; vous l’ajouterez à votre modèle dans la section suivante.
- Sous Contenu de la cellule pour l’image du bloc de tableau, cliquez sur Remplacer pour afficher l’espace réservé à l’image.
- Copiez l’intégralité du code à partir du champ Variable dynamique ou URL dynamique. Notez que cela peut être une simple variable dynamique ou un extrait de code plus long ; copiez l’ensemble, quelle que soit sa longueur.
- Remplacez l’espace réservé dans cet extrait de code par le code que vous avez copié depuis le champ Variable dynamique ou URL dynamique.
<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">Si votre bloc de tableau existant comporte une variable dynamique simple pour l’image, le contenu obtenu ressemblera à ceci :
<img src="{{item.product.variant.images.0.src}}" style="width: 200px; height: auto;" width="200"> Si votre bloc de tableau existant contient un extrait de code plus long, le contenu obtenu peut ressembler à ceci :
<img src="{% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{%else%}{{item.product.images.0.src|missing_product_image}}{%endif%}" style="width: 200px; height: auto;" width="200">Ajoutez votre tag de fin
Ensuite, regroupez tout le contenu : votre instruction if d’ouverture, puis votre contenu, et enfin une tag de fermeture {% endif %}.
Répétez pour le contenu du texte
Ensuite, répétez ce processus avec le contenu du côté droit de votre bloc de tableau (par exemple, le contenu textuel). Cliquez sur </> pour ouvrir l’éditeur de code et copier l’intégralité du contenu HTML, puis encapsulez ce contenu dans la même instruction if (étapes 1 et 3) que vous avez utilisée pour le contenu de l’image.
Voici à quoi tout ressemble lorsqu’on met tout ensemble :
Extrait de code 1 (image du produit) | Extrait de code 2 (détails du produit) |
|
|
Et voici une analyse de ces extraits de code :
Extrait de code 1 (image du produit) | Extrait de code 2 (détails du produit) |
|
|
Lorsque vous utilisez ces extraits de code, assurez-vous d’utiliser des guillemets droits (") plutôt que des guillemets courbes (“) afin que le code s’affiche correctement.
Une fois que vous avez rédigé les deux extraits de code, continuez dans l’éditeur de modèles en suivant les étapes ci-dessous.
Ignorer des lignes dans un bloc de tableau dynamique
Avant de modifier votre bloc de tableau dynamique, pensez à enregistrer le bloc d’origine en tant que contenu universel au cas où vous auriez besoin de le consulter dans de futurs messages. Ensuite, dissociez le bloc et modifiez-le séparément, afin que vos modifications ne soient pas enregistrées dans le bloc de contenu universel.
- Si votre e-mail fait partie d’un flux, définissez-le sur Brouillon ou Manuel afin que les messages ne soient pas envoyés pendant que vous modifiez le message du flux.
- Assurez-vous que le contenu de la cellule des deux colonnes du nouveau bloc de tableau est défini sur Texte.
- Cliquez sur </> pour ouvrir l’éditeur HTML pour le côté gauche du bloc de tableau.
- Copiez l’extrait de code d’image produit que vous avez créé dans la section précédente, puis collez-le dans le champ HTML.
- Cliquez sur Terminé en haut à gauche.
- Accédez à l’éditeur pour le côté droit du bloc de tableau.
- Cliquez sur </> pour ouvrir l’éditeur HTML pour le côté droit du bloc de tableau.
- Copiez l’extrait de code des détails du produit que vous avez créé dans la section précédente, puis collez-le dans le champ HTML, en remplaçant tout le contenu précédent.
- Cliquez sur Terminé.
- Prévisualisez l’e-mail pour vous assurer qu’il s’affiche comme prévu : l’élément ignoré ne doit pas apparaître, mais tous les autres éléments s’afficheront normalement. Assurez-vous de prévisualiser avec un événement qui contient l’élément que vous essayez de masquer, afin de pouvoir vérifier qu’il est bien masqué.
Les conditions et l’éditeur de texte en ligne
Lorsque vous ajoutez certaines conditions à un bloc de texte, elles peuvent disparaître de l’éditeur de texte en ligne. Le code est toujours présent, il est simplement caché. Pour afficher et modifier les instructions conditionnelles, utilisez le Django Tag Builder, ou déplacez le contenu vers un bloc HTML dédié pour modifier directement le code.
Les tags suivants n’apparaissent pas dans l’éditeur de texte intégré, mais ils restent dans le bloc de texte :
- {% for ... %}
- {% endfor %}
- {% if ... %}
- {% elif ... %}
- {% else %}
- {% endif %}
- {% with ... %}
- {% endwith %}
Résolution de problèmes
Aucun élément n’apparaît dans l’aperçu
- Assurez-vous d’effectuer l’aperçu avec un événement correspondant à la source de données que vous avez utilisée (par exemple, Started checkout pour un message de panier abandonné).
- Confirmez que les champs Répéter pour et Alias de ligne correspondent exactement à la Collection de lignes et à l’ Alias de ligne du bloc d’origine.
L’élément qui devrait être ignoré apparaît toujours.
Vérifiez l’orthographe et les majuscules de votre instruction if. Si le produit s’affiche toujours, cela signifie qu’il répond aux critères de votre instruction if ; votre instruction if n’est donc pas configurée correctement. En savoir plus sur la logique conditionnelle dans les modèles.
Résultat
Après avoir suivi ces étapes, les articles qui ne répondent pas aux critères de votre instruction « if » n’apparaîtront pas dans des messages tels que le panier abandonné ou les e-mails de confirmation de commande.