Tutoriais: Escrevendo código Liquid
Novo no Liquid? Estes tutoriais vão ajudar você a começar a escrever código Liquid para casos de uso voltados a iniciantes. Cada tutorial aborda uma combinação diferente de objetivos de aprendizado, como lógica condicional e operadores.
Ao concluir estes tutoriais, você será capaz de:
- Escrever código Liquid para casos de uso comuns
- Encadear lógica condicional Liquid para personalizar mensagens com base em dados de usuários
- Usar variáveis e filtros para escrever equações que utilizam os valores de atributos
- Reconhecer comandos básicos no código Liquid e ter uma compreensão geral sobre o que o código está fazendo
| Tutorial | Objetivos de aprendizado |
|---|---|
| Personalizar mensagens para segmentos de usuários | valores padrão, lógica condicional |
| Lembretes de carrinho abandonado | operadores, lógica condicional |
| Contagem regressiva para evento | variáveis, filtros de data |
| Mensagem mensal de aniversário | variáveis, filtros de data, operadores |
| Promover um produto favorito | variáveis, filtros de data, equações, operadores |
Mensagens personalizadas para segmentos de usuários
Vamos personalizar mensagens para diferentes segmentos de usuários, como clientes VIP e novos assinantes.
- Abra a mensagem com saudações personalizadas para enviar quando você tem e quando não tem o nome do usuário. Para isso, crie uma Liquid tag que inclua o atributo
first_namee um valor padrão para usar casofirst_nameesteja em branco. Neste cenário, vamos usar “traveler” como valor padrão.
Happy summer, {{${first_name} | default: "traveler"}}!
- Agora, vamos definir a mensagem a ser enviada se o usuário for um cliente VIP. Precisaremos usar uma tag de lógica condicional para isso:
if. Essa tag vai dizer que, se o atributo personalizadovip_statusfor igual aVIP, o Liquid a seguir será executado. Neste caso, uma mensagem específica será enviada.
{% if {{custom_attribute.${vip_status}}} == 'VIP' %}
Thank you for being a VIP customer! Enjoy your exclusive discount code: VIPSUMMR464.
- Vamos enviar uma mensagem personalizada para usuários que são novos assinantes. Usaremos a tag de lógica condicional
elsifpara especificar que, se ovip_statusdo usuário fornew, a mensagem a seguir será enviada.
{% elsif {{custom_attribute.${vip_status}}} == 'new' %}
Thank you for subscribing! Enjoy your welcome discount code: NEWTRAVEL257.
- E os usuários que não são VIP nem novos? Podemos enviar uma mensagem para todos os outros usuários com a tag
else, que especifica que a mensagem a seguir deve ser enviada se as condições anteriores não forem atendidas. Então podemos fechar a lógica condicional com a tagendif, já que não há mais status VIP a considerar.
{% else %}
Thanks for traveling with us! Enjoy your unique discount code: SUMMRTRVLS240.
{% endif %}
Código Liquid completo
Happy summer, {{${first_name} | default: "traveler"}}!
{% if {{custom_attribute.${vip_status}}} == 'VIP' %}
Thank you for being a VIP customer! Enjoy your exclusive discount code: VIPSUMMR464.
{% elsif {{custom_attribute.${vip_status}}} == 'new' %}
Thank you for subscribing! Enjoy your welcome discount code: NEWTRAVEL257.
{% else %}
Thanks for traveling with us! Enjoy your unique discount code: SUMMRTRVLS240.
{% endif %}
Lembretes de carrinho abandonado
Vamos enviar mensagens personalizadas para lembrar os usuários sobre itens deixados no carrinho. Vamos personalizar ainda mais com base na quantidade de itens no carrinho: se houver três itens ou menos, listaremos todos eles. Se houver mais de três itens, enviaremos uma mensagem mais concisa.
- Vamos verificar se o carrinho do usuário está vazio abrindo uma lógica condicional Liquid com o operador
!=, que significa “não é igual a”. Neste caso, definiremos a condição como o atributo personalizadocart_itemsnão sendo igual a um valor em branco.
{% if {{custom_attribute.${cart_items}}} != blank %}
- Em seguida, precisaremos restringir nosso foco e verificar se o carrinho tem mais de três itens usando o operador
>, que significa “maior que”.
{% if {{custom_attribute.${cart_items}}} | size > 3 %}
- Escreva uma mensagem que cumprimente o usuário pelo nome ou, se não estiver disponível, use “there” como valor padrão. Inclua o que deve ser dito se houver mais de três itens no carrinho. Como não queremos sobrecarregar o usuário com uma lista completa, vamos listar os três primeiros
cart_items.
Hi {{${first_name} | default: 'there'}}, don't forget to complete your purchase! Your items {{custom_attribute.${cart_items[0]}}}, {{custom_attribute.${cart_items[1]}}}, {{custom_attribute.${cart_items[2]}}}, and others are waiting for you.
- Use a tag
elsepara especificar o que deve acontecer se as condições anteriores não forem atendidas (ou seja, secart_itemsestiver em branco ou tiver menos de três itens), e então forneça a mensagem a ser enviada. Como três itens não ocupam muito espaço, podemos listar todos eles. Usaremos o operador Liquidjoine,para especificar que os itens devem ser listados separados por vírgula. Feche a lógica comendif.
{% else %}
Hi {{${first_name} | default: 'there'}}, don't forget to complete your purchase! Your items: {{{custom_attribute.${cart_items}}} | join: ', '} are waiting for you.
{% endif %}
- Use
elsee depois umabort_messagepara dizer ao código Liquid para não enviar uma mensagem se o carrinho não atender a nenhuma das condições anteriores. Em outras palavras, se o carrinho estiver vazio. Feche a lógica comendif.
{% else %}
{% abort_message('No items in cart') %}
{% endif %}
Código Liquid completo
{% if {{custom_attribute.${cart_items}}} != blank %}
{% if {{custom_attribute.${cart_items}}} | size > 3 %}
Hi {{${first_name} | default: 'there'}}, don't forget to complete your purchase! Your items {{custom_attribute.${cart_items[0]}}}, {{custom_attribute.${cart_items[1]}}}, {{custom_attribute.${cart_items[2]}}}, and others are waiting for you.
{% else %}
Hi {{${first_name} | default: 'there'}}, don't forget to complete your purchase! Your items: {{{custom_attribute.${cart_items}}} | join: ', '} are waiting for you.
{% endif %}
{% else %}
{% abort_message('No items in cart') %}
{% endif %}
Contagem regressiva para evento
Vamos enviar aos usuários uma mensagem informando quantos dias faltam para uma liquidação de aniversário. Para isso, usaremos variáveis para criar equações que manipulam os valores de atributos.
- Primeiro, vamos atribuir a variável
sale_dateao atributo personalizadoanniversary_datee aplicar o filtrodate: "s". Isso converteanniversary_datepara um formato de timestamp expresso em segundos e então atribui esse valor asale_date.
{% assign sale_date = {{custom_attribute.${anniversary_date}}} | date: "%s" %}
- Também precisamos atribuir uma variável para capturar o timestamp de hoje. Vamos atribuir a variável
todayanow(a data e hora atuais) e então aplicar o filtrodate: "%s".
{% assign today = 'now' | date: "%s" %}
- Agora vamos calcular quantos segundos existem entre agora (
today) e a Liquidação de Aniversário (sale_date). Para isso, atribua a variáveldifferenceao valor desale_datemenostoday.
{% assign difference = event_date | minus: today %}
- Agora precisamos converter
differencepara um valor que possamos referenciar em uma mensagem, já que não é ideal dizer ao usuário quantos segundos faltam para uma liquidação. Vamos atribuirdifference_daysaevent_datee dividi-lo por86400para obter o número de dias.
{% assign difference_days = difference | divided_by: 86400 %}
- Por fim, vamos criar a mensagem a ser enviada.
Get ready! Our Anniversary Sale is in {{ difference_days }} days!
Código Liquid completo
{% assign sale_date = {{custom_attribute.${anniversary_date}}} | date: "%s" %}
{% assign today = 'now' | date: "%s" %}
{% assign difference = event_date | minus: today %}
{% assign difference_days = difference | divided_by: 86400 %}
Get ready! Our Anniversary Sale is in {{ difference_days }} days!
Mensagem mensal de aniversário
Vamos enviar uma promoção especial para todos os usuários cujo aniversário cai no mês atual. Usuários que não fazem aniversário neste mês não receberão nenhuma mensagem.
- Primeiro, vamos obter o mês atual. Atribuiremos a variável
this_monthanow(a data e hora atuais) e usaremos o filtrodate: "%B"para especificar que a variável deve ser igual ao mês.
{% assign this_month = 'now' | date: "%B" %}
- Agora, vamos obter o mês de nascimento a partir do
date_of_birthdo usuário. Atribuiremos a variávelbirth_monthadate_of_birthe usaremos o filtrodate: "%B".
{% assign birth_month = {{${date_of_birth}}} | date: "%B" %}
- Agora que temos duas variáveis com um mês como valor, podemos compará-las com lógica condicional. Vamos definir a condição como
this_monthsendo igual aobirth_monthdo usuário.
{% if {{this_month}} == {{birth_month}} %}
- Vamos criar a mensagem a ser enviada se este mês também for o mês de aniversário do usuário.
We heard {{this_month}} is a special month! Enjoy a 50% discount on your purchase with code BIRTHDAY50 until the end of {{this_month}}.
- Use a tag
elsepara especificar o que acontece se a condição não for atendida (porque este mês não é o mês de aniversário do usuário).
{% else %}
- Não queremos enviar uma mensagem se o mês de aniversário do usuário não for este mês, então usaremos
abort_messagepara cancelar a mensagem e fechar a lógica condicional comendif.
{% abort_message("Not their birthday month") %}
{% endif %}
Código Liquid completo
{% assign this_month = 'now' | date: "%B" %}
{% assign birth_month = {{${date_of_birth}}} | date: "%B" %}
{% if {{this_month}} == {{birth_month}} %}
We heard {{this_month}} is a special month! Enjoy a 50% discount on your purchase with code BIRTHDAY50 until the end of {{this_month}}.
{% else %}
{% abort_message("Not their birthday month") %}
{% endif %}
Promoção de produto favorito
Vamos promover o produto favorito de um usuário se a última data de compra dele foi há mais de seis meses.
- Primeiro, usaremos lógica condicional para verificar se temos o produto favorito e a última data de compra do usuário.
{% if {{custom_attribute.${favorite_product}}} == blank or {{custom_attribute.${last_purchase_date}}} == blank %}
- Em seguida, definiremos que, se não tivermos o produto favorito ou a última data de compra do usuário, a mensagem não deve ser enviada.
{% abort_message("No favorite product or last purchase date") %}
- Usaremos
elsepara especificar o que deve acontecer se a condição acima não for atendida (porque nós temos o produto favorito e a última data de compra do usuário).
{% else %}
- Se temos a data de compra, precisamos atribuí-la a uma variável para compará-la com a data de hoje. Primeiro, vamos criar um valor para a data de hoje atribuindo a variável
todayanow(a data e hora atuais) e usando o filtrodate: "%s"para converter o valor em um formato de timestamp expresso em segundos. Adicionaremos o filtroplus: 0para adicionar um “0” ao timestamp. Isso não altera o valor do timestamp, mas é útil para usar o timestamp em equações futuras.
{% assign today = 'now' | date: "%s" | plus: 0 %}
- Agora vamos capturar a última data de compra em segundos atribuindo a variável
last_purchase_dateao atributo personalizadolast_purchase_datee usando o filtrodate: "s". Novamente adicionaremos o filtroplus: 0.
{% assign last_purchase_date = {{custom_attribute.${last_purchase_date}}} | date: "%s" | plus: 0 %}
- Como a última data de compra e a data de hoje estão em segundos, precisaremos calcular quantos segundos existem em seis meses. Vamos criar uma equação (aproximadamente 6 meses * 30,44 dias * 24 horas * 60 minutos * 60 segundos) e atribuí-la à variável
six_months. Usaremostimespara especificar a multiplicação das unidades de tempo.
{% assign six_months = 6 | times: 30.44 | times: 24 | times: 60 | times: 60 %}
- Agora que todos os nossos valores de tempo estão em segundos, podemos usar seus valores em equações. Vamos atribuir uma variável chamada
today_minus_last_purchase_dateque pega o valor de hoje e subtrai dele olast_purchase_date. Isso nos dá quantos segundos se passaram desde a última compra.
{% assign today_minus_last_purchase_date = {{today | minus: last_purchase_date}} %}
- Agora vamos comparar diretamente nossos valores de tempo na lógica condicional. Vamos definir a condição como
today_minus_last_purchase_datesendo maior ou igual (>=) a seis meses. Em outras palavras, a última compra foi há pelo menos seis meses.
{% if today_minus_last_purchase_date >= six_months %}
- Vamos criar a mensagem a ser enviada se a última compra foi há pelo menos seis meses.
We noticed it’s been a while since you last purchased {{custom_attribute.${favorite_product}}}. Have you checked out our latest offerings?
- Usaremos a tag
elsepara especificar o que deve acontecer se a condição não for atendida (porque a compra não foi há pelo menos seis meses).
{% else %}
- Incluiremos um
abort_messagepara cancelar a mensagem.
{% abort_message("No favorite product or last purchase date") %}
- Para finalizar, encerraremos o Liquid com duas tags
endif. O primeiroendiffecha a verificação condicional do produto favorito ou da última data de compra, e o segundoendiffecha a verificação condicional de a última compra ter sido há pelo menos seis meses.
{% endif %}
{% endif %}
Código Liquid completo
{% if {{custom_attribute.${favorite_product}}} == blank or {{custom_attribute.${last_purchase_date}}} == blank %}
{% abort_message("No favorite product or last purchase date") %}
{% else %}
{% assign today = 'now' | date: "%s" | plus: 0 %}
{% assign last_purchase_date = {{custom_attribute.${last_purchase_date}}} | date: "%s" | plus: 0 %}
{% assign six_months = 6 | times: 30.44 | times: 24 | times: 60 | times: 60 %}
{% assign today_minus_last_purchase_date = {{today | minus: last_purchase_date}} %}
{% if today_minus_last_purchase_date >= six_months %}
We noticed it’s been a while since you last purchased {{custom_attribute.${favorite_product}}}. Have you checked out our latest offerings?
{% else %}
{% abort_message("Last purchase was less than six months ago") %}
{% endif %}
{% endif %}