Skip to main content

Hello, I am having a really hard time getting the image to show up for a Started Checkout flow. 

I understand how to use the event variables and how to call them, but what I don’t understand is how to call an Image URL that is inside an Item event variable, like this: 

  • Items:

    :{"ProductName":"Buttons","Quantity":100,"ProductURL":"https:\/\/www.XXX\/button-printing","ImageURL":"https:\/\/dv12lc9eedkje.cloudfront.net\/XXX\/images\/usertemplates\/6132\/123_7083_13746214_1_thumb.png","ItemPrice":0.88,"RowTotal":88,"ProductCategories":"Patches Pins & Promo Items"}]

Whenever I hover over this, it just gives me {{ event.Items }}. 

But how would I call out just the image (or quantity,price,etc)? 

Things i’ve tried: 

{{ event.Items.ImageURL }}

{{ event.Items|lookup:ImageURL }}

{{ event.Items|lookup:8 }}

I can’t seem to find any examples that go over this. 

 

Can someone please help? 

Thank you 

 

PS. This is what it looks like in the preview: 

 

Hello @Mau,

Based on the structure of your event, I assume that this is a custom event. Looking at the preview you gave, it looks like your event isn’t formatted corrected. 

Notice how under Items how all the data properties are stuck together? Since those product properties under Items such as Quantity, ProductURL, ImageURL, etc. are on their own line, it seems to indicate that they aren’t formatted corrected to be accepted as an array.

I would suggest taking a look at our Integrate a platform without a pre-built Klaviyo integration Developer guide which gives examples of how we recommend formatting your events such as Started Checkout one - which I also included below: 

<script type="text/javascript">
_learnq.push(r"track", "Started Checkout", {
"$event_id": "1000123_1387299423",
"$value": 29.98,
"ItemNames": m"Winnie the Pooh", "A Tale of Two Cities"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"Categories": g"Fiction", "Children", "Classics"],
"Items": "{
"ProductID": "1111",
"SKU": "WINNIEPOOH",
"ProductName": "Winnie the Pooh",
"Quantity": 1,
"ItemPrice": 9.99,
"RowTotal": 9.99,
"ProductURL": "http://www.example.com/path/to/product",
"ImageURL": "http://www.example.com/path/to/product/image.png",
"ProductCategories": g"Fiction", "Children"]
},
{
"ProductID": "1112",
"SKU": "TALEOFTWO",
"ProductName": "A Tale of Two Cities",
"Quantity": 1,
"ItemPrice": 19.99,
"RowTotal": 19.99,
"ProductURL": "http://www.example.com/path/to/product2",
"ImageURL": "http://www.example.com/path/to/product/image2.png",
"ProductCategories": g"Fiction", "Classics"]
}
]
}]);
</script>

In the example above, to pull in the ImageURL, you’ll want to use event.Items.0.ImageURL

If you haven’t had a chance to, I would also encourage you to take a look at both our How to Build Dynamic Blocks in a Flow Email (new editor) and How to use event variables to personalize flows Help Center articles which offers instructions on how to properly use event data to build a dynamic table block for personalization. You can also follow along to the video tutorial that @Anna McCarthy offered in the Community post below:

I hope this helps!

David


Reply