Liquid, JavaScript, themes, sales channels
Hi Guys! I'm trying to use Klaviyo app for Shopify, and I have a list of items in a e-mail with liquid that are being displayed duplicated. I need some help in identifying why is it duplicated. The e-mail template code is below:
<table align="center" bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" bgcolor="#FEFFFF" border="0" cellpadding="0" cellspacing="0" class="width_100" role="presentation" width="640">
<tbody>
<tr>
<td align="center" class="edge" valign="top">
<div style="margin:0 auto">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="470">
<tbody>
<tr>
<td height="15" style="mso-line-height-rule:exactly; line-height:15px; font-size:15px;"> </td>
</tr>
<tr>
<td align="center" valign="top">
{% for item in event.extra.fulfillments.0.line_items -%}
{%- for line_item in event.extra.line_items -%}
{%- if line_item.product_id == item.product_id %}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="470">
<tbody>
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#010101; line-height:26px; font-weight:700; padding:0px 0px 15px 0px;" valign="top">ITEMS</td>
</tr>
<tr>
<td align="center" style="padding:10px 0px 15px 0px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="470">
<tbody>
<tr>
<td align="left" valign="middle" width="45%">
<img alt="Logo" border="0" height="126" src="{{ line_item.product.images.0.thumb_src }}" style="display:block; line-height:0;" width="126" /></td>
<td align="center" valign="top" width="10%"> </td>
<td align="right" valign="middle" width="45%">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="225">
<tbody>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px; font-weight:700;" valign="top">{{ line_item.product.title }}</td>
</tr>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px; font-style:italic;" valign="top">{{ line_item.variant_title }}</td>
</tr>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px;" valign="top">Quantity: {{ line_item.quantity | floatformat: 0 - }}<br />
${{ line_item.price | floatformat: 2 }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{% endif -%}
{%- endfor %}
{%- endfor %}
there is this { % for % } that I'm not getting if it's correct or not
Solved! Go to the solution
This is an accepted solution.
To fix this issue, you need to close the nested {% for %}
loop after the closing </tr>
tag.
Here's the modified code with the proper loop closure:
{% for item in event.extra.fulfillments.0.line_items -%}
{%- for line_item in event.extra.line_items -%}
{%- if line_item.product_id == item.product_id %}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="470">
<tbody>
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#010101; line-height:26px; font-weight:700; padding:0px 0px 15px 0px;" valign="top">ITEMS</td>
</tr>
<tr>
<td align="center" style="padding:10px 0px 15px 0px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="470">
<tbody>
<tr>
<td align="left" valign="middle" width="45%">
<img alt="Logo" border="0" height="126" src="{{ line_item.product.images.0.thumb_src }}" style="display:block; line-height:0;" width="126" />
</td>
<td align="center" valign="top" width="10%"> </td>
<td align="right" valign="middle" width="45%">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="225">
<tbody>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px; font-weight:700;" valign="top">{{ line_item.product.title }}</td>
</tr>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px; font-style:italic;" valign="top">{{ line_item.variant_title }}</td>
</tr>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px;" valign="top">Quantity: {{ line_item.quantity | floatformat: 0 }}<br />
${{ line_item.price | floatformat: 2 }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
{% endif %}
{%- endfor %}
{%- endfor %}
This is an accepted solution.
To fix this issue, you need to close the nested {% for %}
loop after the closing </tr>
tag.
Here's the modified code with the proper loop closure:
{% for item in event.extra.fulfillments.0.line_items -%}
{%- for line_item in event.extra.line_items -%}
{%- if line_item.product_id == item.product_id %}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="470">
<tbody>
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#010101; line-height:26px; font-weight:700; padding:0px 0px 15px 0px;" valign="top">ITEMS</td>
</tr>
<tr>
<td align="center" style="padding:10px 0px 15px 0px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="470">
<tbody>
<tr>
<td align="left" valign="middle" width="45%">
<img alt="Logo" border="0" height="126" src="{{ line_item.product.images.0.thumb_src }}" style="display:block; line-height:0;" width="126" />
</td>
<td align="center" valign="top" width="10%"> </td>
<td align="right" valign="middle" width="45%">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" role="presentation" width="225">
<tbody>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px; font-weight:700;" valign="top">{{ line_item.product.title }}</td>
</tr>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px; font-style:italic;" valign="top">{{ line_item.variant_title }}</td>
</tr>
<tr>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#010101; line-height:24px;" valign="top">Quantity: {{ line_item.quantity | floatformat: 0 }}<br />
${{ line_item.price | floatformat: 2 }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
{% endif %}
{%- endfor %}
{%- endfor %}
I'll try it! Thank you very much!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024