Emails

Basics

We utilize Juice to inline our compiled email.scss css into our email templates.

There is a directory called emails located in themes/genesis/src/juice-emails, which house the miva email templates, without the inlined CSS. These are the development templates used for making updates to the emails.

When you run webpack, juice will inline the css into the email templates, and update the compiled files into the miva-templates directory.

Juice will also work when development is run locally. The miva-templates will only update if necessary.

Important: Update the juice email templates located in themes/genesis/src/juice-emails/emails when you need an update, not the miva-template versions. All miva-template email templates will be overwritten when juice is run.

Adding a new email template

When adding a new email template in miva, you will want to create the email in the Miva Admin first. Next, copy the miva-template file from the Admin (or from a template sync) into the juice-emails/emails/templates directory. Ensure the template files have the same name in both locations.

Example: "Updated Password" Email

Miva Template: email_updated_password.mvt

Copy this file into the juice-emails/emails/templates directory. Be sure to keep the same filename.

If there are any items (toe_order_contents, etc.), you will want to copy those files over as well. The .json files are not necessary to copy over into the juice-emails directory.

Utilize classes instead of inline CSS to style your template.

The final product that will be updated in the store will be the template under miva-templates.

Updating CSS

Updates to the CSS for emails can be done in the themes/genesis/src/juice-emails/email.scss file. This file imports the main Genesis configuration scss allowing you to use the same variables and helpers used elsewhere in Genesis.

Pushing changes

Juice has been built into a webpack plugin added to our webpack common configuration. It is configured to run anytime the webpack build process runs either for local development or during the production build process.

Any time pnpm run start or pnpm run build is run, Juice will compile the email templates in the juice-emails/emails directory with the emails.scss file and create the inline styled templates in the miva-templates directory. These templates then can either be copied and pasted back into the Admin, or uploaded via MMT push.

Helper Import

There is a file that is generated under juice-emails/imports with the name of _emails.xml.

This XML file can be imported via Provisioning in the store, to update the templates quicker. This is helpful for uploading templates quickly once webpack has run if you're having issues with MMT.

Webpack configuration options

The Juice Webpack Plugin accepts two options to the plugin that can be overwritten in your webpack.common.js file. These options control the input and output of the templates in case you need to change the directory your templates pull from, or output to.

juiceTemplatesFilePath: './src/juice-emails/emails/',
mivaTemplatesFilePath: './../../miva-templates/'

juiceTemplatesFilePath defines the path to the templates you want Juice to use for compilation. These are the templates used for development. mivaTemplatesFilePath defines the path the compiled templates output to. These compiled templates are used for uploading to the store.