We’re going to start by building up a JSON file which will hold that data for the Handlebars expression, some basics that you would want in the email is the sender’s details and a logo for the company/project the email is coming from, so we’ll make an object with the key of sender and set the email, first and last name as well a providing a link for the logo. Them there are a couple of other files in the root of the project which can be ignored for now. Inside the input folder we have two more folders json and scss. So next time you need to change the template don’t worry, its going to be really quick and easy.įirst let’s look at the folder structure for this project is very simple, there are three folders in the root of the project input, output and preview. In the following project you will see how we can use Gulp to compile SCSS to inline styling in the template and how Handlebars can be compiled so the coder can preview the email as the recipient would view the email. Using Gulp you can create different tasks that run independently or chained together, and even setup different tasks depending on parameters sent to gulp on initialisation. These perform specific actions such as LiveReload, compiling SCSS to CSS, processing Handlebars.js, minifying javascript, and so on. There are many plugins that can be included in the project using the Node Pluging Manager (NPM). Mandrill allows custom templates to be created with dynamic content, it also has some basic analytics which can provide some useful insights into bounce rates, open rate, etc. The main features of Mandrill are that emails can be sent to Mandrill via PHP or JavaScript, this allows a lot of flexibility when creating web apps. Mandrill is a transactional email API, it is currently running over the MailChimp platform and in many respects the two platforms are very similar. Although what makes Handlebars really cool is that it allows some logic to placed into the template, this means you can keep your template neat and minimal. This is great because it allows the coder to make templates that have dynamic content. Handelbars.js is a minimal logic templating language, it allows the coder to use placeholders in a HTML template, that when compiled will be replaced by JSON data and rendered to the end user as regular HTML. It works with preprocessors too.Lets start with an introduction to Gulp, Handlebars.js and Mandrill, although we’ll keep it short as there are plenty of other great resources on the web that can run you through the basics, or you can just skip down to ‘Project Setup & Code’. If you prefer to compile your templates programmatically instead of using the MJML app, you can use the MJML NPM package. If you want to use a non-JavaScript engine like Ruby ERB templates or ASP.NET Razor templates, try using Node’s exec to shell out to them. We used Handlebars, but there’s no reason Liquid or other templating tools won’t work. And your Handlebars loops and conditional statements need to go inside HTML comments unless they’re in an element: ( ). The app doesn’t update the preview until you type something. Now your output will show exactly what went wrong. For instance SendGrid’s dynamic templates use a version of the Handlebars templating engine. We achieve this by using templating tools that replace template tags with variables. Often our emails will need to include dynamic content like “Hello Dave” or “today you saved $7.34”. But most of our team uses the MJML desktop app. MJML can be compiled using command line tools or JavaScript library integrations. The MJML markup language automates much of this away. If you’ve ever tried to write an HTML email by hand, you’ll know that every email client has its quirks and limitations. At thoughtbot we use MJML to build emails.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |