Como enviar dados array com a Automação 360

Com dados array, você pode criar cartões de produtos e enviar e-mails dinâmicos personalizados, por exemplo, para informar um cliente sobre o status de seu pedido.

Como os modelos são dinâmicos, você pode incluir não apenas texto, imagens e links, mas também alterar muitos outros elementos usando variáveis. Esses modelos podem incluir vários cartões de produtos com base no número de produtos que um cliente solicita.

Vamos falar sobre como criar um evento usando uma matriz de dados e adicionar variáveis ​​ao seu modelo de email.

Criar um evento

Vá para a seção "Automações" > "Gerenciador de eventos". Clique em Adicionar novo evento e selecione "Evento personalizado".

Consulte também: Como criar um evento.

Ao lado do nome da variável que você usará para enviar sua matriz de dados, selecione o tipo. Adicione variáveis ​​de produto dentro da estrutura.

Para passar um link para uma imagem de produto, use uma variável do tipo "String".

Depois de adicionar todas as variáveis, clique em Adicionar. Parabéns, seu evento foi criado com sucesso. Copie a URL para a qual os dados serão enviados e o corpo da sua estrutura de dados. Você precisa enviá-lo ao seu desenvolvedor para poder enviar dados do seu site por meio de uma solicitação POST.

Adicionar uma matriz de dados ao seu modelo

Você pode inserir uma matriz de dados em seu modelo de e-mail usando o editor HTML ou o construtor de arrastar e soltar.do array de dados início e o fim, adicione |[ for item in products ]| e |[ endfor ]|.

Onde produtos é o nome da sua variável de matriz.

Para especificar uma variável de uma variável de estrutura, você precisa adicionar um item. Por exemplo, se você estiver passando um link para uma imagem de produto usando a img variável, será necessário adicionar uma variável no {{item.img}} formato.

Para exibir uma imagem, use a tag de exibição de imagem com o atributo source: <img scr="{{item.img}}">.

Para adicionar um link clicável, inclua a tag usada para criar links com o atributo de endereço: <a href="/{{item.url}}">.

Criando um cartão de produto

Ao criar um cartão de produto, recomendamos criar uma tabela em que cada elemento — uma imagem ou texto — seja uma célula, pois os estilos de imagem e os estilos de tabela se aplicam aqui.

Um exemplo de código com array de dados sem estilos:

<div>|[ for item in products ]|
<table>
<tbody>
<tr>
<td><img scr="{{item.img}}"></td>
<td>{{item.name}}</td>
<td>{{item .id}}</td>
<td><a href="/{{item.url}}">texto</a></td>
<td>{{item.price}}</td>
< /tr>
</tbody>
</table>
|[ endfor ]|</div>

Você pode adicionar estilos inline à sua tabela usando o style atributo para exibir as informações em seu cartão de produto com base em seu design. Você também pode criar e-mails dinâmicos usando nossos modelos pré-fabricados sem ter nenhum conhecimento de HTML. Leia mais: Como criar emails dinâmicos acionados por eventos usando modelos pré-fabricados da SendPulse.

Exibindo produtos em uma linha

Os produtos em um cartão são organizados em uma coluna verticalmente, o que significa que há 1 produto em uma linha. Para organizar os produtos em uma linha horizontalmente, adicione as seguintes linhas dentro da <tbody> tag

<table>
    <tbody><!--{% set columns = 4 %}--> <!--{% for item in products%} --> <!--{% if loop.first or loop.index0 is divisible by(columns) %}-->
       <tr><!--{% endif %}-->
            <td>{{ item. product_name }}:{{ item.product_price }}</td>
       <!--{% if loop.last or loop.index is divisible by(columns) %}--></tr>
    <!--{% endif %}--> <!--{% endfor %}--></tbody>
</table>

Onde:

Última Atualização: 24.01.2023