-
8 | {% for product in line %}
9 |
{{product.name}}
{{product.price}}
10 | {% endfor %}
11 |
| {{product.name}} {{product.price}} | |
| {{product.name}} {{product.price}} |
This is a TEST EMAIL!
'; 19 | data['Vars'] = { 20 | title: 'Hello world!' 21 | }; 22 | 23 | s.send(data).then(response => { 24 | expect(response).to.be.an('object'); 25 | expect(response.Sent).to.be.an('array'); 26 | done(); 27 | }, error => { 28 | console.error('error', error); 29 | done(); 30 | }); 31 | }); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /samples/ecommerce_receipt/README.md: -------------------------------------------------------------------------------- 1 | #ECOMMERCE RECEIPT 2 | 3 | This example show how with the loops you can repeat pieces of your template. 4 | Here we display a list of articles purchased and the total of the purchase. 5 | 6 | ## Vars 7 | 8 | ```php 9 | "Vars" => array ( 10 | 'products' => [ 11 | [ 12 | 'name' => 'Minibar', 13 | 'number' => 10, 14 | 'price' => '$5.00', 15 | 'totalprice' => '$50.00' 16 | ], 17 | [ 18 | 'name' => 'Foot massage', 19 | 'number' => 1, 20 | 'price' => '$10.00', 21 | 'totalprice' => '$10.00' 22 | ], 23 | [ 24 | 'name' => 'Dinner', 25 | 'number' => 2, 26 | 'price' => '$50.00', 27 | 'totalprice' => '$100.00' 28 | ], 29 | [ 30 | 'name' => 'Nights', 31 | 'number' => 2, 32 | 'price' => '$150.00', 33 | 'totalprice' => '$300.00' 34 | ] 35 | 36 | ] , 37 | 'vat'=> "$100.00", 38 | 'totalprice'=> "$460.00" 39 | ), 40 | 41 | ``` 42 | 43 | ## Template source 44 | 45 | ```html 46 | {% for article in var:products %} 47 | {{ article.name }} 48 | {{article.number}} 49 | {{article.price}} 50 | {{article.totalprice}} 51 | {% endfor%} 52 | {{var:vat}} 53 | {{var:totalprice}} 54 | ``` 55 | 56 | ## Result 57 | 58 |  59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /samples/products_list/README.md: -------------------------------------------------------------------------------- 1 | #PRODUCT LIST 2 | 3 | This example show how with the loops you can repeat pieces of your template. 4 | 5 | ## Vars 6 | 7 | ``` 8 | "Vars" => array ( 9 | 'products' => [ 10 | [ 11 | [ 12 | 'img' => 'http://191n.mj.am/img/191n/3s/x41.jpg', 13 | 'name' => 'MAVA PULLOVER', 14 | 'price' => '55€' 15 | ],[ 16 | 'img' => 'http://191n.mj.am/img/191n/3s/x4l.jpg', 17 | 'name' => 'NEOS PURPLE SKIRT', 18 | 'price' => '45€' 19 | ],[ 20 | 'img' => 'http://191n.mj.am/img/191n/3s/x4m.jpg', 21 | 'name' => 'JENSEN TOP', 22 | 'price' => '78€' 23 | ] 24 | ], 25 | [ 26 | [ 27 | 'img' => 'http://191n.mj.am/img/191n/3s/x42.jpg', 28 | 'name' => 'LEADY JACKET', 29 | 'price' => '110€' 30 | ], 31 | [ 32 | 'img' => 'http://191n.mj.am/img/191n/3s/x4p.jpg', 33 | 'name' => 'FUNKY PANTS', 34 | 'price' => '73€' 35 | ], 36 | [ 37 | 'img' => 'http://191n.mj.am/img/191n/3s/x43.jpg', 38 | 'name' => 'PINKY DRESS', 39 | 'price' => '60€' 40 | ] 41 | ] 42 | ] 43 | ), 44 | ``` 45 | 46 | ## Template source 47 | 48 | ```html 49 | {% for line in var:products %} 50 |9 | 10 | {{var:author}} 11 | {% if var:comment!="" and var:answer=="" %} commented on {% elseif var:comment!="" %} commented an answer on {% elseif var:answer!="" %} answered {% else %} asked {% endif %} 12 | {{var:question}}: 13 | 14 |
15 | {% if var:comment=="" and var:answer!="" %} 16 |Answer:
17 |Answer:
30 |Question ({{var:view}} views):
36 | 37 |
28 |
29 | Ready to start? Jump on our tutorials:
30 | * How to create an e-receipt email template
31 | * How to create a welcome email template
32 | * How to create an abandoned cart email template
33 | * How to create a personalized digest email template
34 |
--------------------------------------------------------------------------------
/tutorials/email_sender/v0.1/README.md:
--------------------------------------------------------------------------------
1 | # Mailjet templating language console tool
2 |
3 | This email sender tool is to be used in your console.
4 |
5 | It has been built to help you test Mailjet's templating language and MJML.
6 |
7 | ## Prerequisites
8 |
9 | First of all, you will need [Node.js](https://nodejs.org/en/download/) (this tool has been tested for versions >= v7.2.1).
10 |
11 | You should have also a [Mailjet](https://www.mailjet.com/) account and a [valid API key](https://app.mailjet.com/support/what-are-the-api-key-and-secret-keys-how-should-i-use-them,109.htm). If you're not a client yet, you can [subscribe for a free account](https://app.mailjet.com/signup) (and send immediately up to 6000 free emails a month!). __Warning:__ don't use a disposable email address (gmail, yahoo, etc included), as you'll be likely to be blocked by our anti-spammer policy.
12 |
13 | Finally, you'll need an access to the [MJML API](https://mjml.io/api), actually in [open beta](https://mjml.io/api).
14 |
15 | ## Installation
16 |
17 | Download this tool directly or clone the parent directory.
18 |
19 | To install dependencies, run: `npm install`
20 |
21 | ## Configuration
22 |
23 | This tool uses two sets of API keys (_Send API_ and _MJML API_). You must provide the tool with a `.credentials` file, that contains the following environment variables:
24 |
25 | ```sh
26 | MAILJET_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
27 | MAILJET_API_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
28 | MJML_APPLICATION_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
29 | MJML_SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
30 | ```
31 |
32 | ## About your templates
33 |
34 | A template is composed of two files, one for MJML, and the other to declare templating language's variables data.
35 |
36 | These files must be created in a specific directory, matching the following pattern: `./templates/template-name`.
37 |
38 | Your MJML file must be named `index.mjml`.
39 |
40 | Your JSON variables file must be named `variables.json`.
41 |
42 | ## Run the tool
43 |
44 | To run the tool, you can use the `start` script, with your template name as the single argument. For instance: `npm start template-name`
45 |
46 | ## Testing
47 |
48 | If you want to modify this tool, we've provided you with a very succinct test suite (using [chai](chaijs.com) and [mocha](mochajs.org)). Feel free to improve it or write your own.
49 |
50 | To run it, simply hit: `npm run test`
51 |
52 | ## Any questions?
53 |
54 | Contact us via [api@mailjet.com](mailto://api@mailjet.com) or ping us on [Twitter](https://twitter.com/mailjetdev). We'll be glad to answer you and listen to your feedback.
55 |
56 | ## License
57 |
58 | MIT License
59 |
60 | Copyright (c) 2017 Mailjet
61 |
62 | Permission is hereby granted, free of charge, to any person obtaining a copy
63 | of this software and associated documentation files (the "Software"), to deal
64 | in the Software without restriction, including without limitation the rights
65 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
66 | copies of the Software, and to permit persons to whom the Software is
67 | furnished to do so, subject to the following conditions:
68 |
69 | The above copyright notice and this permission notice shall be included in all
70 | copies or substantial portions of the Software.
71 |
72 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
73 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
74 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
75 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
76 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
77 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
78 | SOFTWARE.
79 |
--------------------------------------------------------------------------------
/samples/ecommerce/test.php:
--------------------------------------------------------------------------------
1 | "POST",
15 | "FromEmail" => $sender,
16 | "FromName" => "Mailjet Pilot",
17 | "Subject" => '{{ var:firstname }}, {% if var:step == "confirmorder" %}Confirmation of purchase: {{ var:productname:"" }}{% elseif var:step == "confirmshipping" %}Your {{ var:productname:"" }} is coming your way{% elseif var:step == "unavailable" %}Your purchase is unavailable: {{ var:productname:"" }}{% elseif var:step == "refund" %}Refund of your purchase {{ var:productname:"" }}{% elseif var:step == "feedback" %}Please give us some feedback about your {{ var:productname:"" }}{% endif %}',
18 | "Html-part" => $html_part,
19 | "MJ-TemplateLanguage" => true,
20 | "Vars" => array (
21 | "firstname" => "",
22 | "step" => "",
23 | "badge" => "",
24 | "level" => 0,
25 | "messagecontent" => ""
26 | ),
27 | "Recipients" => array(
28 | array(
29 | "Email" => $recipients[0],
30 | "Vars" => array(
31 | "firstname" => "Emmanuel1",
32 | "step" => "confirmorder",
33 | "productname" => "Camera",
34 | "productdescription" => "Description",
35 | "productimg" => "https://raw.githubusercontent.com/eboisgon/mailjet-template-api-samples/master/ecommerce/img/photo1.jpg",
36 | "order_id" => "1111111",
37 | "delivery" => "2 EUR",
38 | "total_price" => "30 EUR"
39 | )
40 | ),
41 | array(
42 | "Email" => $recipients[1],
43 | "Vars" => array(
44 | "firstname" => "Emmanuel2",
45 | "step" => "confirmshipping",
46 | "productname" => "Shoes",
47 | "productdescription" => "Description",
48 | "productimg" => "https://raw.githubusercontent.com/eboisgon/mailjet-template-api-samples/master/ecommerce/img/photo2.jpg",
49 | "deliverytrackurl" => "#",
50 | "delivery" => "UPS",
51 | )
52 | ),
53 | array(
54 | "Email" => $recipients[2],
55 | "Vars" => array(
56 | "firstname" => "Emmanuel3",
57 | "step" => "unavailable",
58 | "reasonunavailable" => "Restocking",
59 | "productname" => "rubik's cube",
60 | "productdescription" => "Description",
61 | "productimg" => "https://raw.githubusercontent.com/eboisgon/mailjet-template-api-samples/master/ecommerce/img/photo3.jpg",
62 | )
63 | ),
64 | array(
65 | "Email" => $recipients[3],
66 | "Vars" => array(
67 | "firstname" => "Emmanuel4",
68 | "step" => "refund",
69 | "productname" => "Camera",
70 | "productdescription" => "Description",
71 | "productimg" => "https://raw.githubusercontent.com/eboisgon/mailjet-template-api-samples/master/ecommerce/img/photo1.jpg",
72 | "order_id" => "1111111",
73 | "delivery" => "2 EUR",
74 | "total_price" => "30 EUR"
75 | )
76 | ),
77 | array(
78 | "Email" => $recipients[4],
79 | "Vars" => array(
80 | "firstname" => "Emmanuel5",
81 | "step" => "feedback",
82 | "productname" => "Shoes",
83 | "productdescription" => "Description",
84 | "productimg" => "https://raw.githubusercontent.com/eboisgon/mailjet-template-api-samples/master/ecommerce/img/photo2.jpg",
85 | )
86 | )
87 |
88 | )
89 | );
90 |
91 | $response = $mj->post(Resources::$Email, ['body' => $params]);
92 |
93 | var_dump($response->request->getUrl());
94 |
95 | var_dump($response->request->getFilters());
96 |
97 | var_dump($response->request->getBody());
98 |
99 | $response->success() && var_dump($response->getData());
100 |
101 | ?>
102 |
103 |
--------------------------------------------------------------------------------
/tutorials/digest/index.mjml:
--------------------------------------------------------------------------------
1 |
112 | Classy products
113 | for men in tune
114 | with the times
115 |
122 | Our new catalog
123 | with 1000+
124 | products and refs
125 |
132 | A trend that
133 | will never be
134 | outdated
135 |
119 | Classy products
120 | for men in tune
121 | with the times
122 |
129 | Our new catalog
130 | with 1000+
131 | products and refs
132 |
139 | A trend that
140 | will never be
141 | outdated
142 |
54 |
55 | Enough theory, it's time to write some code.
56 |
57 | 
70 |
71 | MJML provides us with an interactive component, [`
160 |
161 | 
174 |
175 | Mailjet's templating language comes to the rescue with [conditional statements](https://dev.mailjet.com/template-language/reference/#conditional-statements) and [built-in functions](http://dev.mailjet.com/template-language/reference/?utm_source=referrer&utm_medium=github&utm_campaign=tpl_lang_tutorial#transactional-templating#functions). The `HasOpenedSince(number_of_days)` function especially comes in handy for our matter. If the user hasn't opened any marketing campaign for the last 30 days, the piece of code contained between `{% if ... %}` and `{% endif %}` will be displayed. A good chance to trigger more sells, while the aficionados won't feel being spammed. Isn't it a win-win situation? 😎
176 |
177 | ```XML
178 |
179 |
54 |
55 | Enough theory, it's time to write some code.
56 |
57 | 
70 |
71 | As you may notice in the code below, the main container is not a `|
243 | |
251 |
252 | {{ item.title }} 253 | Color: {{ item.color }} 254 | Size: {{ item.size }} 255 | Price: {{ item.price.currency }}{{ item.price.amount }} 256 | |
257 |
| `, ` | `, etc.) wrapped in a [` 266 | 267 | 270 | 271 | 🔝 272 | 273 | 274 | 275 | #### How much is it? 276 | 277 | Here again, we use a [` SUBTOTAL: | {{ var:order.subtotal.currency }}{{ var:order.subtotal.amount }} | 289 | 290 | #### Click, click, click. 291 | 292 | Last but not list, we display our two CTAs using two [` 307 | 308 | 🔝 309 | 310 | 311 | 312 | ### You will love that 313 | 314 | We've already covered that part in our previous tutorials. Want to discover how to implement this section? Go [this way](../receipt/#i-bet-you-want-to-buy-more-things). 315 | 316 | 317 | ### The social network 318 | 319 | We've already covered that part in our previous tutorials. Want to discover how to implement this section? Go [this way](../welcome/#the-social-network). 320 | 321 | 322 | ## Conclusion 323 | 324 | Here we are! Now, thanks to your very cool and practical abandoned cart email, no cart on your website will be left in despair, longing forever for their customer to come back. Thank you for them! 325 | 326 | We'd love to have your feedback about this first tutorial, so ping us on [Twitter](https://twitter.com/mailjetdev) or come and chat on the [MJML slack channel](https://slack.mjml.io/?utm_source=referrer&utm_medium=github&utm_campaign=tpl_lang_tutorial)! 327 | 328 | You want to be informed about other tutorials and nice tech articles? Subscribe to our [dev only newsletter](https://dev.mailjet.com/community/?utm_source=referrer&utm_medium=github&utm_campaign=tpl_lang_tutorial#newsletter) to stay tuned! 329 | 330 | 331 | 332 | 🔝 333 | -------------------------------------------------------------------------------- |
|---|
115 |
116 | Mailjet templating language enables you to set and use [variables](http://dev.mailjet.com/template-language/reference/?utm_source=referrer&utm_medium=github&utm_campaign=tpl_lang_tutorial#transactional-templating#variables) to personalize your template with custom data.
117 |
118 | Here, you're interested in the `user.name` and `user.gender` properties, whose value are `Matthew` and `male` for this example respectively.
119 |
120 | Let's set a custom `background-url` variable whose value is the hero image URL. By default, we set this value to the `hero-girl.png` URL, but if the `user.gender` value is `male`, then we set this value to `hero.png` URL.
121 |
122 | 
177 |
178 | In the `variables.json` file, you'll find this list of categories:
179 |
180 | ```JSON
181 | "categories": {
182 | "top_left": {
183 | "title": "Shoes",
184 | "link": "/shoes",
185 | "image_URL": "http://bit.ly/mj-tpl-tuto-shoes"
186 | },
187 | "top_right": {
188 | "title": "Jumper",
189 | "link": "/t-shirt",
190 | "image_URL": "http://bit.ly/mj-tpl-lang-tuto-tshirt"
191 | },
192 | "bottom_left": {
193 | "title": "Shirt",
194 | "link": "/shirt",
195 | "image_URL": "http://bit.ly/mj-tpl-lang-tuto-shirt"
196 | },
197 | "bottom_right": {
198 | "title": "Accessories",
199 | "link": "/accessories",
200 | "image_URL": "http://bit.ly/mj-tpl-lang-tuto-accessories"
201 | }
202 | }
203 | ```
204 |
205 | This data has been generated only for `Matthew`. Using our [templating language variables](http://dev.mailjet.com/template-language/reference/?utm_source=referrer&utm_medium=github&utm_campaign=tpl_lang_tutorial#variables), we can build a 2 x 2 `
241 |
242 | Today, displaying a list of social networks links with their respective icons is so common that you may feel reinventing the wheel coding always the feature with a bunch of inextricable `
78 |
79 | As you may notice in the code below, the main container is not a `
131 |
132 | #### You're my hero!
133 |
134 | First, as for our [welcome email template](../welcome), we have to implement a hero, i.e. an image (often inspirational) with some catchy text on it. If MJML provides us with an interactive component to do this job, the specific design forces us to use our imagination here.
135 |
136 | As you can see, we're using two nested [`