The use of Jinja scripting in a cart layout allows for the dynamic display of content, for example, showing products in the shopper's cart.

In a cart layout, a Jinja tag can be recognized by its code markers:

{{ }} - Used to display data, for example, the name of a product.
{% %} - Represents a function, such as an If statement that changes link tracking codes based on the trigger type.
{# #} - Denotes a comment not visible in the displayed Cart Layout, and usually describes what the surrounding code is doing.

The below table introduces some of the main types of data which are available for merging into a cart layout using Jinja tags.

Data category	Data available in cart layout
Person data	Email address Device ID Extend fields Log in status Custom data captured from your website
Signals	Recent purchases Categories bought Categories browsed
Analytics	Purchase value Buyer status, such as lapsed
Cart	Cart price
Products	Products abandoned or browsed
Trigger	Cart and product abandon contact type

Output data

Jinja can be used to display data captured from a shopper's activity.

For example, to display a product name from the shopper's cart:

{{ product.n }}

Output: Short Sleeve T-Shirt.

For Cart abandon and Purchase complete triggers, cart-level data can be targeted too, for example, the cart price:

{{ cart.cp }}

Output: £59.99.

Finally, shopper level data can also be displayed:

{{ person.fn }}

Output: Sam.

Learn more in Cart and SmartBlock layout merges.

Conditionally change content

An if statement can be used to dynamically change displayed content based on a field value. For example, you may want to include a different greeting if the person's name is known:

{% if person.fn %}Hi {{ person.fn }}{% else %}Hi{% endif %}

In this case, the greeting would be displayed as Hi Sam if the shopper Sam had entered their first name on the site, or Hi if not.

Multiple values can be checked by combining an if statement with an elif statement.

Here's an example that changes the greeting based on the language of a site:

{% if person.fn %}
  {% if cart.lang == 'EN' %}
    Hi {{ person.fn }}
  {% elif cart.lang == 'FR' %}
    Salut {{ person.fn }}
  {% else cart.lang == 'DE' %}
    Hallo {{ person.fn }}
  {% endif %}
{% elif %}
  {% if cart.lang == 'EN' %}
    Hi
  {% elif cart.lang == 'FR' %}
    Salut
  {% else cart.lang == 'DE' %}
    Hallo
  {% endif %}
{% endif %}

In this case, the greeting would be displayed as Salut Sam if the shopper Sam had entered their first name on the French language version of the site, or just Salut if not.

Set variables

A variable can be set at the top of the cart layout for use later on. For example, you may want to set a campaign tracking parameter then apply that to each link in the Cart Layout.

In this case the below Jinja code could be used:

{% set ga_campaign_code = 'basket_abandon' %}

The campaign tracking parameter could then be included on each product link:

For email

<a href="{{ product.u|set_ga_tracking(utm_campaign=ga_campaign_code,utm_medium='email',utm_source='targeting') }}" />

For SMS

{{ product.u|set_ga_tracking(utm_campaign=ga_campaign_code,utm_medium='email',utm_source='targeting') }}

The output link might then be formatted as:

For email

<a href="https://www.mysite.com/product/myproduct?utm_campaign=basket_abandon&utm_medium=email&utm_source=targeting" />

For SMS

https://www.mysite.com/product/myproduct?utm_campaign=basket_abandon&utm_medium=email&utm_source=targeting

Loop through lists of data

You might want to loop through a list of items and output each one. For example, when displaying each product from the shopper's signal:

For HTML

{% for product in products %}
<tr><td>{{ product.n }}</td></tr>
{% endfor %}

The above simple example would generate the below for a signal containing three products:

<tr><td>VON ZIPPER FEENOM SNOWBOARD GOGGLES</td></tr>
<tr><td>VOLKL SAVVY WOMEN'S SNOWBOARD 2015</td></tr>
<tr><td>THIRTYTWO WOMEN'S STW BOA SNOWBOARD BOOTS</td></tr>

For SMS

{% for product in products %}
{{ product.n }}
{% endfor %}

The above simple example would generate the below for a signal containing three products:

VON ZIPPER FEENOM SNOWBOARD GOGGLES
VOLKL SAVVY WOMEN'S SNOWBOARD 2015
THIRTYTWO WOMEN'S STW BOA SNOWBOARD BOOTS

Set a default cart URL

For cart abandon triggers, the URL of the cart page seen by the shopper would usually be used as the URL for the main call-to-action button. However, test emails and carts captured on non-cart pages may not have a cart URL, so it is useful to set a fallback. To do this, modify the value in single quotes in the below line:

{% set cart_url = '#' %}

For example, to change the default to https://www.mysite.com/cart:

{% set cart_url = 'https://www.mysite.com/cart' %}

cart_url would then output the below:

https://www.mysite.com/cart/?utm_campaign=my-value-here&utm_medium=email&utm_source=targeting

If you use cart_url in an HTML layout, you must wrap it in an anchor tag.

Change the maximum number of products to show

The number of products which can display in a cart layout is limited by default. To change this, modify the number as below, depending on the trigger type.

Cart abandon:

{% if trigger.contact_type == 'b' %}
...
{% set max_products_to_show = 10 %}

Browse abandon:

{% elif trigger.contact_type == 'ba' %}
...
{% set max_products_to_show = 5 %}

Other trigger types:

{% else %}
...
{% set max_products_to_show = 50 %}

For example, to increase the maximum number of products displayed in a cart layout for a browse abandon trigger from 5 to 10:

{% elif trigger.contact_type == 'ba' %}
...
{% set max_products_to_show = 10 %}

The max_products_to_show variable then needs to be referenced in the limit function which should be applied to the product loop:

{% for product in products|limit(max_products_to_show) %}

Change the headline text

The cart layout templates typically display headline text above the list of products, which by default is Items in your shopping basket.

To change this, modify the headline variable:

{% if trigger.contact_type == 'b' %}
...
{% set headline = 'Items in your shopping basket' %}
{% elif trigger.contact_type == 'ba' %}
...
{% set headline = 'Items you have browsed' %}
{% else %}
...
{% set headline = '' %}

For example, to change the headline text displayed for a browse abandon message to Your browsed products:

{% elif trigger.contact_type == 'ba' %}
...
{% set headline = 'Your browsed products' %}

Change Google Analytics tracking codes

By default, a cart layout appends Google Analytics tracking codes to each link using the set_ga_tracking function:

{% set ga_campaign_code = 'fr-cart-1' %}
{{ cart_url|set_ga_tracking(utm_campaign=ga_campaign_code, utm_medium='email', utm_source='fr') }}

The resulting link might then look like:

https://www.mysite.com/basket/?utm_campaign=fr-cart-1&utm_medium=email&utm_source=fr

This must be wrapped in an anchor tag if used in HTML.

These tracking codes are used by both Fresh Relevance on the Campaign reports page as well as the usual reports available in Google Analytics.

Within a cart layout, the utm_campaign parameter can be dynamically changed according to the trigger type and stage by modifying the appropriate ga_campaign_code variable at the top of the layout:

{% if trigger.contact_type == 'b' %}{# Cart Abandon Trigger #}
  {% if trigger.active_action_index == 1 %}{# Stage 1 #}
    {% set ga_campaign_code = 'fr-cart-1' %}
  {% elif trigger.active_action_index == 3 %}{# Stage 2 #}
    {% set ga_campaign_code = 'fr-cart-2' %}
  {% elif trigger.active_action_index == 5 %}{# Stage 3 #}
    {% set ga_campaign_code = 'fr-cart-3' %}
  {% endif %}
{% elif trigger.contact_type == 'ba' %}{# Browse Abandon Trigger #}
  {% if trigger.active_action_index == 1 %}{# Stage 1 #}
    {% set ga_campaign_code = 'fr-browse-1' %}
  {% elif trigger.active_action_index == 3 %}{# Stage 2 #}
    {% set ga_campaign_code = 'fr-browse-2' %}
  {% elif trigger.active_action_index == 5 %}{# Stage 3 %}
    {% set ga_campaign_code = 'fr-browse-3' %}
  {% endif %}
...

For example, to modify the campaign code for stage two of a Browse Abandon Trigger, change:

{% set ga_campaign_code = 'fr-browse-2' %}

to:

{% set ga_campaign_code = 'my-value-here' %}

The resulting link might then look like:

https://www.mysite.com/product/myproduct?utm_campaign=my-value-here&utm_medium=email&utm_source=targeting

This must be wrapped in an anchor tag if used in HTML.

Additional functionality

Learn about other available link tracking functions in Cart and SmartBlock layout functions.

Other available link tracking options include:

get_ga_tracking which ensures GA tracking parameters are forcibly appended to the very end of an existing URL query string.
set_query_parameters which allows you to set other non-GA URL parameters and values.

Example cart layouts

HTML example cart layout showing all products from the shopping cart

An example cart layout which displays products from the shopper's signal and hides the cart total for browse abandon messages:

 <table>
        {% if trigger.contact_type != 'ba' %}
            {% set max_products_to_show = 50  %}{# Cart abandon #}
        {% else %}
            {% set max_products_to_show = 10 %}{# Browse abandon #}
        {%  endif %}
        {% set ga_campaign_code='tms-cart-1' %}
        {% for product in products %}
            <tr>
            <td>
            <a href='{{ product.u  | set_ga_tracking( utm_campaign=ga_campaign_code , utm_medium='email' , utm_source='tms' ) }}'
             style=text-decoration: none; color: #444;>
              {{ product.n }}<!--Product Name--></td>
            </a>
            <td>{{ product.img }}<!--Product Image--></td>
            <td>{{ product.up|format_currency('£') }}<!--Product unit Price --></td>
            </tr>
        {% endfor %}
        {% if trigger.contact_type != 'ba' %}{# Cart abandon #}
            <tr>
            <td></td>
            <td></td>
            <td>{{ cart.cp|format_currency('£') }}<!--Total Cart Price --></td>
            </tr>
        {% endif %}
        </table>

SMS example cart layout showing all products from the shopping cart

An example cart layout which displays products from the shopper's signal:

By default, only one product is shown for cart abandon messages and 2 for other types of triggers. Both these defaults can be easily changed by altering the value for set max_products_to_show =.

{# Template for SMS. First part is setting variables used in layout such as headline and analytics #}
{# For standard usage, ignore everyhing down to &quot;Now the actual message&quot; #}
{%- if trigger.contact_type == 'b' %}
        {%- if trigger.active_action_index == 1 %}
                {%- set ga_campaign_code = 'fr-sms-cart-1' %}
        {%- elif trigger.active_action_index == 3 %}
                {%- set ga_campaign_code = 'fr-sms-cart-2' %}
        {%- elif trigger.active_action_index == 5 %}
                {%- set ga_campaign_code = 'fr-sms-cart-3' %}
        {%- endif %}
        {%- set headline = 'Items in your shopping basket' %}
        {%- if cart.u %}
                {%- set cart_url = cart.u %}
        {%- else %}
                {%- set cart_url = '#' %} {# Add your default cart URL in here #}
        {%- endif %}
        {%- set max_products_to_show = 1 %}
{%- elif trigger.contact_type == 'ba' %}
        {%- if trigger.active_action_index == 1 %}
                {%- set ga_campaign_code = 'fr-sms-browse-1' %}
        {%- elif trigger.active_action_index == 3 %}
                {%- set ga_campaign_code = 'fr-sms-browse-2' %}
        {%- elif trigger.active_action_index == 5 %}
                {%- set ga_campaign_code = 'fr-sms-browse-3' %}
        {%- endif %}
        {%- set headline = 'Items you have browsed' %}
        {%- set max_products_to_show = 2 %}
{%- else %}
        {%- set headline = '' %}
        {%- set max_products_to_show = 2 %}
{%- endif %}
{# Now the actual message, which needs to be kept short for SMS and related mediums #}
{%- if products and products|length > 0 %}
Did you forget about these?
{%- for product in products|limit(max_products_to_show) %}
{{ product.n }}
{{ product.u }}
{%- endfor %}
{%- else %}
Thank you for your visit to our store.
{%- endif %}

An introduction to cart layouts

Cart and SmartBlock layout merges

Cart and SmartBlock layout functions

Create a cart layout with multiple rows and columns

Add a remaining items message to a cart layout email