Come saltare le righe in un blocco di tabelle dinamiche
Imparerai
Impari a saltare le righe (ad esempio, gli elementi) in un blocco di tabelle dinamiche. Il caso d'uso più comune è quello di nascondere gli elementi irrilevanti, come l'assicurazione di spedizione o gli articoli in omaggio, da un'e-mail di carrello abbandonato. Tuttavia, può seguire questi passaggi per qualsiasi e-mail che utilizzi un blocco di tabelle dinamiche.
Questo processo comporta la modifica diretta del codice della sua e-mail. Questo è consigliato solo ai marketer tecnicamente esperti o a coloro che hanno accesso a uno sviluppatore. Il nostro team di assistenza non può aiutarla a scrivere codice personalizzato al di là delle indicazioni generali contenute in questa documentazione. Per mantenere la sicurezza dei suoi dati, il team di assistenza di Klaviyo non è in grado di aprire i file HTML.
Prima di iniziare
Questo articolo spiega come nascondere gli elementi dai blocchi di tabelle dinamiche esistenti. Se non ha ancora creato un blocco di tabelle dinamiche funzionante (ad esempio, i prodotti di un carrello abbandonato o un'e-mail di conferma dell'ordine), impari a crearne uno da zero o inizi con un messaggio della nostra libreria di flussi.
Scriva le sue dichiarazioni if
Prima di apportare modifiche al suo modello, crei 2 snippet di codice utilizzando un editor di testo o di codice (un posto dove potrà copiare e incollare gli snippet in seguito). Ogni frammento di codice sarà composto da 3 parti:
- Un tag if di apertura,
{% if ... %}, che indica quali elementi devono apparire nel suo blocco tabella. - Contenuto, come un tag di immagine o un testo sul prodotto.
- Un tag di chiusura,
{% endif %}.
Crea il tag di apertura if
Ecco alcuni esempi di apertura dei tag if:
Tag | Significato |
{% if item.price != 0 %} | Se il prezzo dell'articolo(item.price) è diverso da 0. |
{% if item.product.name != "Route Shipping Insurance" %} | Se il nome dell'articolo(item.product.name) è diverso da "Route Shipping Insurance". |
{% if not "T-Shirt" in item.product.title %} | Se il titolo dell'articolo(item.product.title) non contiene "T-Shirt". |
{% if item.title %} | Se il titolo dell'articolo(item.title) è impostato (cioè ha un valore qualsiasi). |
Questi tag sono sensibili alle maiuscole e devono corrispondere esattamente ai suoi dati. Ad esempio, se la variabile per il prezzo dell'articolo è diversa da item.price (ad esempio, item.Price o item.details.line_price), aggiorni il codice per adattarlo alla sua fonte di dati.
Crea il contenuto dell'istruzione if
Per il contenuto, segua questi passaggi per utilizzare il contenuto esistente del suo blocco di tabelle dinamiche. Scriva questo frammento di codice in un editor di codice o di testo; lo aggiungerà al suo modello nella prossima sezione.
- Sotto Contenuto della cella per l'immagine del blocco tabella, faccia clic su Sostituisci per visualizzare il segnaposto dell'immagine.
- Copi l'intero codice dal campo Variabile dinamica o URL dinamico. Si noti che questa può essere una semplice variabile dinamica, oppure un frammento di codice più lungo; copi tutto, indipendentemente dalla lunghezza.
- Sostituisca il segnaposto in questo frammento di codice con il codice che ha copiato dal campo Variabile dinamica o URL dinamico.
<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">Se il blocco tabella esistente ha una semplice variabile dinamica per l'immagine, il contenuto risultante sarà simile a questo:
<img src="{{item.product.variant.images.0.src}}" style="width: 200px; height: auto;" width="200"> Se il blocco tabella esistente contiene uno snippet di codice più lungo, il contenuto risultante potrebbe apparire come questo:
<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">
Aggiungi il tuo finale tag
Quindi, metta insieme tutti i contenuti: la sua dichiarazione if di apertura, poi il suo contenuto e infine un tag {% endif %} di chiusura.
Ripeti per il contenuto del testo
Quindi, ripeta questo processo con il contenuto del lato destro del suo blocco tabella (ad esempio, il contenuto del testo). Clicchi su </ > per aprire l'editor di codice e copi tutto il contenuto HTML, quindi avvolga questo contenuto nella stessa dichiarazione if (passi 1 e 3) che ha usato per il contenuto dell'immagine.
Ecco come appare tutto insieme:
Frammento di codice 1 (immagine del prodotto) | Frammento di codice 2 (dettagli del prodotto) |
|
|
Ed ecco la suddivisione di questi frammenti di codice:
Frammento di codice 1 (immagine del prodotto) | Frammento di codice 2 (dettagli del prodotto) |
|
|
Quando utilizza questi frammenti di codice, si assicuri di utilizzare le virgolette dritte (") piuttosto che le virgolette a spirale ("), per garantire che il codice venga visualizzato correttamente.
Una volta scritti entrambi gli snippet di codice, continui nell'editor di modelli seguendo i passi seguenti.
Salta le righe in un blocco di tabelle dinamiche
Prima di modificare il suo blocco di tabelle dinamiche, prenda in considerazione la possibilità di salvare il blocco originale come contenuto universale, nel caso in cui debba farvi riferimento in messaggi futuri. Quindi scolleghi il blocco e lo modifichi separatamente, in modo che le sue modifiche non vengano salvate nel blocco di contenuto universale.
- Se la sua email fa parte di un flusso, la imposti su Bozza o Manuale, in modo che i messaggi non vengano inviati mentre lei modifica il messaggio del flusso.
- Si assicuri che il Contenuto della cella per entrambe le colonne del nuovo blocco tabella sia impostato su Testo.
- Clicchi su </ > per aprire l'editor HTML per il lato sinistro del blocco tabella.
- Copi lo snippet di codice dell'immagine del prodotto creato nella sezione precedente e lo incolli nel campo HTML.
- Clicchi su Fatto in alto a sinistra.
- Si rechi nell'editor del lato destro del blocco tabella.
- Clicchi su </ > per aprire l'editor HTML per il lato destro del blocco tabella.
- Copi lo snippet di codice dei dettagli del prodotto creato nella sezione precedente e lo incolli nel campo HTML, sostituendo tutti i contenuti precedenti.
- Clicchi su Fine.
- Analizzi l'e-mail per assicurarsi che appaia come previsto: l'elemento saltato non dovrebbe apparire, ma tutti gli altri elementi appariranno normalmente. Si assicuri di visualizzare l'anteprima con un evento che contiene l'elemento che sta cercando di nascondere, in modo da assicurarsi che sia nascosto.
Le dichiarazioni condizionali e l'editor di testo in linea
Quando aggiunge alcune dichiarazioni condizionali a un blocco di testo, queste possono scomparire dall'editor di testo in linea. Il codice è ancora presente, ma è solo nascosto. Per visualizzare e modificare le dichiarazioni condizionali, apra il campo Codice sorgente del blocco di testo .
I seguenti tag sono visibili solo nel campo Codice sorgente di un blocco di testo :
- {% for ... %}
- {% endfor %}
- {% if ... %}
- {% elif ... %}
- {% else %}
- {% endif %}
- {% with ... %}
- {% endwith %}
Risoluzione dei problemi
Nessun elemento appare nell'anteprima
- Si assicuri di eseguire l'anteprima con un evento che corrisponda alla fonte di dati utilizzata (ad esempio, Checkout avviato per un messaggio di carrello abbandonato).
- Confermi che la ripetizione per e l'alias di riga corrispondono esattamente alla raccolta di righe e all'alias di riga del blocco originale.
L'elemento che dovrebbe essere saltato continua a comparire.
Controlli l'ortografia e la capitalizzazione della sua dichiarazione if. Se il prodotto appare ancora, significa che soddisfa i criteri della sua dichiarazione if, quindi la sua dichiarazione if non è configurata correttamente. Per saperne di più sulla logica condizionale nei modelli.
Risultato
Dopo aver seguito questi passaggi, gli articoli che non soddisfano i criteri della sua dichiarazione if non appariranno nei messaggi come il carrello abbandonato o le e-mail di conferma dell'ordine.
Risorse aggiuntive
- Documentazione sulla personalizzazione dei messaggi
Scopri come utilizzare le variabili di personalizzazione (o tag) di Klaviyo per personalizzare l'esperienza dei clienti.
- Come importare un modello HTML personalizzato
Scopra come importare un modello HTML personalizzato in Klaviyo.