EmailPlugin

EmailPlugin

The EmailPlugin creates and sends transactional emails based on Vendure events. It uses an MJML-based email generator to generate the email body and Nodemailer to send the emais.

Installation

yarn add @vendure/email-plugin

or

npm install @vendure/email-plugin

Example

import { EmailPlugin } from '@vendure/email-plugin';
 * const config: VendureConfig = {
  // Add an instance of the plugin to the plugins array
  plugins: [
    new EmailPlugin({
      templatePath: path.join(__dirname, 'vendure/email/templates'),
      transport: {
        type: 'smtp',
        host: 'smtp.example.com',
        port: 587,
        auth: {
          user: 'username',
          pass: 'password',
        }
      },
    }),
  ],
};

Email templates

In the example above, the plugin has been configured to look in <app-root>/vendure/email/templates for the email template files. If you used @vendure/create to create your application, the templates will have been copied to that location during setup.

If you are installing the EmailPlugin separately, then you’ll need to copy the templates manually from node_modules/@vendure/email-plugin/templates to a location of your choice, and then point the templatePath config property at that directory.

Customizing templates

Emails are generated from templates which use MJML syntax. MJML is an open-source HTML-like markup language which makes the task of creating responsive email markup simple. By default, the templates are installed to <project root>/vendure/email/templates and can be freely edited.

Dynamic data such as the recipient’s name or order items are specified using Handlebars syntax:

<p>Dear {{ order.customer.firstName }} {{ order.customer.lastName }},</p>
 * <p>Thank you for your order!</p>
 * <mj-table cellpadding="6px">
  {{#each order.lines }}
    <tr class="order-row">
      <td>{{ quantity }} x {{ productVariant.name }}</td>
      <td>{{ productVariant.quantity }}</td>
      <td>{{ formatMoney totalPrice }}</td>
    </tr>
  {{/each}}
</mj-table>

Handlebars helpers

The following helper functions are available for use in email templates: formatMoney: Formats an amount of money (which are always stored as integers in Vendure) as a decimal, e.g. 123 => 1.23 * formatDate: Formats a Date value with the dateformat package.

Dev mode

For development, the transport option can be replaced by devMode: true. Doing so configures Vendure to use the file transport and outputs emails as rendered HTML files in a directory named “test-emails” which is located adjacent to the directory configured in the templatePath.

new EmailPlugin({
  templatePath: path.join(__dirname, 'vendure/email/templates'),
  devMode: true,
})

Signature

class EmailPlugin implements VendurePlugin {
  constructor(options: EmailPluginOptions | EmailPluginDevModeOptions)
  onBootstrap(inject: <T>(type: Type<T>) => T) => Promise<void>;
  setupEventSubscribers() => ;
}

Members

constructor

method
type:
(options: EmailPluginOptions | EmailPluginDevModeOptions) => EmailPlugin

onBootstrap

method
type:
(inject: <T>(type: Type<T>) => T) => Promise<void>

setupEventSubscribers

method
type:
() =>

Contents:

alpha