How to Send Data Arrays with Automation 360

With data arrays, you can create product cards and send dynamic personalized emails, for example, to inform a customer about their order status.

Because the templates are dynamic, you can include not only text, images, and links but change lots of other elements using variables. These templates can include multiple product cards based on the number of products a customer orders.

Let's talk about how to create an event using a data array and add variables to your email template.

Create an Event

Go to the "Automations" > "Event Manager" section. Click Add New Event, and select "Custom Event."

See also: How to Create an Event.

Next to the name of the variable you will use to send your data array, select the "Structure" type. Add product variables inside the structure.

To pass a link to a product image, use a variable of the "String" type.

Once you add all the variables, click Add. Congratulations, your event has been successfully created. Copy the URL to which the data will be sent and the body of your data structure. You need to send it to your developer to be able to send data from your site via a POST request.

Add a Data Array to Your Template

You can insert a data array into your email template using the HTML editor or drag and drop builder. To mark your data array’s start and end, add |[ for item in products ]| and |[ endfor ]|.

Where products is the name of your array variable.

To specify a variable from a structure variable, you need to add an item. For example, if you are passing a link to a product image using the img variable, you need to add a variable in the {{item.img}} format.

To display an image, use the image display tag with the source attribute: <img scr="{{item.img}}">.

To add a clickable link, include the tag used to create links with the address attribute: <a href="/{{item.url}}">.

Creating a Product Card

When creating a product card, we recommend creating a table where each element — an image or text — is a separate table cell, as both image styles and table styles apply here.

An example of code with data array without styles:

<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}}">text</a></td>
<td>{{item.price}}</td>
< /tr>
</tbody>
</table>
|[ endfor ]|</div>

You can add inline styles to your table using the style attribute to display the information in your product card based on your design. You can also create dynamic emails using our pre-made templates without having any knowledge of HTML. Read more: How to Create Dynamic Emails Triggered by Events Using Pre-made SendPulse Templates.

Displaying Products in a Row

Products in a card are arranged in one column vertically, meaning that there is 1 product in a row. To arrange products in a row horizontally, add the following lines inside the <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>

Where:

Last Updated: 09.01.2023