Creating an Email Receipt: Nested Loops with Substitution Data

The SparkPost template language is incredibly robust and able to support a range of logical operations, from simple variable replacement to if/else statements and array handling.  In this example, we will combine these elements to create a template that can be used for Point of Sale (POS) receipts that can be sent to a consumer via email.

The Premise

For this example, let’s imagine that we are implementing a POS system where the customer has the option of receiving their receipt via email.  The receipt we are creating will reflect a group order, where we will include the table number, each individual order, the contents of each order, and will include a message for each order made by a club member.

Let’s imagine that the group order contains two different orders, which have been described below:

Order 1 (Club Member):

  • Sandwich; $10.00
  • Chips; $2.50
  • Soda; $1.99

Order 2:

  • Pizza Slice; $2.00
  • Soda; $1.99

Creating a Template

The template of our email receipt will be created as a SparkPost Stored Template, so that we can easily modify the HTML and access it later.  We will accept the order details as substitution data and dynamically populate the template using the SparkPost Template Language. 

Creating the Stored Template

Let’s start by creating a simple template that makes it easy to understand how the substitution variables and nested loops are implemented.  The full template HTML can be found here.  We will create a new stored template within our SparkPost account, name it “email-receipt”, assign the subject line “Your Email Receipt Enclosed”, and paste the simple template HTML into the template editor.  

Now let’s analyze the different components of the template and identify what they are doing:

  • Table number is displayed at the top, as a variable replacement

    Table: {{table_number}}

     

  • Each order is iterated through from the array “orders”

    {{each orders}}

     

  • The order number is printed for each order

    <p>Order: {{loop_vars.orders.order_number}}</p>
  • Each item within an order is printed, along with the respective price

    {{each loop_vars.orders.items}}
    <p>Item:  {{loop_vars.items.name}}, Price: {{loop_vars.items.price}}</p>
    {{end}}
  • If the order was made by a club member, a message is printed to thank them

    {{if loop_vars.orders.isMember}}
    <p>Thanks for being a Club Member!</p>
    {{end}}

Incorporating Logical Operations

The template leverages three different logical operators:

  • Variable substitution – table number

    Table: {{table_number}}
  • Nested Array Loop – each individual order is an array, which contains a nested array of the items included in the order.

    {{each orders}}
    {{each loop_vars.orders.items}}

     

  • If/Else Statement – if an order was made by a club member, a message is included which thanks them for being a member.

    {{if loop_vars.orders.isMember}}
    <p>Thanks for being a Club Member!</p>
    {{end}}

Note that the SparkPost Template Language supports two different loop operators: loop_var and loop_vars  (plural).  The difference between these two is that loop_var is an array of variables, whereas loop_vars is an array of arrays.  For nested loops, such as the one incorporated in this example, we use loop_vars because we have multiple variable arrays (multiple orders).

Enhancing the Stored Template

Now that we have the basic functionality of our template in place, we can go ahead and enhance the template a little by adding CSS, formatting the HTML, and creating a table for our order details.  You can find the updated receipt template here.

Previewing Our Receipt

To preview our finished template with the substitution data included, we can either inject the message into SparkPost using the Transmissions API, or we can use the “Send a Test” functionality within the SparkPost Stored Templates to send a test message to ourselves.

First, let’s send ourselves a test message through the “Send a Test” functionality.  To do this we will need to open our stored template within our SparkPost account.  The information related to our orders will be included as substitution data in our stored template.  To add this information, we will need to paste our substitution data into the template by clicking “Test Data” at the top of the template and pasting our substitution data into the “substitution_data” field.  You can find the substitution data that we used for this example here.  Lastly, we click “Send a Test” for the message to be delivered to our inbox.

email receipt

Alternatively, we can use the Transmissions API to send the message through SparkPost.  In our API call, we will need to specify the template_id that we wish to send to our recipients – in this example, our template_id is “email-receipt”.  We will also need to pass our order information by including the same substitution data that we used with the “Send a Test” feature above.  You can view a sample of the completed API call here.

The Final Product

As can be seen in the screenshot below, the email receipt has been received, where the customer can see each of the orders made, the items and respective prices within each order, as well as the table number and a “thank you” message for each club member.

A screenshot of the email receipt received:

Conclusion

I’m clearly not much of a designer, so you may want to modify the template to include different fields and images that better serve your use case.  This post is intended to serve as an introduction to the capabilities of the SparkPost Template Language, and serve as a working example of how nested loops can help you build sophisticated templates to send highly personalized emails with SparkPost Stored Templates.  Hopefully you found this example useful.  Happy sending!

~ Darren