Passport Step by Step

Content insertion

Leverage custom contact data

You can personalize the name for the recipient using the contact data.

Hello {{data:firstname:”customer”}}

Insert an image

You can insert an image, providing only the public image URL. For example:

<img src={{var:url}} alt="some_text" style="width:width;height:height;">

Include logic

Using the Passport integrated tool

Passport is offering you a functionality, which generates simple conditional statement for you for specific section. It allows you to show/hide a section, based on the result of the condition. In order to add the condition, hover your mouse on the section and click on the add condition button.

img/passport-condition-new.png

A menu will pop up, prompting you to define the condition.

img/passport-condition-new-setup.png

This section will be displayed only if the contact data client is set to true, which means that this address has already been registered in the system. If not, the section will be skipped.

Adding logic as a text

In order to include more advanced conditional statements, which should not necessarily apply for the whole section, but to part of the content (could be part of the section or multiple sections), you can insert the condition directly as a text. For example, you can add the following condition:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{% if var:step == "confirmorder" %}
    Confirmation of purchase: {{ var:productname:"" }} 
{% elseif var:step == "unavailable" %} 
    Sorry, {{ var:productname:""}} is out of stock :( 
        If you would like a refund, please
        <a href = "http://mailjet.com/">contact us</a>. 
{% elseif var:step == "refund" %}
    Refund of your purchase {{ var:productname:"" }} 
        has been issued. The amount of {{var:totalprice}} 
    will be returned to your credit card within 10 business days. 
{% endif %}

It will look like this:

img/if.png

Inserting Template block

The Template block is a functionality of the editing tool, allowing you to insert template language inside it. It can be either a conditional statement or a loop.

insert-templ-lang.png

In order to add template language inside the block, you double click on it and enter the code on the left hand side of the builder.

img/inside_if.png

Use case

Now that we are aware of the possibilities Mailjet's template language offers, we can put them all together.

This guide will show you how to quickly be up and running with your first transactional template. This guide leverages Mailjet's responsive mail builder (Passport) which helps you design your emails easily.

At the end of this guide you will have a flexible e-commerce template, which will cover different types of actions - order confirmation (including list of purchased products), out of stock notice, refund request, unavailable product notification.

OK, let's go!

  • First, go to the Gallery for transactional templates and pick one. For our demonstration, we chose the one called "Receipt".
  • Configure Subject, Email Address and Name of the Sender
  • Design the template

In this section, we can actually start designing our own template. You can use the template language to insert text, images or advanced logic.

Of course, we would like our email to vary, depending on the the purpose of the message. We can achieve this by leveraging the conditional statements. If the email is order confirmation or refund, we would like to display additional section with the products and their description. We can insertTemplate language block with the following code:

{% if var:step == "refund" or var:step == "confirmorder" %}

img/inside_if.png

But your clients can order N products, how to handle this? Well, let’s use loop structure for that! You can iterate on all the purchased products in order to display them in the template using smart loops.

  {% for purchase in var:products %}

To display the goods nicely, we can add 1 split section, where we will have an image on the left side and some product information on the right side:

    <ul>PRODUCT TYPE:</ul><li>{{purchase.name}}</li>
    <ul>PRODUCT DESCRIPTION:</ul>{{purchase.description}}
We should close the loop afterwards in order to proceed further. You can add Template language block with {% endfor %} .

In order to display price details per product, we could make a table with 4 columns in our responsive template builder with column names - Name, Number, Price, Total. You will print the values nested in the product variable in the respective column.

img/productlist.png

If we extract the loop from the template, it will look like this:

1
2
3
4
5
6
 {% for purchase in var:products %}
    {{purchase.name}}
    {{purchase.number}}
    {{purchase.price}}
    {{purchase.totalprice}}
 {% endfor %}

As we need this section only if the email is related to order confirmation or refund, we have opened a condition. Don't forget that we need to close it. For better visibility, you can add {% endif %} in separate Template block.

When confirming order, we need to show the customer additional details about the order. We can add another table and print inside the information about the order, stored in the variable order.

1
2
3
4
5
{% if var:step == "confirmorder" %}
  {{var:totalprice:"Default value"}}
  {{var:order_date:"Default value"}}
  {{var:order_id:"Default value"}}
{% endif %}

img/orderdetails.png

You can find the full version in the Demos section.

Final results

And here is what our final results will look like!

Order confirmation template

# API call to send order confirmation
"Vars":
{
"products":[
        {"name":"T-shirt",
        "number":2,
        "price":"$20.00",
        "totalprice":"$40.00",
        "link":"https://s-media-cache-ak0.pinimg.com/736x/25/cf/c1/25cfc1d2d5239d2c37eebdd354d9a285.jpg",
        "description":"<li>Funny T-shirt for coders<\/li> <li>100% cotton<\/li> <li>Machine washable</li>"
        },
        {
        "name":"T-shirt",
        "number":1,
        "price":"$20.00",
        "totalprice":"$20.00",
        "link":"http://rlv.zcache.com/keep_calm_and_code_on_t_shirt_programming_nerd-r7592d3683abe4438863f9192f03bd467_804gy_512.jpg",
        "description":" <li>  Standard fit</li> <li> Fits true to size</li> <li> 5.4 oz. 100% cotton</li> <li>   1x1 rib knit collar and shoulder-to-shoulder taping</li> <li>  Double-needle hem</li>   <li> Imported</li> <li>Machine wash cold</li>"
        }
            ],
"vat":"$12.00",
"totalprice":"$72.00",
"firstname":"Mr. Awesome",
"step":"unavailable",
"order_date":"10-01-2016",
"order_id":"423482",
"productname":"T-shirt"
}
The API call above will result in the following message, delivered to the recipient as order confirmation:

img/full.png

Out of stock template

# API call for out of stock item

"Vars":
{
"products":[
        {"name":"T-shirt",
        "number":2,
        "price":"$20.00",
        "totalprice":"$40.00",
        "link":"https://s-media-cache-ak0.pinimg.com/736x/25/cf/c1/25cfc1d2d5239d2c37eebdd354d9a285.jpg",
        "description":"<li>Funny T-shirt for coders<\/li> <li>100% cotton<\/li> <li>Machine washable</li>"
        },
        {
        "name":"T-shirt",
        "number":1,
        "price":"$20.00",
        "totalprice":"$20.00",
        "link":"http://rlv.zcache.com/keep_calm_and_code_on_t_shirt_programming_nerd-r7592d3683abe4438863f9192f03bd467_804gy_512.jpg",
        "description":" <li>  Standard fit</li> <li> Fits true to size</li> <li> 5.4 oz. 100% cotton</li> <li>   1x1 rib knit collar and shoulder-to-shoulder taping</li> <li>  Double-needle hem</li>   <li> Imported</li> <li>Machine wash cold</li>"
        }
            ],
"vat":"$12.00",
"totalprice":"$72.00",
"firstname":"Mr. Awesome",
"step":"unavailable",
"order_date":"10-01-2016",
"order_id":"423482",
"productname":"T-shirt"
}
The API call above will result in the following message, delivered to the recipient as a notification for unavailable product.

img/unavailable.png

Refund template

# API call to send refund request

"Vars":
{
"products":[
        {"name":"T-shirt",
        "number":2,
        "price":"$20.00",
        "totalprice":"$40.00",
        "link":"https://s-media-cache-ak0.pinimg.com/736x/25/cf/c1/25cfc1d2d5239d2c37eebdd354d9a285.jpg",
        "description":"<li>Funny T-shirt for coders<\/li> <li>100% cotton<\/li> <li>Machine washable</li>"
        },
        {
        "name":"T-shirt",
        "number":1,
        "price":"$20.00",
        "totalprice":"$20.00",
        "link":"http://rlv.zcache.com/keep_calm_and_code_on_t_shirt_programming_nerd-r7592d3683abe4438863f9192f03bd467_804gy_512.jpg",
        "description":" <li>  Standard fit</li> <li> Fits true to size</li> <li> 5.4 oz. 100% cotton</li> <li>   1x1 rib knit collar and shoulder-to-shoulder taping</li> <li>  Double-needle hem</li>   <li> Imported</li> <li>Machine wash cold</li>"
        }
            ],
"vat":"$12.00",
"totalprice":"$72.00",
"firstname":"Mr. Awesome",
"step":"refund",
"order_date":"10-01-2016",
"order_id":"423482",
"productname":"T-shirt"
}
The API call above will result in the following message, delivered to the recipient as refund information.

img/refund.png