Skip to main content

Edit cart layout with Jinja

Use Jinja in a cart layout to dynamically display content based on the visitor's behavior and preferences.

Updated over 3 weeks ago

Jinja is a templating language for Python, designed to simplify creating dynamic web content. In the context of cart layouts, Jinja allows you to embed logic and data directly into your HTML and CSS, enabling highly personalized and flexible designs.

For example, to make your emails more relevant and engaging, you can show products the visitor has added to their cart but not yet purchased.

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

  • {{ }} - Displays 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 table introduces some of the main types of data 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

You can use Jinja to display data captured from a visitor's activity.

Description

Jinja Code

Output

Display a product name from the visitor's cart

{{ product.n }}

Short sleeve t-shirt

Display cart price for Cart abandon and Purchase complete triggers

{{ cart.cp }}

£59.99

Display visitor-level data

{{ person.fn }}

Sam

Learn more in Cart and SmartBlock layout merges.

Change content using conditions

You can use an if statement 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 visitor Sam had entered their first name on the site, or Hi if not.
​

You can check multiple values 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 visitor Sam had entered their first name on the French language version of the site, or just Salut if not.

Set variables

You can set variables at the top of the cart layout for later use. 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 you can use Jinja code:

{% set ga_campaign_code = 'basket_abandon' %}

Then you can include campaign tracking parameter 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') }}

Format the output link 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 visitor's signal:

For HTML

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

The above example generates 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 example generates 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 visitor 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 that can be displayed 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 - ensures GA tracking parameters are forcibly appended to the very end of an existing URL query string.

  • set_query_parameters - 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 that displays products from the visitor'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 that displays products from the visitor'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 %}

Related Articles
Introduction to cart layouts
Cart and SmartBlock layout merges
Cart and SmartBlock layout functions
Create a cart layout with multiple rows and columns
Change the tracking code for each trigger type/stage
Did this answer your question?