Comment sauter des lignes dans un bloc de tableau dynamique ?

Vous apprendrez

Apprenez à sauter des lignes (par exemple, des éléments) dans un bloc de tableau dynamique. Le cas d'utilisation le plus courant consiste à masquer les éléments non pertinents, tels que l'assurance de livraison ou les cadeaux gratuits, dans un e-mail relatif à un panier abandonné. Cependant, vous pouvez suivre ces étapes pour n'importe quel courrier électronique qui utilise un bloc de tableau dynamique. 

Avant de commencer

Cet article explique comment masquer des éléments dans des blocs de tableaux dynamiques existants. Si vous n'avez pas encore créé de bloc de tableau dynamique fonctionnel (par exemple, les produits d'un panier abandonné ou un courriel de confirmation de commande), apprenez à en créer un à partir de zéro ou commencez par un message dans notre bibliothèque de flux. 

Rédigez vos instructions if

Avant de modifier votre modèle, créez deux extraits de code à l'aide d'un éditeur de texte ou de code (dans un endroit où vous pourrez copier et coller les extraits ultérieurement). Chaque extrait de code se compose de trois parties : 

1. Une balise d'ouverture if , {% if … %}, indiquant les éléments qui doivent apparaître dans votre bloc de tableau. 
2. Contenu, comme une balise d'image ou un texte sur le produit.
3. Une balise de fermeture, {% endif %}.

1. Créez la balise d' ouverture if

Voici quelques exemples d'ouverture de balises if: 

2. Créez le contenu de l'instruction if

Pour le contenu, suivez ces étapes pour utiliser le contenu existant de votre bloc de tableau dynamique. Écrivez cet extrait de code dans un éditeur de code ou de texte ; vous l'ajouterez à votre modèle dans la section suivante. 

1. Sous Contenu de la cellule pour l'image du bloc de tableau, cliquez sur Remplacer pour afficher l'espace réservé de l'image.
   
2. Copiez l'intégralité du code du champ Variable dynamique ou URL dynamique. Notez qu'il peut s'agir d'une simple variable dynamique ou d'un extrait de code plus long ; copiez-le intégralement, quelle que soit sa longueur.
   
3. Remplacez l'espace réservé de cet extrait de code par le code que vous avez copié dans 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 simple variable dynamique pour l'image, le contenu résultant ressemblera à quelque chose comme 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 résultant 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">

3. Ajoutez votre étiquette de fin

Ensuite, rassemblez tout le contenu : votre déclaration if d'ouverture, puis votre contenu, et enfin une balise {% endif %} de fermeture. 

4. Répétez l'opération pour le contenu du texte

Répétez ensuite 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 tout le contenu HTML, puis enveloppez 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 ressemble l'ensemble : 

{% if item.product.name != "Route Shipping Insurance" %}
<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">
{% endif %}

{% if item.product.name != "Route Shipping Insurance" %}
<h3>< a href="{{ organization.url }}products/{{ item.product.url }}" >
   {{ item.product.name }}
</a></h3>
<p>
   Quantité : {{ item.quantity|floatformat:0 }} - 
 Total : {% currency_format item.line_price|floatformat:2 %}
</p>
{% endif %}

Voici la décomposition de ces extraits de code : 

{% if CRITERIA %}
   IMAGE PLACEHOLDER CONTENT
{% endif %}

{% if CRITERIA %}
   DESCRIPTION DU PRODUIT
{% endif %}

Une fois que vous avez écrit les deux extraits de code, continuez dans l'éditeur de modèle en suivant les étapes ci-dessous. 

Sauter des lignes dans un bloc de tableau dynamique

1. 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. 
2. Assurez-vous que le contenu des cellules des deux colonnes du nouveau bloc de tableau est défini sur Texte.
   
3. Cliquez sur </ > pour ouvrir l'éditeur HTML pour le côté gauche du bloc de tableau. 
4. Copiez l'extrait de code de l'image du produit que vous avez créé dans la section précédente et collez-le dans le champ HTML.
   
5. Cliquez sur Terminé en haut à gauche. 
6. Accédez à l'éditeur du côté droit du bloc de tableau. 
7. Cliquez sur </ > pour ouvrir l'éditeur HTML pour le côté droit du bloc de tableau. 
8. Copiez l'extrait de code relatif aux détails du produit que vous avez créé dans la section précédente et collez-le dans le champ HTML, en remplaçant tout le contenu précédent. 
9. Cliquez sur Terminé. 
10. 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. Veillez à prévisualiser avec un événement qui contient l'élément que vous essayez de masquer, afin de vous assurer qu'il est bien masqué. 

Les instructions conditionnelles et l'éditeur de texte en ligne

Lorsque vous ajoutez certaines instructions conditionnelles à 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, ouvrez le champ Code source du bloc de texte. 

Les balises suivantes ne sont visibles que dans le champ Code source d' un bloc de texte : 

• {% for ... %}
• {% endfor %}
• {% if ... %}
• {% elif ... %}
• {% else %}
• {% endif %}
• {% with ... %}
• {% endwith %}

Dépannage

Aucun élément n'apparaît dans l'aperçu

1. Assurez-vous que vous prévoyez un événement qui correspond à la source de données que vous avez utilisée (par exemple, Started checkout pour un message de panier abandonné). 
2. Confirmez que la répétition pour et l'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 déclaration "si". Si le produit apparaît toujours, cela signifie qu'il répond aux critères de votre instruction if, et que votre instruction if n'est donc pas configurée correctement. En savoir plus sur la logique conditionnelle dans les modèles. 

Résultats

Après avoir suivi ces étapes, les articles qui ne répondent pas aux critères de votre déclaration "si" n'apparaîtront pas dans les messages tels que le panier abandonné ou les e-mails de confirmation de commande.  

Ressources complémentaires

• Référence de personnalisation du message
• Comment importer un modèle HTML personnalisé