Solved

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

  • 14 December 2020
  • 8 replies
  • 1056 views

Userlevel 1
Badge +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

icon

Best answer by retention 14 December 2020, 20:03

View original

8 replies

Userlevel 7
Badge +57

@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!

Userlevel 1
Badge +2

Hey Joseph,

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

 

 

Regards,

Stephen

Badge +1

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

Userlevel 7
Badge +57

@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 %}

 

Badge +3

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

Userlevel 7
Badge +60

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

Badge

@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?

Badge

@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