Hello Klaviyo Community,
I’m encountering an issue with my email template where a dynamic table intended to display playlist data is only rendering the header row, without populating the playlist rows. I’m using the HTML block. The proper dynamic table block works, but I was interested on using the HTML block so I have more control of the design. Here’s a detailed overview of the problem and the steps I’ve taken to troubleshoot it.
Objective:
Create a dynamic table in a Klaviyo email that lists playlists from the event.playlists property. Each playlist should display its Name, Streams, and Date Added.
Data Structure:
The event.playlists property is an array of playlist objects structured as follows:
{
"playlists": p
{
"name": "RITMO MACHAPE",
"streams": "4610",
"date_added": "26/11/2024"
},
{
"name": "BEATS VIRAIS",
"streams": "3500",
"date_added": "25/11/2024"
},
{
"name": "TOP 50 BRASIL",
"streams": "12000",
"date_added": "24/11/2024"
}
]
}
Template Code:
Here is the code used in the email template to generate the table:
{% if event.playlists %}
<table border="1" cellpadding="5" cellspacing="0" style="width: 100%; border-collapse: collapse; text-align: left;">
<thead>
<tr>
<th style="background-color: #f2f2f2;">Nome da Playlist</th>
<th style="background-color: #f2f2f2;">Streams</th>
<th style="background-color: #f2f2f2;">Data Adicionada</th>
</tr>
</thead>
<tbody>
{% for playlist in event.playlists %}
<tr>
<td>{{ playlist.name }}</td>
<td>{{ playlist.streams }}</td>
<td>{{ playlist.date_added }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>Nenhuma playlist disponível.</p>
{% endif %}
Issue Description:
When sending a test email, the table is rendered only with the header row, and the playlist rows are missing. However, when I loop through event.playlists outside of the table structure, the playlist details display correctly. This indicates that the loop itself is functioning, but there’s an issue with rendering the looped content inside the table.
Findings:
• Loop Outside Table: Successfully displays playlist details.
• Loop Inside Table: Only the header row is rendered; playlist rows do not appear.
Example of Successful Loop Outside Table:
{% if event.playlists %}
{% for playlist in event.playlists %}
<p>Nome: {{ playlist.name }}, Streams: {{ playlist.streams }}, Data Adicionada: {{ playlist.date_added }}</p>
{% endfor %}
{% else %}
<p>Nenhuma playlist disponível.</p>
{% endif %}
Output:
Nome: RITMO MACHAPE, Streams: 4610, Data Adicionada: 26/11/2024
Nome: BEATS VIRAIS, Streams: 3500, Data Adicionada: 25/11/2024
Nome: TOP 50 BRASIL, Streams: 12000, Data Adicionada: 24/11/2024
Despite confirming that event.playlists exists and contains data, the dynamic table within the email template only renders the header without the playlist rows. I’m seeking guidance on:
1. Possible Reasons: What might be preventing the loop from rendering within the table structure?
2. Best Practices: Are there specific best practices for looping within tables in Klaviyo templates that I might be missing?
3. Alternative Approaches: Any alternative methods to achieve the desired dynamic table rendering?
Thank you in advance for your help!