VTEX Emails
VTEX Emails is an email framework based on bojler for developing transactional email templates for VTEX E-commerces.
Features
VTEX Emails inherited Bojler's features like:
- SASS support
- Automatic CSS inlining
- Embedded CSS
- Webserver with Live Reload
- Reset styles
- Responsive design
And it has other important features:
- Handlebars compiling
- Tachyons integration
- Partials for code reuse
- VTEX transactional JSONs examples for preview
- i18n for internationalization
Folders and structure
public
compiled files for previewdist
compiled files for exportingsource
working folderdata
JSON files containing Orders datahelpers
VTEX's Helpers functionslocales
i18n filessass
stylestemplates
e-mails templatespartials
e-mails parts
You must NOT add, change or modify:
helpers
you can use only Handlebars and VTEX's Helpers
You can add, change or modify:
data
you can create folders with different JSON examples as well. They must have a real VTEX JSON structurelocales
use your own communicationsass
use your own styletemplates
name your templates your own way. Each template must have a JSON file with the same name.partials
use the partials that make sense for you
Hands on
Installation
- Download or clone VTEX Emails
- Install npm dependencies: run
npm install
Developing
- Requires node
16.x
- Run
npm run gulp dev
- Go to http://localhost:8000/
- Choose the language folder and open the template that you want to preview
Generating an exportable VTEX template
- Run
npm run gulp dist
- Go to
dist
folder, copy the template content and paste it in VTEX Message Center
Generating a light preview version for testing
- Run
npm run gulp preview
- Go to
public
folder, copy the template content and test it using services like MailChimp
Changing JSON data set
- Stop npm service
- Create a new folder in
source/data
- Change
orderJsonToRead
variable ingulpfile.js
to the new folder name - Start npm service
To do
- Live reload is not working very well. Sometimes you need to refresh the page manually
- Recompiling doesn't work for JSON changes. You'll need to stop npm service and start it again
- Improve Outlook compatibility
- Improve VTEX inStore scenarios
Bugs and feature requests
If you find a bug or need new feature please open a new issue and we will discuss about it.
Thank you! :)