Personalizza i tuoi design con la nuova sintassi Liquid

Personalizza i tuoi design con la nuova sintassi Liquid

-

#1 - Aggiungere mirror link e link di disiscrizione

• Mirror link = {{ mirror_page_url }}

Esempio: Puoi visualizzare la versione online [qui] ({{ mirror_page_url }})

• Link di disiscrizione = {{ unsubscription_form_url }}

Esempio: Se non desideri più ricevere le nostre email, puoi annullare l’iscrizione [qui]({{ unsubscription_form_url }})

-

#2 - Utilizzare un blocco condizionale e formattare il contenuto

• Aggiungere un messaggio di benvenuto personalizzato con il nome del contatto:

{% if contact.firstname != "" %}
Ciao {{ contact.firstname }},
Benvenuto/a! Siamo felici che tu ti sia unito/a alla nostra community.
{% else %}
Ciao,
Benvenuto/a! Siamo felici che tu ti sia unito/a alla nostra community.
{% endif %}

• Scrivere la prima lettera del nome in maiuscolo:

{% if contact.firstname != "" %}
Ciao {{ contact.firstname | capitalize }},
Benvenuto/a! Siamo felici che tu ti sia unito/a alla nostra community.
{% else %}
Ciao,
Benvenuto/a! Siamo felici che tu ti sia unito/a alla nostra community.
{% endif %}

• Formattare il nome come nome proprio (solo l'iniziale maiuscola):

{% if contact.firstname != "" %}
Ciao {{ contact.firstname | downcase | capitalize }},
Benvenuto/a! Siamo felici che tu ti sia unito/a alla nostra community.
{% else %}
Ciao,
Benvenuto/a! Siamo felici che tu ti sia unito/a alla nostra community.
{% endif %}

#3 - Adattare il messaggio in base alla lingua del contatto

• Creare blocchi distinti a seconda della lingua

{% if contact.language == "fr" %}
Profitez de nos offres spéciales en France !
{% elsif contact.language == "es" %}
¡Disfruta de nuestras ofertas especiales en España!
{% else %}
Discover our special offers worldwide!
{% endif %}

• Differenziare i contatti in base alla città (es. Milano) rispetto al resto dell'Italia

-

#4 - Adattare il messaggio in base al genere del contatto

• Crea una personalizzazione in base al genere del contatto e includi il suo nome per instaurare un rapporto più diretto

{% if contact.custom_fields["gender"] == "female" %}
Gentile {{ contact.firstname }}, approfitta delle nostre offerte esclusive pensate per te!
{% elsif contact.custom_fields["gender"] == "male" %}
Gentile {{ contact.firstname }}, ecco alcune promozioni che potrebbero interessarti!
{% else %}
Ciao {{ contact.firstname }}, scopri tutte le nostre novità!
{% endif %}

• Riformattare tutti i nomi in maiuscolo

{% if contact.custom_fields["gender"] == "female" %}
Gentile {{ contact.firstname | upcase }}, approfitta delle nostre offerte esclusive pensate per te!
{% elsif contact.custom_fields["gender"] == "male" %}
Gentile {{ contact.firstname | upcase }}, ecco alcune promozioni che potrebbero interessarti!
{% else %}
Ciao {{ contact.firstname | upcase }}, scopri tutte le nostre novità!
{% endif %}

-

#5 - Mostrare le date

Data completa di oggi: {{ "now" | date: "%Y-%m-%d" }}

• Mostrare prima il giorno, poi il mese e infine l’anno:

Data completa di oggi nel formato DD-MM-YYYY: {{ "now" | date: "%d-%m-%Y" }}

• Aggiungere il giorno della settimana e il mese corrente in maniera dinamica:

Giorno della settimana: {{ "now" | date: "%A" }}
Mese corrente:: {{ "now" | date: "%B" }}
Data completa di oggi nel formato DD-MM-YYYY con giorno della settimana e mese al posto del numero del mese: {{ "now" | date: "%A %d-%B-%Y" }}

• Rimuovere i trattini e visualizzare giorno, mese e anno nella lingua del contatto

• Visualizzare solo il giorno della settimana (senza il mese):

Data completa di oggi nel formato DD-MM-YYYY con il giorno della settimana in italiano: {{ "now" | date: "%A, %d-%m-%Y" | replace: "Monday", "Lunedì" | replace: "Tuesday", "Martedì" | replace: "Wednesday", "Mercoledì" | replace: "Thursday", "Giovedì" | replace: "Friday", "Venerdì" | replace: "Saturday", "Sabato" | replace: "Sunday", "Domenica" }}

• Mostrare una data nel formato GG-MM-AAAA anche se è stata salvata in un altro formato:

{{contact.custom_fields['champs'] | date: "%d-%m-%Y" }}
Nota: questa trasformazione funziona sia se il campo è memorizzato come data che come testo.

-

#6 - Integrare variabili calcolate automaticamente

• Esempio 1: Mostrare l’importo mancante per ottenere la spedizione gratuita di un carrello abbandonato

Ciao { {{ contact.firstname }}, ci sei quasi! ;-) Ti mancano solo {{ 20 | minus: order.total_price }} euro per ottenere la spedizione gratuita.
Arrotondare un numero per eccesso: {{ 123.4567 | ceil }}r
Arrotondare un numero per difetto: {{ 123.4567 | floor }}
Arrotondare al numero intero più vicino: {{ 123.4567 | round }}

Nota: 123.5 viene sempre arrotondato per eccesso.

• Esempio 2: Formattare il prezzo di un ordine sostituendo il "." con una "," e mostrando sempre due cifre decimali

{% assign parts = order.total_price | split: "." %}{% assign decimal = parts[1] | append: "00" | slice: 0, 2 %}{{ parts[0] }},{{ decimal }} € 

-

#7 - Aggiungere un loop post-acquisto (o per carrelli abbandonati) con immagine e dettagli del prodotto

• Puoi creare un loop che mostri tutti i prodotti inclusi in un carrello o in un ordine, insieme alle informazioni che desideri visualizzare (nome, immagine, prezzo, ecc.). Qui sotto trovi un esempio pratico utilizzando direttamente il Message Builder:

Sintassi da utilizzare in Liquid:
{% for orderline in order.orderlines %}
Product : {{orderline.product.name}}
Product : {{orderline.product.external_id}}
Quantity : {{orderline.quantity}}
{% endfor %}

Importante: I loop si basano sulle righe dell’ordine, quindi è necessario utilizzare la variabile {{orderline.product.name}} e non {{product.name}}.

Nota: Per visualizzare dinamicamente l'immagine di ciascun prodotto, utilizza la variabile: {{orderline.product.img_url}}

-

#8 - Modificare la visualizzazione di un blocco di personalizzazione

• Ad esempio, mostrare i prodotti in orizzontale anziché in verticale

Per farlo, ti basta creare 3 colonne:

1. Prima colonna: = {% for orderline in order.orderlines limit:3 %} + Image + Product name : {{orderline.product.name}} + Product price : {{orderline.product.price}} €

2. Seconda colonna = {% endfor %}

3. Terza colonna = lasciala vuota

Importante: per evitare disallineamenti nella visualizzazione dei nomi dei prodotti, è fondamentale impostare un limite massimo di caratteri per i campi di testo e utilizzare immagini di dimensioni uniformi.

-

#9 - Creare un loop di prodotti a partire da un campo personalizzato della tabella contatti

• Ad esempio, per una campagna Back in Stock, è possibile personalizzare il design del messaggio in base alle preferenze di ogni contatto

  

{% create_products_list products_list=contact.custom_fields['city'] %}{% for product in products_list %}
{{product.name}}
{{product.price}} €
{% endfor %}

Attenzione: in questo caso, è necessario utilizzare la tabella Prodotti dopo aver creato la lista. Tutte le variabili utilizzate nel loop faranno quindi riferimento a questa tabella.

Nota: per visualizzare l’immagine dinamica di ciascun prodotto, utilizza la variabile: {{product.img_url}}

-

#10 - Creare un carosello di prodotti consigliati a partire da un campo personalizzato della tabella prodotti

• Ad esempio, mostrare un elenco di prodotti consigliati provenienti da un campo personalizzato della tabella prodotti, da utilizzare in una campagna post-acquisto.

{% for orderline in order.orderlines limit:1%}
{% create_products_list products_list=orderline.product.custom_fields['splio_product_recommendation_1'] %}{% for product in products_list %}
{{product.name}}
{{product.price}} €
{% endfor %}
{% endfor %}

-

#11 - Creare un loop di prodotti utilizzando gli ID esterni di alcuni articoli

• Personalizzare un design mostrando i prodotti predefiniti in una campagna

{% create_products_list products_list='splio01,splio02,splio03' %}
{% for product in products_list %}
{{product.name}} {{product.price}} €
{% endfor %}

-

#12 - Aggiungere la personalizzazione "negozio"

• Personalizzare una campagna post-acquisto in base al negozio in cui è stato effettuato l'acquisto, ad esempio per ricordare gli orari di apertura

{% if order.store.external_id == "fisico" %}
Grazie per il tuo acquisto nel negozio {{order.store.name}}.
Ecco gli orari di apertura del tuo negozio preferito: {{order.store.custom_fields['horaires']}}
{% endif %}

-

#13 - Personalizzare automaticamente le tue variabili UTM

Per personalizzare dinamicamente le tue variabili UTM, puoi utilizzare le seguenti variabili:

• {{campaign_name}} per mostrare il nome della campagna

• {{campaign_id}} per mostrare l'ID della campagna

-

Vuoi saperne di più?

Per ulteriori informazioni, consulta la nostra documentazione tecnica.