Recommendations v2 inserts
You can show a set of recommendations to the customer. They are calculated by the AI engine.
Recommendations on websites
Syntax
{% recommendations3 campaignId=campaign-hash %}
{{recommended_products3}}
{% endrecommendations3 %}
Example
The following code is an example of showing recommendations on a website. The insert loops through recommendations generated for a campaign (the number of recommendations depends on the settings) and produces an HTML list of recommended items.
Input
<div class="snrs-AI--banner" style="height: auto;">
<div class="snrs-AI--slider">
<div class="snrs-AI--products-slider">
<ul>
{% recommendations3 campaignId=campaign-hash %}
{% for p in recommended_products3 %}
<li data-snr-ai-product-id="{{p.itemId}}">
<a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
<img src="{{ p.imageLink }}"
class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}"
width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">{{p.title}}</span>
</h3>
<span class="snrs-AI-product--series">{{p.attributes.series}}</span>
</a>
</li>
{% endfor %}
{% endrecommendations3 %}
</ul>
</div>
</div>
</div>
Output
<div class="snrs-AI--banner" style="height: auto;">
<div class="snrs-AI--slider">
<div class="snrs-AI--products-slider">
<ul>
<li data-snr-ai-product-id="000097">
<a class="snrs-AI--item-link"
href="https://example.com/accessories-for-shaver/cleaner-contribution-to-shavers-brand-DDR2,id-2369"
title="Cleaning insert for shavers BRAND DDR22">
<img src="https://example.com/temp/thumbs-new/2/other/cd1c73e35b1db186e79e8a0039b27293_250x200w50.jpg"
class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
width="90" alt="Cleaning insert for shavers BRAND DDR2" id="snrAI-image-000097">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">Cleaning insert for shavers BRAND DDR2</span>
</h3>
<span class="snrs-AI-product--series">DDR2 8983</span>
</a>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
AI cart recommendations
When generating recommendations for a cart, you must first create an aggregate that stores the items currently in the cart. That aggregate is used as context for generating complementary item recommendations.
Syntax
{% set recommendationProducts = [] %}
{% aggregate aggregate-hash %}
{% for r in aggregate_result|reverse %}
{% set _noop = recommendationProducts.append(r.sku) %}
{% endfor %}
{% endaggregate %}
{% recommendations3 campaignId=campaign-hash itemsIds=recommendationProducts %}
{{ recommended_products3 }}
{% endrecommendations3 %}
Example
The following code is an example of adding complementary item recommendations to a cart page.
Input
<div class="snrs-AI--banner" style="height: auto;">
<div class="snrs-AI--slider">
<div class="snrs-AI--products-slider">
<ul>
{% set recommendationProducts = [] %}
{% aggregate 4d08sdfe-4kof-3db5-mknj-7725f0283533 %}
{% for r in aggregate_result|reverse %}
{% set _noop = recommendationProducts.append(r.sku) %}
{% endfor %}
{% endaggregate %}
{% recommendations3 campaignId=T5gNrNlMFC57 itemsIds=recommendationProducts %}
{% for p in recommended_products3 %}
<li data-snr-ai-product-id="{{p.itemId}}">
<a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
<img src="{{ p.imageLink }}" class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}" width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">{{p.title}}</span>
</h3>
</a>
</li>
{% endfor %}
{% endrecommendations3 %}
</ul>
</div>
</div>
</div>
Output
<div class="snrs-AI--banner" style="height: auto;">
<div class="snrs-AI--slider">
<div class="snrs-AI--products-slider">
<ul>
<li data-snr-ai-product-id="000097">
<a class="snrs-AI--item-link"
href="https://example.com/accessories-for-shaver/cleaner-contribution-to-shavers-braun-CCR2,id-2369"
title="Cleaning insert for shavers BRAUN CCR2">
<img src="https://example.com/temp/thumbs-new/2/other/cd1c73e35b1db186e79e8a0039b27293_250x200w50.jpg"
class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
width="90" alt="Cleaning insert for shavers BRAUN CCR2" id="snrAI-image-000097">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">Cleaning insert for shavers BRAUN CCR2</span>
</h3>
</a>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
Filters
You can combine filters and elastic filters from the campaign with your own, or replace the campaign’s filters completely.
First, define the filters to apply by using the following syntax:
{% set filters = 'param1=="value"ANDparam2!="value2"' %}
where:
param1=="value"
is a filter that includes (==
) thevalue
ofparam1
param2!="value2"
is a filter that excludes (!=
) thevalue2
ofparam2
- AND combines the two filters
set filters
saves the entire definition to thefilter
variable.
Now, filters
can be added to the campaign’s filters or elastic filters by using the following attributes of the recommendation insert:
additionalFilters
/additionalElasticFilters
store your filters.filtersJoiner
/elasticFiltersJoiner
set the logic:REPLACE
replaces the campaign’s filters with your filters.AND
matches if both your filters and the campaign filters are met.OR
matches if at least one of the filters is met.
Example: add to filters
This example adds the filters defined by set filters
to the campaign’s filters:
{% set filters = 'param=="value"' %}
{% recommendations3 campaignId=campaign-hash additionalFilters=filters filtersJoiner=AND %}
{{ recommended_products3 }}
{% endrecommendations3 %}
Example: add to elastic filters
This example adds the filters defined by set filters
to the campaign’s elastic filters:
{% set filters = 'param=="value"' %}
{% recommendations3 campaignId=campaign-hash additionalElasticFilters=filters elasticFiltersJoiner=AND %}
{{ recommended_products3 }}
{% endrecommendations3 %}
Example: replace filter
This example generates recommendations limited to items from the Women>Dresses
category. The original campaign’s filter is replaced.
Input
{% set filters = 'category=="Women>Dresses"' %}
{% recommendations3 campaignId=T5gNrNlMFC57 additionalFilters=filters filtersJoiner=REPLACE %}
{% for p in recommended_products3 %}
<li data-snr-ai-product-id="{{p.itemId}}">
<a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
<img src="{{ p.imageLink }}" class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}" width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">{{p.title}}</span>
</h3>
<span class="snrs-AI-product--season">{{p.attributes.season}}</span>
</a>
</li>
{% endfor %}
{% endrecommendations3 %}
Output
<div class="snrs-AI--banner" style="height: auto;">
<div class="snrs-AI--slider">
<div class="snrs-AI--products-slider">
<ul>
<li data-snr-ai-product-id="000097">
<a class="snrs-AI--item-link"
href="https://example.com/dresses/dress-alla"
title="Dresse Alla">
<img src="https://example.com/dresses/dress-alla_250x200w50.jpg"
class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
width="90" alt="Dresse Alla" id="snrAI-image-000097">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">Dresse Alla</span>
</h3>
<span class="snrs-AI-product--season">SUMMER</span>
</a>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
Open Graph meta tags
When dynamic content is requested, the OG tags are sent as variables that you can access. The variables are stored in the metric_additional_params
object.
Syntax
To assign a value of an OG tag to a variable, use the following syntax:
{% set additionalParam = metric_additional_params["property_name"] %}
Example
The following example displays the value of product:season
if <meta property="product:season" content="summer">
, otherwise defaults to Promotion
.
Input
{% set season = metric_additional_params["product:season"] %}
{% if season == "summer" %}
<h1 class="snrs-AI-product--category-title"> Summer promotion </h1>
{% else %}
<h1 class="snrs-AI-product--category-title"> Promotion </h1>
{% endif%}
Output
Output if <meta property="product:season" content="summer">
:
<h1 class="snrs-AI-product--category-title"> Summer promotion </h1>
Output if <meta property="product:season" content="spring">
:
<h1 class="snrs-AI-product--category-title"> Promotion </h1>
Open Graph meta tags in filters
You can insert the value of an OG tag into your filters.
Syntax
{% set additionalParam = metric_additional_params["property_name"] %} // stores value of OG tag
{% set filters = 'param=="' + additionalParam +'"' %} // adds value of OG tag to your filter
Example
The following example of a recommendation on a category page replaces the campaign’s filter with a filter based on OG tags.
Input
{% set season = metric_additional_params["product:season"] %}
{% set filters = 'attributes.season=="' + season +'"' %}
{% recommendations3 campaignId=T5gNrNlMFC57 additionalFilters=filters filtersJoiner=REPLACE %}
{% for p in recommended_products3 %}
<li data-snr-ai-product-id="{{p.itemId}}">
<a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
<img src="{{ p.imageLink }}" class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}" width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">{{p.title}}</span>
</h3>
<span class="snrs-AI-product--season">{{p.attributes.season}}</span>
</a>
</li>
{% endfor %}
{% endrecommendations3 %}
Output
<div class="snrs-AI--banner" style="height: auto;">
<div class="snrs-AI--slider">
<div class="snrs-AI--products-slider">
<ul>
<li data-snr-ai-product-id="000097">
<a class="snrs-AI--item-link"
href="https://example.com/dresses/dress-alla"
title="Dresse Alla">
<img src="https://example.com/dresses/dress-alla_250x200w50.jpg"
class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
width="90" alt="Dresse Alla" id="snrAI-image-000097">
<h3 class="snrs-AI-product--product-name">
<span class="snrs-AI-product--name-first">Dresse Alla</span>
</h3>
<span class="snrs-AI-product--season">SUMMER</span>
</a>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>