How to edit email templates
- Nikoleta Perry
COURSE DESCRIPTION
In this course you will learn how to edit templates for automatically sent e-mails in Online Ordering application.
You will be able to edit various e-mail templates that Online Ordering application sends to your customers and also you will learn basic concepts of Twig.
As prerequisities to this course, please take a look at our course about “How to work with Online Ordering application”
AUTOMATICALLY SENT E-MAILS IN ONLINE ORDERING
Online Ordering is part of the ALIVE Platform that is responsible for administration of orders made through Online Ordering Form. When your customer orders his/her card through Online Ordering Form and confirms it, the order is automatically sent to Online Ordering application. In Online Ordering application, the order is further processed. During this process, it is great to inform your customer whether his/her card has already been issued and whether everything is OK. To make this workflow more effective, Online Ordering allows you to create automatic e-mails that are sent to your customers.
EMAIL LAYOUT
In Online Ordering, go to Settings->Email layout. In the editable window, you see the HTML and CSS code used for formatting automatically sent emails. You can define different layouts for different languages. If you are not quite familiar with HTML/CSS coding, it is not advisable to edit the code. If you want to try it anyway, do it in your test environment.
TEMPALTE LIST
An email template describes the content of email body – it means it defines the content of the email layout described above. In your Online Ordering, go to Settings->Email templates. In the template windows, you see two types of templates:
templates for card orders
templates for validity extensions
Each table with email templates has three columns:
Type of email – which type of email is available
Status – active/inactive – this information tells you, whether the email template is set up or not
Actions – information about the template/edit mode
If you want to create/edit an email template, click the pencil icon. Always be careful whether you are editing the language you want!
TEMPLATE EDITING
TWIG In Online Ordering, email templates can be edited using a template engine called Twig. Twig is a template engine for the PHP programming language. It’s an open-source product, so feel free to experiment with it. You can find complete documentation on the web.
Variables In the context of email templates, the information of card order can be added to your emails using Twig variables. When for example your customer’s first name is John and surname is Doe, you can personalize the beginning of your email template as follows:
Dear {{ cardOrder.firstName }} {{ cardOrder.lastName }},
we have just received your {{ cardType }} card order with number {{ cardOrder.id }}.
This is how your customer sees it in the email (the variables have been replaced by values from the order, do you see it?)
This way, you can personalize whole body of your email. All variables that are available are stored in the “List of variables“ in the right window in email template edit mode. The variables are divided into three groups:
variables that describe card holder (his/her name, contacts, address, etc.)
variables that describe card (card number, card type, validity, order ID etc.)
other variables, containing information about pamyment and delivery method
Conditions With Twig, you can write conditions using your variables really easily. The syntax of a condition with Twig looks as follows:
{% if (variable == "value") %}Your message
{% elseif (variable == "value") %}Your message
{% elseif (variable == "value") %}Your message
{% endif %}
Using conditions, you can for example specify, which text will be sent to a customer based on chosen Delivery Type. It is one of the most common situations of using conditions in email templates, because your customers have probably the possibility to choose from different delivery types in Online Ordering Form. Look at the code snippet below: Delivery method:
{% if (cardOrder.deliveryType == "PICK_UP") %}
You have selected the personal pick up at ISIC POINT in Prague. We'll contact you once the card is ready for pick up.
{% elseif (cardOrder.deliveryType == "POST_REGISTERED_LETTER") %}You have selected the delivery by post as registered letter. If all documents are in order, your card will be sent to the following address within 2 business days.
Delivery address:
{{ cardOrder.firstName }} {{ cardOrder.lastName }} {% if not (cardOrder.address2 == "") %}
{{ cardOrder.address2 }}{% endif %}
{{ cardOrder.address1 }}
{{ cardOrder.postalCode }} {{ cardOrder.city }}
{{ countryName }}
{% elseif (cardOrder.deliveryType == "SCHOOL") %}
The card will be ready for pick up at your school within a week. We'll contact you with the pick up request.
{% endif %}
Below are some often used variables and their possible values that you can use constructing the conditions:
Variable: {{ cardType }}
values: ISIC, ITIC, IYTC
variable: {{ cardOrder.deliveryType }}
values: PICK_UP, POST_STANDARD_LETTER, POST_REGISTERED_LETTER, COURIER, SCHOOL, EMAIL
variable: {{ cardOrder.paymentMethod }}
values: MOBILPAY, EBS_CASH_CARD, NO_PAYMENT, COMGATE_BANK_TRANSFER, EBS_NET_BANKING, EBS_DEBIT_CARD, EBS_CREDIT_CARD, COMGATE_CARD, DEPOSIT_SLIP, EBS_CREDIT_CARD_EMI, GPWEBPAY, BANK_TRANSFER, INFIPLANET, MONEYBOOKERS, PAYPAL
variable: {{ cardOrder.requestType }}
values: NEW_CARD, NEW_VIRTUAL, ADDITIONAL_CARD
If you want to inform your customers in more detail about how the final price of the order was composed, you can use the following variables:
You can also add the price of additional products with the following example (with “for” cycle):
Images You can add images to your email template. To do so, click the picture icon in the menu. Insert picture’s URL and other parameters such as width/height and target URL. To edit those parameters of an existing image, just click on it with your right mouse button. In the picture below, you can see a window with properties of a “Pay now” button. Look closely to URL, where variable “{{paymentUrl}}” is inserted. This variable redirects the user to the URL where he/she can pay for the order (remember what was written in previous sections!).
Tables Using tables is a good practise how to format for example matrix of pictures or logos. Below you see an example how table layout can be used for formatting images with conditions.
SENDING TEST E-MAIL
If you want to test your new template, you can send test email. To do so, go to Settings->Email templates->Template detail (the information icon). In the detail, click the “Send Test Email” button”. In the window that appears, insert Order Id (it must be ID number of an existing order! – choose one from Card orders). Don’t forget to choose the language of your tested template, and your email address and click the “Send Test Email” button again. In a moment, the test email will be delivered into your email client. This way, you can visually check whether the email template is set up correctly. It is advisable to test your templates before letting them go into production.