## Creating an Email Receipt: Nested Loops with Substitution Data

The SparkPost [template language](https://developers.sparkpost.com/api/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](https://www.sparkpost.com/blog/stored-templates-gets-complete-new-refresh/), 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](https://github.com/darrensmith223/Email_Receipt/blob/main/Receipt-Template).  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](https://developers.sparkpost.com/api/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](https://github.com/darrensmith223/Email_Receipt/blob/main/updated-receipt-template.html).

## **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](https://app.sparkpost.com/templates) 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](https://github.com/darrensmith223/Email_Receipt/blob/main/substitution_data).  Lastly, we click “Send a Test” for the message to be delivered to our inbox.

Alternatively, we can use the [Transmissions API](https://developers.sparkpost.com/api/transmissions/#transmissions-post-send-a-template) 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](https://github.com/darrensmith223/Email_Receipt/blob/main/Transmission-API-Call).

## **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