Como pular linhas em um bloco de tabela dinâmica
O que você vai aprender
Aprenda a pular linhas (por exemplo, itens) em um bloco de tabela dinâmica. O caso de uso mais comum disso é ocultar itens irrelevantes, como seguro de envio ou itens de brinde, em um e-mail de carrinho abandonado. No entanto, você pode seguir estas etapas para qualquer e-mail que use um bloco de tabela dinâmica.
Esse processo envolve editar diretamente o código do seu e-mail. Isso é recomendado apenas para profissionais de marketing com conhecimento técnico ou para quem tem acesso a um desenvolvedor. Nossa equipe de suporte não pode ajudar você a escrever código personalizado além das orientações gerais abordadas nesta documentação. Para manter a segurança dos seus dados, a equipe de suporte da Klaviyo não pode abrir arquivos HTML.
Antes de começar
Este artigo aborda como ocultar itens de blocos de tabela dinâmica existentes. Se você ainda não criou um bloco de tabela dinâmica funcional (por exemplo, os produtos em um e-mail de carrinho abandonado ou de confirmação de pedido), saiba como criar um do zero ou comece com uma mensagem na nossa biblioteca de fluxos.
Escreva suas instruções if
Antes de fazer alterações no seu modelo, crie 2 snippets de código usando um editor de texto ou de código (em algum lugar de onde você possa copiar e colar os snippets depois). Cada snippet de código será composto de 3 partes:
- Uma tag if de abertura,
{% if ... %}, indicando quais itens devem aparecer no bloco de tabela. - Conteúdo, como uma tag de imagem ou texto sobre o produto.
- Uma tag de fechamento,
{% endif %}.
Crie a tag de abertura if
Aqui estão alguns exemplos de abertura de tags if:
Tag | Significado |
{% if item.price != 0 %} | Se o preço do item (item.price) for diferente de 0. |
{% if item.product.name != "Route Shipping Insurance" %} | Se o nome do item (item.product.name) for diferente de “Route Shipping Insurance”. |
{% if not "T-Shirt" in item.product.title %} | Se o título do item (item.product.title) não contiver "Camiseta." |
{% if item.title %} | Se o título do item (item.title) estiver definido (ou seja, tiver algum valor). |
Essas tag diferenciam maiúsculas de minúsculas e devem corresponder exatamente aos seus dados. Por exemplo, se a variável do preço do seu item for algo diferente de item.price (por exemplo, item.Price ou item.details.line_price), atualize o código para corresponder à sua fonte de dados.
Criar o conteúdo da instrução if
Para o conteúdo, siga estas etapas para usar o conteúdo existente do seu bloco de tabela dinâmica. Escreva este snippet de código em um editor de código ou texto; você vai adicioná-lo ao seu modelo na próxima seção.
- Em Conteúdo da célula da imagem do bloco de tabela, clique em Substituir para ver o espaço reservado da imagem.
- Copie todo o código do campo Variável dinâmica ou URL dinâmico. Observe que isso pode ser uma variável dinâmica simples ou pode ser um snippet de código mais longo; copie tudo, independentemente do tamanho.
- Substitua o placeholder neste snippet de código pelo código que você copiou do campo Variável dinâmica ou URL dinâmica.
<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">Se o bloco de tabela existente tiver uma variável dinâmica simples para a imagem, o conteúdo resultante ficará mais ou menos assim:
<img src="{{item.product.variant.images.0.src}}" style="width: 200px; height: auto;" width="200"> Se o bloco de tabela existente contiver um snippet de código mais longo, o conteúdo resultante poderá ficar assim:
<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">Adicione sua tag de fechamento
Depois, junte todo o conteúdo: sua instrução if de abertura, depois seu conteúdo e, por fim, uma tag {% endif %} de fechamento.
Repita para o conteúdo do texto
Em seguida, repita esse processo com o conteúdo do lado direito do bloco da sua tabela (por exemplo, o conteúdo do texto). Clique em </> para abrir o editor de código e copiar todo o conteúdo HTML. Depois, envolva esse conteúdo na mesma instrução if (etapas 1 e 3) que você usou para o conteúdo da imagem.
Veja como fica tudo junto:
Snippet de código 1 (imagem do produto) | Snippet de código 2 (detalhes do produto) |
|
|
E aqui está um detalhamento desses snippets de código:
Snippet de código 1 (imagem do produto) | Snippet de código 2 (detalhes do produto) |
|
|
Ao usar esses snippet de código, certifique-se de usar aspas retas (") em vez de aspas curvas (“) para garantir que o código seja renderizado corretamente.
Depois de escrever os dois snippet de código, continue no editor de modelo seguindo as etapas abaixo.
Pular linhas em um bloco de tabela dinâmica
Antes de editar seu bloco de tabela dinâmica, considere salvar o bloco original como conteúdo universal caso você precise consultá-lo em mensagens futuras. Em seguida, desvincule o bloco e edite-o separadamente, para que suas edições não sejam salvas no bloco de conteúdo universal.
- Se o seu e-mail fizer parte de um fluxo, defina-o como Rascunho ou Manual para que as mensagens não sejam enviadas enquanto você edita a mensagem do fluxo.
- Verifique se o Conteúdo da célula de ambas as colunas do novo bloco de tabela está definido como Texto.
- Clique em </> para abrir o editor de HTML do lado esquerdo do bloco de tabela.
- Copie o snippet de código da imagem do produto que você criou na seção anterior e cole-o no campo HTML.
- Clique em Concluído no canto superior esquerdo.
- Navegue até o editor no lado direito do bloco de tabela.
- Clique em </> para abrir o editor HTML do lado direito do bloco de tabela.
- Copie o snippet de código de detalhes do produto que você criou na seção anterior e cole-o no campo HTML, substituindo todo o conteúdo anterior.
- Clique em Concluído.
- Pré-visualize o e-mail para garantir que ele apareça conforme o esperado: o item ignorado não deve aparecer, mas todos os outros itens aparecerão normalmente. Certifique-se de visualizar com um evento que contenha o item que você está tentando ocultar, para garantir que ele fique oculto.
Declarações condicionais e editor de texto integrado
Quando você adiciona instruções condicionais a um bloco de texto, elas podem desaparecer do editor de texto integrado. O código ainda está presente, porém oculto. Para ver e editar declarações condicionais, use o Construtor de tags do Django ou mova o conteúdo para um bloco de HTML dedicado para edição direta do código.
As seguintes tags não aparecem no editor de texto em linha, mas continuam no bloco de texto:
- {% for ... %}
- {% endfor %}
- {% if ... %}
- {% elif ... %}
- {% else %}
- {% endif %}
- {% with ... %}
- {% endwith %}
Solução de problemas
Nenhum item aparece na prévia
- Certifique-se de que você está visualizando a prévia com um evento que corresponda à fonte de dados que você usou (por exemplo, Iniciou o checkout para uma mensagem de carrinho abandonado).
- Confirme se Repetir para e Alias da linha correspondem exatamente à Coleção de linhas e ao Alias da linha do bloco original.
O item que deveria ser ignorado ainda está aparecendo
Verifique a ortografia e o uso de maiúsculas e minúsculas da sua instrução if. Se o produto ainda estiver aparecendo, isso significa que ele atende aos critérios na sua instrução if, então sua instrução if não está configurada corretamente. Saiba mais sobre lógica condicional em modelos.
Resultado
Depois de seguir essas etapas, todos os itens que não atenderem aos critérios da sua instrução if não aparecerão em mensagens como emails de carrinho abandonado ou de confirmação do pedido.
Recursos adicionais
- Referência sobre a personalização de mensagens
Saiba como usar as tags do modelo da Klaviyo para personalizar a experiência dos seus clientes.
- Como importar um modelo HTML personalizado
Saiba como importar um modelo HTML personalizado para a Klaviyo.