Vendure - Overwriting email templates

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system.

We'll be looking at two different layers of customization for customizing these emails.

1. Globals
2. New email flows

Changing email globals

We'll first have to add the email plugin, which we'll use to modify things.

npm install @vendure/email-plugin

Now we can open our vendure-config.ts file and load the plugin.

export const config: VendureConfig = {
  plugins: [
    EmailPlugin.init({
      handlers: defaultEmailHandlers,
      templatePath: path.join(__dirname, '../static/email/templates'),
      globalTemplateVars: {
        fromAddress: '"example" <noreply@example.com`>',
      },
      transport: {
        type: 'smtp',
        host: 'smtp.example.com',
        port: 587,
        auth: {
          user: 'username',
          pass: 'password',
        },
      },
    }),
  ],
};

From this config, you can change quite a few variables. For a complete list, check out the official documentation.

This config can change almost everything that has to do with the existing templates. You can change the copy and format of each email by modifying them in static/email/templates.

New email flows

At one stage, I needed to support a brand-new email flow. By default, this was the email being sent on payment to give you an order confirmation, but I needed it to be sent pre-payment as payment instructions were manual for this shop.

So to add a new flow, we can create custom email event handlers on specific actions in our system.

This is the example of the order placed handler.

const orderPlacedHandler = new EmailEventListener('order-placed')
    .on(OrderPlacedEvent)
    .loadData(async ({ event, injector }) => {
        transformOrderLineAssetUrls(event.ctx, event.order, injector);
        const shippingLines = await hydrateShippingLines(event.ctx, event.order, injector);
        return { shippingLines };
    })
    .setRecipient(event => event.order.customer!.emailAddress)
    .setSubject(`Order confirmation for #{{ order.code }}`)
    .setFrom(`{{ fromAddress }}`)
    .setTemplateVars(event => ({ order: event.order, shippingLines: event.data.shippingLines }));

And to use it, we return this handler in our config.

EmailPlugin.init({
        ...
    handlers: [orderPlacedHandler],
}),

When creating this new template, ensure that you add a new physical email in your template folder. In this case, static/email/templates/order-placed/body.hbs.

Note: You can also subscribe to your own custom events.

Pretty cool, as it's straightforward to create and customize email flows within Vendure.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter