Solved

Dynamic Table Block - where am I going wrong?

  • 15 August 2021
  • 5 replies
  • 1138 views
sleepingdog
Rank
Badge +2

Hey all!

 

We are running into some issues with our dynamic table blocks not showing any of our abandoned cart content. Our templates are built outside of the Klaviyo Drag & Drop builder so all dynamic content is done in HTML.

A suggestion from Klaviyo help was to build the block in Klaviyo temp builder and export in HTML to pluck the structured code to insert into our template. We have done so but coming up short when we import the temp back into Klaviyo. The block is rendering the expected results in the D&D builder inside of Klaviyo but not rendering any results outside in our HTML template. Where are we going wrong?!

 

Code below. Row Collection = event.Items | Row Alias = item

<table border="0" cellpadding="0" cellspacing="0" class="kmTableBlock kmTableMobile" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
    <tbody class="kmTableBlockOuter">
        <tr>
            <td class="kmTableBlockInner" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; padding-top:9px; padding-bottom:9px; padding-left:0; padding-right:0" valign="top"> {% if event.Items %} {% for item in event.Items %} {% endfor %} <table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTable" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
                    <thead>
                        <tr>
                            <th class="kmTextContent" style="color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:35%; padding-top:0; font-weight:bold; padding-right:0; padding-left:0; padding-bottom:0" valign="top"> </th>
                            <th class="kmTextContent" style="color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:65%; padding-top:0; font-weight:bold; padding-right:0; padding-left:0; padding-bottom:0" valign="top"> </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="kmTableRow">
                            <td class="kmTextContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:35%; border-top-style:none; padding-bottom:4px; padding-right:10px; padding-left:10px; padding-top:4px; border-top-color:#d9d9d9; border-top-width:0" valign="top">
                                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td class="kmImageContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; font-size:0; padding:0" valign="top"> <a href="{% if not 'Addon' in item.Name %}{% if not 'addon' in item.SKU %}{{ item.ProductURL }}{% endif %}{% endif %}" style="color:#2464FF; font-weight:normal; text-decoration:underline; word-wrap:break-word" target="_self"> <img align="right" alt="{% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} {{ item.Name }} {% endif %}{% endif %}" class="kmImage" src="{% if not 'Add on' in item.Name %} {% if not 'addon' in item.SKU %} {{ item.ImageURL|missing_image }} {% endif %} {% endif %}" style="border:0; height:auto; line-height:100%; outline:none; text-decoration:none; margin-left:0; font-size:12px; padding-bottom:0; vertical-align:top; display:inline; max-width:200px" width="200"> </a> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td class="kmTextContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; border-right:none; width:65%; border-top-style:none; padding-bottom:4px; padding-right:10px; padding-left:10px; padding-top:4px; border-top-color:#d9d9d9; border-top-width:0" valign="top"> {% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} <h3 style="display:block; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:24px; font-style:normal; font-weight:bold; letter-spacing:normal; line-height:110%; margin-bottom:12px; margin-left:0; margin-right:0; margin-top:0; text-align:left; color:#222"><a href="{{ item.ProductURL }}" style="color:#2464FF; font-weight:normal; text-decoration:underline; word-wrap:break-word">{{ item.Name }}</a></h3>
                                <p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">Quantity: {{ item.Quantity|floatformat:0 }} — Total: ${{ item.ItemPrice|floatformat:2 }}</p> {% endif %}{% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table> {% else %} {% endif %} </td>
        </tr>
    </tbody>
</table>

Thanks everyone!

icon

Best answer by sleepingdog 17 August 2021, 17:10

View original
-Marco

5 replies

sleepingdog
Rank
Badge +2

Some additional context. We’re using Shopify but we bypass Shopify checkout using Carthook’s Legacy app, Carthook Checkout. Event tags are limited to the following:

SKU = {{ event.Items.0.SKU }}

Product Variant = {{ event.Items.0.Variant }}

Product Title = {{ event.Items.0.Name }}

Cart Quantity = {{ event.Items.0.Quantity }}

Item Price = {{ event.Items.0.ItemPrice }}

Item X Quantity Print = {{ event.Items.0.RowTotal }}

Product URL = {{ event.Items.0.ProductURL }}

Image Src = {{ event.Items.0.ImageURL }}

Checkout URL = {{ event.CheckoutURL }}

Total Cart Value = {{ event|lookup:'$value' }}

Product Title = {{ event.ItemNames.0 }}

-Marco
David To
Rank
Userlevel 7
Badge +60

Hello @sleepingdog,

Thanks for sharing your question with the Klaviyo Community!

How are you previewing this email which you’ve imported back into Klaviyo? One thing to keep in mind is that since your template would be utilizing dynamic code, in order for the dynamic table block to render, it would need to be previewed in a metric triggered flow which aligns with these dynamic variables. In this case it sounds like it would need to be previewed within a flow triggered by your CartHook Started Checkout event.

Also, because you are using a custom event for the CartHook Started Checkout event, I would double check to make sure the dynamic variables you are using align with the variables being shared from the event. Some helpful articles I would suggest taking a look at are:

In addition, Klaviyo only recommends using custom HTML for technically savvy marketers, or for anyone who has access to a developer or email designer. While Klaviyo does support custom HTML, our support team cannot help you build out or troubleshoot your custom templates beyond offering the general guidance. Since you are building your template via HTML, I would suggest working with your email designer or finding one from Klaviyo’s extensive network of agency partners to further assist you.

Thanks for being a Klaviyo Community member! Have a great day!

David

sleepingdog
Rank
Badge +2

@david.to thanks for your reply.

 

How are you previewing this email which you’ve imported back into Klaviyo?

We are previewing in both directly in Klaviyo and sent to gmail testing inbox.

 

One thing to keep in mind is that since your template would be utilizing dynamic code, in order for the dynamic table block to render, it would need to be previewed in a metric triggered flow which aligns with these dynamic variables. In this case it sounds like it would need to be previewed within a flow triggered by your CartHook Started Checkout event.

We are previewing in the exact flow with the exact metric trigger that is dynamically showing content in the original template built in Klaviyo. Essentially, it’s the same exactly snippet of code just one was built and kept inside of Klaviyo directly and one is using code exported from the same exact template and added to an HTML template and re-imported into the same flow. 

 

Also, because you are using a custom event for the CartHook Started Checkout event, I would double check to make sure the dynamic variables you are using align with the variables being shared from the event. Some helpful articles I would suggest taking a look at are

We have, at least we think we have. None of Klaviyo’s documentation provides adequate solutions for HTML structure of dynamic blocks. That is simply all I am looking for is a sample example of what a dynamic block should look like to compare. 

 

 

-Marco
sleepingdog
Rank
Badge +2

Here is the solution for anyone looking to build dynamic blocks in HTML. 

 

Broken:

<table border="0" cellpadding="0" cellspacing="0" class="kmTableBlock kmTableMobile" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
    <tbody class="kmTableBlockOuter">
        <tr>
            <td class="kmTableBlockInner" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; padding-top:9px; padding-bottom:9px; padding-left:0; padding-right:0" valign="top"> {% if event.Items %} {% for item in event.Items %} {% endfor %} <table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTable" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
                    <thead>
                        <tr>
                            <th class="kmTextContent" style="color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:35%; padding-top:0; font-weight:bold; padding-right:0; padding-left:0; padding-bottom:0" valign="top"> </th>
                            <th class="kmTextContent" style="color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:65%; padding-top:0; font-weight:bold; padding-right:0; padding-left:0; padding-bottom:0" valign="top"> </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="kmTableRow">
                            <td class="kmTextContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:35%; border-top-style:none; padding-bottom:4px; padding-right:10px; padding-left:10px; padding-top:4px; border-top-color:#d9d9d9; border-top-width:0" valign="top">
                                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td class="kmImageContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; font-size:0; padding:0" valign="top"> <a href="{% if not 'Addon' in item.Name %}{% if not 'addon' in item.SKU %}{{ item.ProductURL }}{% endif %}{% endif %}" style="color:#2464FF; font-weight:normal; text-decoration:underline; word-wrap:break-word" target="_self"> <img align="right" alt="{% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} {{ item.Name }} {% endif %}{% endif %}" class="kmImage" src="{% if not 'Add on' in item.Name %} {% if not 'addon' in item.SKU %} {{ item.ImageURL|missing_image }} {% endif %} {% endif %}" style="border:0; height:auto; line-height:100%; outline:none; text-decoration:none; margin-left:0; font-size:12px; padding-bottom:0; vertical-align:top; display:inline; max-width:200px" width="200"> </a> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td class="kmTextContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; color:#222; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; border-right:none; width:65%; border-top-style:none; padding-bottom:4px; padding-right:10px; padding-left:10px; padding-top:4px; border-top-color:#d9d9d9; border-top-width:0" valign="top"> {% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} <h3 style="display:block; font-family:&quot;Helvetica Neue&quot;, Arial; font-size:24px; font-style:normal; font-weight:bold; letter-spacing:normal; line-height:110%; margin-bottom:12px; margin-left:0; margin-right:0; margin-top:0; text-align:left; color:#222"><a href="{{ item.ProductURL }}" style="color:#2464FF; font-weight:normal; text-decoration:underline; word-wrap:break-word">{{ item.Name }}</a></h3>
                                <p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">Quantity: {{ item.Quantity|floatformat:0 }} — Total: ${{ item.ItemPrice|floatformat:2 }}</p> {% endif %}{% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table> {% else %} {% endif %} </td>
        </tr>
    </tbody>
</table>

 

Fixed

{% if event.Items %} {% for item in event.Items %}
                                                      <table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTable" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse;border-spacing:0px" width="100%">                                                        
                                                        <thead>                                                          
                                                          <tr style="border-collapse:collapse">                                                            
                                                            <th class="kmTextContent" style="color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;width:35%;padding-top:0;font-weight:bold;padding-right:0;padding-left:0;padding-bottom:0" valign="top"></th>
                                                            <th class="kmTextContent" style="color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;width:65%;padding-top:0;font-weight:bold;padding-right:0;padding-left:0;padding-bottom:0" valign="top"></th>
                                                          </tr>
                                                        </thead>
                                                        <tbody>                                                          
                                                          <tr class="kmTableRow" style="border-collapse:collapse">                                                            
                                                            <td class="kmTextContent" style="Margin:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;width:35%;border-top-style:none;padding-bottom:4px;padding-right:10px;padding-left:10px;padding-top:4px;border-top-color:#d9d9d9;border-top-width:0" valign="top">                                                              
                                                              <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse;border-spacing:0px" width="100%">                                                                
                                                                <tbody>                                                                  
                                                                  <tr style="border-collapse:collapse">                                                                    
                                                                    <td class="kmImageContent" style="padding:0;Margin:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;font-size:0" valign="top">                                                                      <a href="{% if not 'Addon' in item.Name %}{% if not 'addon' in item.SKU %}{{ item.ProductURL }}{% endif %}{% endif %}" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#2464FF;font-size:14px;font-weight:normal;word-wrap:break-word" target="_self"> 
                                                                        <img align="right" alt="{% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} {{ item.Name }} {% endif %}{% endif %}" class="kmImage" src="{% if not 'Add on' in item.Name %} {% if not 'addon' in item.SKU %} {{ item.ImageURL|missing_image }} {% endif %} {% endif %}" style="display:inline;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;height:auto;line-height:12px;margin-left:0;font-size:12px;padding-bottom:0;vertical-align:top;max-width:200px" width="200"/></a>
                                                                    </td>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </td>
                                                            <td class="kmTextContent" style="Margin:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;border-right:none;width:65%;border-top-style:none;padding-bottom:4px;padding-right:10px;padding-left:10px;padding-top:4px;border-top-color:#d9d9d9;border-top-width:0" valign="top">
                                                              {% if not 'Add on' in item.Name %} 
                                                                {% if not 'addon' in item.SKU %}
                                                              <h3 style="Margin:0;line-height:26px;mso-line-height-rule:exactly;font-family:'Helvetica Neue', Arial;font-size:24px;font-style:normal;font-weight:bold;color:#222;display:block;letter-spacing:normal;margin-bottom:12px;margin-left:0;margin-right:0;margin-top:0;text-align:left">                                                                <a href="{{ item.ProductURL }}" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#2464FF;font-size:20px;font-weight:normal;word-wrap:break-word">{{ item.Name }}</a>
                                                              </h3>
                                                              <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Montserrat, sans-serif;line-height:21px;color:#333333;font-size:14px;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0">
                                                                Quantity: {{ item.Quantity|floatformat:0 }} &mdash; Total: ${{ item.ItemPrice|floatformat:2 }}
                                                              </p> {% endif %}
                                                              {% endif %}
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table> {% endfor %}
                                                      {% endif %}

 

Just replace my event variables and style. 

-Marco
David To
Rank
Userlevel 7
Badge +60

Hello @sleepingdog,

Happy to hear you were able to properly code a dynamic table block using HTML! Also, really appreciate you sharing your answer with the rest of the Klaviyo Community! I’m sure this will be helpful to other members who may be having the same issue you’ve had.

Thanks for being a part of the Klaviyo Community! Have a great day!

David

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.