Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
## Explenation
A templating system was needed for the app. In order to make it easy to use and also responsive, two libs has been used :
- [Handelbars](https://handlebarsjs.com/)
- [MJML](https://mjml.io/)
Handlebars is used as a semantic template motor. It allow us to split email template in order to reuse some parts (header, footer ...)
Mjml is a lib providing a syntax allowing developpers to easly build responsive templates.
## Usage
### Scaffolding
Mails templates can be found inside `src/notifications`. All reusable parts can be found in `base` folder.
All stylesheet must be include inside `style.hbs`.
### Create your template
Simply create your template file : `template.hbs` inside the notifications folder.
```
<mj-hero background-color="radial-gradient(96.2% 96.2% at 50% 3.8%, #343641 0%, #1B1C22 100%)" padding="17px">
<mj-text align="center" color="white" padding-top="20px" font-size="24px" font-family="Lato" font-weight="normal">
<img style="vertical-align: middle; margin-right: 12px" src="https://ecolyo.com/assets/ecolyo-icon.svg" alt="Ecolyo"/>
{{title}}
</mj-text>
</mj-hero>
```
### How to use it ?
#### Inside a cozy service
1) Import the mjml lib in order to compile the template.
```
import mjml2html from 'mjml'
```
2) Link all the info mandatory to render your email :
```
const template = monthlyReportTemplate({
title: 'Du nouveau dans votre espace Ecolyo !',
})
```
3) Build the email and send it:
```
const mailData = {
mode: 'noreply',
subject: '[Ecolyo] - Votre bilan mensuel',
parts: [
{
type: 'text/html',
body: mjml2html(template).html,
},
],
}
mailService.SendMail(client, mailData)
```
#### Inside the app
It's very similar to service usage, but because we use react, the app rendering is done in the user browser. That's why wy need to change the import for mjml lib into :
```
const mjml2html = require('mjml-browser')
```
### Usefull links
- [Mjml live editor](https://mjml.io/try-it-live/bohYnxKkCq-)