Skip to main content

I have an abandoned cart flow, and I’m having trouble displaying the items in a table with a dynamic row. As seen in the screenshot below, the first image and the URL that it links to is correct; it’s showing the correct item, correct item name, correct color and correct size. However, the second image is showing the correct image and attached URL, but it’s repeating the same item name, color and size.

The data source row collection is set to event.extra.line_items; the row alias is item. Any insight as to what I might be doing wrong here? I’ve tried many different variables but all of them display this result.

The code I’m using is also attached below.

Thanks in advance!

<a href="{{ organization.url }}products/{{ item.product.handle }}" target="_blank"><img alt="{{ event.extra.line_items.0.title }}" border="0" src="{% if item.product.variant.images.0.src %}{{ item.product.variant.images.0.src }}{% else %}{{ item.product.images.0.src|missing_product_image }}{% endif %}" style="width: 100%; max-width: 300px; height: auto; background: #E4D1C8; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 15px; color: #222222; margin: auto; display: block;" width="300" /></a>

<p style="text-align: center; font-family: Arial, Helvetica, sans-serif;color: #222222;font-size: 24px;font-weight:bold;padding-top:20px;">{{ event.extra.line_items.0.title }}</p>

<p style="text-align: center; font-family: Arial, Helvetica, sans-serif;color: #222222;font-size: 24px;font-weight:bold;">Color: <span style="font-family: Georgia, serif;color: #222222;font-weight:normal;">{{ event.extra.line_items.0.product.variant.options.Color }}</span></p>

<p style="text-align: center; font-family: Arial, Helvetica, sans-serif;color: #222222;font-size: 24px;font-weight:bold;">Size: <span style="font-family: Georgia, serif;color: #222222;font-weight:normal;">{{ event.extra.line_items.0.product.variant_options.Size }}</span></p>
<a href="{{ event.extra.checkout_url }}" target="_blank"><img alt="SHOP NOW" border="0" src="https://d3k81ch9hvuctc.cloudfront.net/company/MrfnmX/images/cac433e1-99e0-49f3-b3e0-7fa7b2aaf84a.jpeg" style="width: 100%; max-width: 600px; height: auto; background: #E4D1C8; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 15px; color: #222222; margin: auto; display: block;" width="600" /></a>

 

Hey @ajohns,

Did you happen to manually code this via HTML or did you build this using a table block?

If you were building this using a table block, in my experience, if you were looking for a stacked appearance, you’ll often times want to use the block repeat function rather than than setting the table block to dynamic and seeing a data data source. The difference here is that when using the block repeat function, the entire block will be repeated and all its entries iterated through. Whereas when using the dynamic setting with a data source, this will iterate through each of those defined arrays individually. They’ll typically accomplish the same thing, but typically it’ll appear more seamless when using the block repeat function for a stacked appearance.

Additionally, I would recommend double checking the variable you’ve used for the name, color, and size options to make sure they align with what you’ve set as the data source. Since it seems like the image and URL are iterating fine, I suspect that the variables used to identify the name, color, and size aren’t defined as an array, but rather its specific entry. Doing so would cause the data source to still “repeat”, however the variable pulled is directed at a single (first) entry, causing this experience.

If this was coded via HTML, I would suggest working with your email designer and developer and share the information along with them as well! 

I also believe taking a look at some of our resources below could be helpful:

 

I hope this helps!

David


Hi David,

Thanks for the tips; it looks like I’m almost there. I’ve managed to get the block repeat working, and the name/image/URL variables correct. 

My only outstanding issue is that I’m still getting the repeated color and size variables. I’ve found 2 variables that pertain to the color of the item, but when I put them in the code, I’m still getting the same problem. Same issue with the size variable (they look identical to the below, only instead of “Color” it says “Size”.)

{{ event.extra.line_items.0.product.variant.options.Color }}

{{ event.extra.line_items.0.product.variant_options.Color }}

How can I define them as an array instead of as a single item?

I’ve read the resources several times and there doesn’t seem to be anything in them that would address this problem.

Thanks!


Hey @ajohns,

If your variables are reading as {{ event.extra.line_items.0.product.variant.options.Color }}, the “0” would already strongly suggest those values are being stored as an array already. 

Are you by chance inputting the {{ event.extra.line_items.0.product.variant.options.Color }} variable as is into your table block directly? As detailed in the  Build Your Repeating Block subsection of the previously provided How to Use the Content Repeat Feature (new editor) Help Center article, you’ll want to actually reformat the variable before adding it to your table block. This reformatting is to ensure the correct nodes are being access and iterated through. Simply copy and pasting the default {{ event.extra.line_items.0.product.variant.options.Color }} variable is ensure that only this one specific node/array is being repeated for. 

For example, if you have {{ event.extra.line_items.0.variant_price }} and {{ event.extra.line_items.0.title }} variables, they’ll need to be reformatted as {{ item.variant_price }} and {{ item.title }} respectively. 

David


Reply