Solved

Repeating block w. Custom code

  • 22 June 2021
  • 3 replies
  • 486 views

Badge +1

So I’m an email designer/developer I can perfectly code my own emails without the build-in drag & drop editor from Klaviyo.

However I still have a webshop where I want to use the data from Klaviyo and Shopify, specifically the feature where it can Repeat a block, similar to running through an array. I need it for an Order confirmation mail to loop through the products the user have chosen.

I can’t figure out the right snippet to wrap my code in to repeat my products.

 

This is my code i need wrapped:

<tr>
<td align="left" width="120">
<a href="#" target="_blank"><img src="{{ item.product.images.0.src }}" width="120" style="display: block; border: 0; width: 120px;"/></a>
</td>
<td align="left">
<table width="100%" cellspacing="0" celppadding="0" border="0" dir="ltr">
<tr>
<td align="left" dir="rtl" class="break">
<table width="100%" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td align="left" class="break-product" style="font-size: 16px; font-family:'gt-america-medium', Arial, Helvetica, sans-serif; line-height: 24px; color: #505340;">
<a href="#" target="_blank" style="color:#505340; text-decoration: none;">{{ item.product.title }}</a>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px; line-height: 1px; height: 20px;">&nbsp;</td>
</tr>
<tr>
<td align="left" style="font-size: 12px; font-family:'gt-pressura-regular', Arial, Helvetica, sans-serif; color: #505340;">
Size: 140ml
</td>
</tr>
</table>
</td>
<td align="left" width="190" dir="rtl" class="break">
<table width="100%" cellspacing="0" celppadding="0" border="0" valign="middle" dir="ltr">
<tr>
<td align="center" dir="ltr" class="break-product" style="border-top: 1px solid #505340; border-bottom: 1px solid #505340; padding: 10px 0px; font-size: 16px; font-family:'gt-pressura-regular', Arial, Helvetica, sans-serif; line-height: 24px; color: #505340;">
QTY {{ item.quantity }}
</td>
<td align="right" dir="ltr" class="break-product" style="font-size: 16px; font-family:'gt-america-medium', Arial, Helvetica, sans-serif; line-height: 24px; color: #505340; padding: 5px 25px 5px 0px;">
DKK {{ item.price }}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

 

Is there a friendly soul out there who knows how to handle this?

icon

Best answer by David To 22 June 2021, 18:10

View original

3 replies

Userlevel 7
Badge +58

Hello @Filske,

Thanks for sharing your question with the Klaviyo Community!

Klaviyo’s block repeat function is just a simplified way of implementing conditions through Klaviyo’s drag-and-drop editor. For example, you can use a for loop to iterate through and display the product titles to accomplish the same outcome of Klaviyo’s repeat function: {% for item in event.extra.line_items %} {{ item.product.title }} {% endfor %}

You can use any sort of condition you would want based on how you are building your email. 

I hope this helps!

David

Badge +1

Hello @Filske,

Thanks for sharing your question with the Klaviyo Community!

Klaviyo’s block repeat function is just a simplified way of implementing conditions through Klaviyo’s drag-and-drop editor. For example, you can use a for loop to iterate through and display the product titles to accomplish the same outcome of Klaviyo’s repeat function: {% for item in event.extra.line_items %} {{ item.product.title }} {% endfor %}

You can use any sort of condition you would want based on how you are building your email. 

I hope this helps!

David

Hi @david.to  thank you for commenting on this thread:)
I read the documentation through and what I didn’t understand is how to do this outside of the drag-and-drop editor. In this tutorial they’re sort of creating their own variables as I understand it. This example you’ve sent me here would that work straight in the code out of the box if I didn’t create it in the drag-and-drop editor?(hope my question makes sense)

Userlevel 7
Badge +58

Hey @Filske,

The variables highlighted within the Repeating a Block Based on Dynamic Data article I hyperlinked in my previous comment are not self-created; but are rather referenced based on the event/metric that is meant to trigger the flow which your email is housed in. The use of a For Loop built using HTML would in essence be the exact same functionality as Klaviyo’s repeat block function. Therefore, Klaviyo’s repeat block function is replaceable with using a For Loop to enact the same functions in a custom coded HTML template.

The HTML code example provided is a working code so long as the variables being defined align with your store’s and the flow’s setup. 

For further assistance in troubleshooting an HTML template, I would recommend reaching out and finding a Klaviyo partner who can provide a custom solution to for you. 

Have a great day!

David

Reply