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.
Essas etapas exigem a opção HTML em Conteúdo da célula no seu 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 antes de editar para que as mensagens não sejam enviadas automaticamente enquanto você faz alterações.
Escreva suas instruções if
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 mais tarde): 1 para a imagem do produto e 1 para os detalhes do produto. Cada snippet de código terá 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.
Os exemplos usam item como o alias da linha. Substitua se a sua tabela usar um alias diferente. O exemplo de preço compara com o número 0; se o seu armazenamento de dados armazenar preços como texto, compare com o valor de texto exato, como {% if item.price != "0.00" %}.
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.
- Selecione a célula de imagem no bloco de tabela. Em Conteúdo da célula, 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 um snippet de código mais longo; copie tudo, independentemente do tamanho. Em seguida, feche o seletor de imagens.
- 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">Este exemplo usa uma largura de 200 px. Para manter as configurações de imagem atuais, use a Largura máxima, adicione o Texto alternativo em um atributo alt e envolva a imagem em uma tag <a href="..."> usando o Endereço do link.
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
Crie o segundo snippet de código a partir da célula de detalhes do produto:
- Abra a célula de texto de detalhes do produto. Se uma caixa de diálogo oferecer Converter para bloco HTML, selecione essa opção e continue para a etapa 3. Caso contrário, selecione e copie todo o conteúdo no editor de texto inline.
- Em Conteúdo da célula, selecione HTML. Cole o conteúdo que você copiou no editor de código, substituindo qualquer conteúdo existente. Se solicitado, escolha Colar como HTML.
- Copie o HTML resultante no seu segundo snippet no editor de texto ou código. Coloque-o na mesma tag de abertura if e na tag de fechamento
{% endif %}que você usou para o snippet de imagem.
Por exemplo, os dois snippets podem ficar assim para os dados Shopify Started Checkout. Use as variáveis e os links da sua própria tabela:
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
- Selecione a célula de imagem na sua tabela dinâmica existente. Em Conteúdo da célula, selecione HTML.
- Copie o snippet de código da imagem do produto que você criou na seção anterior e cole-o no editor de código, substituindo qualquer conteúdo existente.
- Selecione a célula de detalhes do produto, que você definiu como HTML na seção anterior.
- Copie o snippet de código de detalhes do produto que você criou na seção anterior e cole-o no editor de código, substituindo todo o conteúdo anterior.
- Visualize o e-mail para garantir que ele apareça como esperado: o item ignorado não deve aparecer, mas todos os outros itens vão aparecer normalmente. Não deixe de visualizar com um evento que contenha o item que você está tentando ocultar, para garantir que ele esteja oculto. Também visualize um evento que contenha apenas os itens que você quer ocultar para verificar como o restante do e-mail fica.
- Quando terminar, espere as suas alterações terminarem de ser salvas e saia do editor de e-mail. Se você alterou um e-mail de fluxo ativo para Rascunho ou Manual, volte ao fluxo e defina esse e-mail como Ativo novamente quando estiver pronto para retomar o envio automático.
Essas condições ocultam o conteúdo de cada célula. O espaçamento ou as bordas de linhas vazias ainda podem aparecer; então, confira o layout na sua pré-visualização.
Declarações condicionais e editor de texto integrado
Em uma célula de texto, as tags de modelo podem aparecer como lógica editável em vez de código bruto. Selecione a lógica para editá-la e, em seguida, clique em Salvar. Nas células de HTML usadas acima, edite as tags diretamente no editor de código.
Isso se aplica a estas tags de modelo:
- {% 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).
- Na guia Estilos da tabela, confirme se Coleção de linhas e Alias da linha correspondem exatamente às configurações do bloco original.
O item que deveria ser ignorado ainda está aparecendo
Verifique se ambas as células usam a mesma instrução if e se ela envolve todo o conteúdo que você quer ocultar. Verifique a ortografia, o uso de maiúsculas e minúsculas, o alias da linha e o tipo de dados em relação aos dados do seu evento. 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.