Skip to main content
Solved

Limited Number of "Recently Viewed Items" showing in Flow Email

  • December 14, 2020
  • 8 replies
  • 1103 views

Forum|alt.badge.img+2

Hello,

Is there a way to include the “recently viewed items” code snippet in a flow, as listed here : 

 

https://help.klaviyo.com/hc/en-us/articles/360019921772-How-to-Insert-Recently-Viewed-Items-into-an-Email#3-most-recently-viewed-items2

 

But to limited the number of products shown ?   I’d like to tell the flow to show “at most 4 last viewed items” by the contact. 

 


Thanks

Stephen

Best answer by retention

@stevrons  If you want to show Up to 4 items, in the “Grid” format as specified in the documentation, you can use their snippet with a slight adjustment:

{% for item in person.ViewedItems %}
{% if  forloop.counter <= 4 %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
 		<tr>
 			<td style="padding-right:15px;padding-left:18px; width:50px"><img src="{{ item.ImageThumbnailUrl }}" style="margin: 1px; max-width: 150px; height: auto;" /></td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center; font-size:13px; width:50px; font-weight:800">{{ item.Title }}</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center;font-size:12px; width:50px"><em>{{ item.Metadata.Price|striptags }}</em></td>
 		</tr>
 	</tbody>
</table>
{% endif %}
{% endfor %}

I added the {% if forloop.counter  <= 4 %} and the closing {% endif %} so that if a person has more than 4 items, it will stop at the 4th item.  You may want to adjust the rest of the code for it to fit your template in terms of the table size, images size, other item properties, etc.  

Hope this helps!

View original
Did this topic or the replies in the thread help you find an answer to your question?

8 replies

retention
Partner - Platinum
Forum|alt.badge.img+62
  • 2025 Champion
  • 920 replies
  • Answer
  • December 14, 2020

@stevrons  If you want to show Up to 4 items, in the “Grid” format as specified in the documentation, you can use their snippet with a slight adjustment:

{% for item in person.ViewedItems %}
{% if  forloop.counter <= 4 %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
 		<tr>
 			<td style="padding-right:15px;padding-left:18px; width:50px"><img src="{{ item.ImageThumbnailUrl }}" style="margin: 1px; max-width: 150px; height: auto;" /></td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center; font-size:13px; width:50px; font-weight:800">{{ item.Title }}</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center;font-size:12px; width:50px"><em>{{ item.Metadata.Price|striptags }}</em></td>
 		</tr>
 	</tbody>
</table>
{% endif %}
{% endfor %}

I added the {% if forloop.counter  <= 4 %} and the closing {% endif %} so that if a person has more than 4 items, it will stop at the 4th item.  You may want to adjust the rest of the code for it to fit your template in terms of the table size, images size, other item properties, etc.  

Hope this helps!


Forum|alt.badge.img+2
  • Author
  • Contributor II
  • 3 replies
  • December 14, 2020

Hey Joseph,

Of course! I should have seen that in the code, thank you for pointing that out that is perfect.

 

 

Regards,

Stephen


Forum|alt.badge.img+1
  • Contributor I
  • 1 reply
  • June 29, 2021

We you able to link the products to their individual pages?


retention
Partner - Platinum
Forum|alt.badge.img+62
  • 2025 Champion
  • 920 replies
  • June 29, 2021

@kmattison - If you want to link to the products, you can wrap a link with the follow code:

<a href="{{ item.Url }}"> ... </a>

Here is the code as above but with the images linked to the product URL:

{% for item in person.ViewedItems %}
{% if  forloop.counter <= 4 %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
 		<tr>
 			<td style="padding-right:15px;padding-left:18px; width:50px">
			<a href="{{ item.Url }}">
 				<img src="{{ item.ImageThumbnailUrl }}" style="margin: 1px; max-width: 150px; height: auto;" />
 			</a>
 			</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center; font-size:13px; width:50px; font-weight:800">{{ item.Title }}</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center;font-size:12px; width:50px"><em>{{ item.Metadata.Price|striptags }}</em></td>
 		</tr>
 	</tbody>
</table>
{% endif %}
{% endfor %}

 


IV Consultancy
Contributor I
Forum|alt.badge.img+3

Hello! This is helpful but how would I do this for Abandoned Cart product block?


David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • July 2, 2021

Hello @IV Consultancy,

You can limit the number of products that appear within an abandoned cart’s dynamic table block by applying a |slice filter to the row collection of your dynamic table block’s data source. For example, from the screenshot below, applying the |slice:'3' filter will limit the results of the dynamic table block to three products.

I hope this helps!

David


Forum|alt.badge.img+1
  • Contributor I
  • 2 replies
  • August 4, 2022
retention wrote:

@kmattison - If you want to link to the products, you can wrap a link with the follow code:

<a href="{{ item.Url }}"> ... </a>

Here is the code as above but with the images linked to the product URL:

{% for item in person.ViewedItems %}
{% if  forloop.counter <= 4 %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
 		<tr>
 			<td style="padding-right:15px;padding-left:18px; width:50px">
			<a href="{{ item.Url }}">
 				<img src="{{ item.ImageThumbnailUrl }}" style="margin: 1px; max-width: 150px; height: auto;" />
 			</a>
 			</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center; font-size:13px; width:50px; font-weight:800">{{ item.Title }}</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center;font-size:12px; width:50px"><em>{{ item.Metadata.Price|striptags }}</em></td>
 		</tr>
 	</tbody>
</table>
{% endif %}
{% endfor %}

 

Hi,

I used the code, but it didn’t display. I am sure I sent the preview to the email profile with browse history. Could you please tell me where the problem is?


Forum|alt.badge.img+1
  • Contributor I
  • 2 replies
  • August 4, 2022
Chenglin wrote:
retention wrote:

@kmattison - If you want to link to the products, you can wrap a link with the follow code:

<a href="{{ item.Url }}"> ... </a>

Here is the code as above but with the images linked to the product URL:

{% for item in person.ViewedItems %}
{% if  forloop.counter <= 4 %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
 		<tr>
 			<td style="padding-right:15px;padding-left:18px; width:50px">
			<a href="{{ item.Url }}">
 				<img src="{{ item.ImageThumbnailUrl }}" style="margin: 1px; max-width: 150px; height: auto;" />
 			</a>
 			</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center; font-size:13px; width:50px; font-weight:800">{{ item.Title }}</td>
 		</tr>
 		<tr>
 			<td style="padding-right: 15px;padding-left:18px; text-align: center;font-size:12px; width:50px"><em>{{ item.Metadata.Price|striptags }}</em></td>
 		</tr>
 	</tbody>
</table>
{% endif %}
{% endfor %}

 

Hi,

I used the code, but it didn’t display. I am sure I sent the preview to the email profile with browse history. Could you please tell me where the problem is?

@retention 


Reply