Solved

Items are being displayed duplicated

Sunpills
Tourist
6 0 1

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;">&nbsp;</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%">&nbsp;</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

Accepted Solution (1)

NomtechSolution
Astronaut
1245 113 147

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%">&nbsp;</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 %}

View solution in original post

Replies 2 (2)

NomtechSolution
Astronaut
1245 113 147

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%">&nbsp;</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 %}
Sunpills
Tourist
6 0 1

I'll try it! Thank you very much!