Vendure - Overwriting email templates

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

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" <[email protected]`>', }, 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.

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

Vendure - Overwriting email templates

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Customizing vendure

Changing email globals

New email flows

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Changing email globals

New email flows

Thank you for reading, and let's connect!