For do this you can use the package :
meteorhacks:ssr
https://atmospherejs.com/meteorhacks/ssr
Example :
To call : ( My mail.js file )
Meteor.methods({
sendConfirmationLinkUser: function(userId,email){
var url = Meteor.absoluteUrl() + "confirmation/email/" +userId;
var html = SSR.render('userConfirmationMail', {url:url});
var subject = "Email Confirmation ";
var to = email;
try{
Meteor.call('sendMail',to, subject, html);
}catch(err){
throw Meteor.Error(err.reason);
}
}
});
Tips:
- Here you can pass values and collections for your Template.
var html = SSR.render('userConfirmationMail', {url:url});
In this example I send for there a url attribute, but you can pass N values like :
var html = SSR.render('userConfirmationMail', {url:url, value2:value2, value3:value3});
- When you will use this values you need call this.value2, this.url, etc …
Make the template : ( Javascript File )
userConfirmationMail.js
- Here you can implement the helpers and functions that you will need to build your email.
SSR.compileTemplate("userConfirmationMail", Assets.getText("emailTemplates/userConfirmationMail.html"));
Template.userConfirmationMail.helpers({
getConfirmationURL: function() {
return this.url;
}
});
Tips: :
SSR.compileTemplate("userConfirmationMail", Assets.getText("emailTemplates/userConfirmationMail.html"));
- You will call by this name : userConfirmationMail
- This is the path in your application : “emailTemplates/userConfirmationMail.html”
userConfirmationMail.html ( HTML file)
In this file you need put your html code.
<html lang="pt-Br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if gte mso 9]>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title></title>
</head>
<body style="width: 100% !important;min-width: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100% !important;margin: 0;padding: 0;background-color: #FFFFFF">
<style id="media-query">
/* Media Queries */
@media only screen and (max-width: 500px) {
.prova {
width: 500px; }
table[class="body"] img {
width: 100% !important;
height: auto !important;
{...}
</body></html>
Tips :
- For you call any helper method use : {{getHelperMethodName}}
- The HTML files need be in the private directory in your application.
- All styles need be in this file.
www.Dev4Devs.com 