eWizard.js documentation

Appearance

eWizard.js v5.17.6 and eWizard CLI v0.31.0 ​

May 2022

New in eWizard.js ​

Custom path to blocks in emails ​

Add blocks to various directories of your email project and provide the paths to these blocks in the blocks.json or the blocks-themes.json file.

json
// ./common/blocks-library/blocks-themes.json

{
  "themes": {
    "Unbranded": {
      "blocks": [
        {
          "id": "block-header01a",
          "name": "Header block 1",
          "path": "blocks/block-header01a"
        },
        {
          "id": "block-header02a",
          "name": "Header block 2"
        }
      ]
    }
  }
}

The custom path overrides the common/blocks-library path in the .ewizard/settings.json file. eWizard.js uses the path from the .ewizard/settings.json file for all other blocks that don't have the specified path field in the blocks.json or the blocks-themes.json file.

Generation of images with a transparent background ​

When the as-image feature generates the screenshots from the email components, certain email clients may display the component background that differs from the general block background.

Use the as-image-options attribute with the omitBackground property to generate screenshots for the email components with a transparent background.

html
<wiz-button as-image="" as-image-options="{'type': 'png', 'omitBackground': true}"></wiz-button>

For more information, see Generate images with a transparent background.

Unused CSS removal from site builds ​

Now, the site builder removes the unused CSS styles from the resulting site build. The UnCSS tool parses the project files when you run the build and removes the CSS styles that aren't used in the template blocks and components.

To use this feature, add the uncss field to the ./settings.json file with the empty object.

json
"uncss": {}

You can use the UnCSS tool to ignore certain CSS classes with the ignore option.

json
"uncss": {
  "ignore": []
}

For more information, see UnCSS removal from site builds.

Current theme in site builds ​

Use the requireCurrentTheme API to build the site project with the current theme and ignore all other themes in your project. This feature removes the unused themes from the resulting build when you export the landing page for eWizard. This reduces the build size and improves the website performance in the browser.

The site builder uses the current field from the settings.json file and the index.js file in the theme directory.

js
// ./extensions/globalComponents.js

import { requireCurrentTheme } from 'ewizardjs';

const { default: defaultTheme } = requireCurrentTheme('index.js');

For more information, see Build with a current theme.

Current blocks usage ​

Build a landing page with current blocks and exclude other blocks in the project with the requireCurrentBlocks API. The API removes unused blocks from the resulting build. This reduces the build size, improving landing page performance.

To use the API, add it to the globalBlocks.js file.

js
// ./common/extensions/globalBlocks.js

import { requireCurrentBlocks } from 'ewizardjs';

const blocks = requireCurrentBlocks();

export default function (Vue) {
  blocks.forEach((block) => {
    Vue.component(block.name, block);
  });
}

For more information, see Specific blocks in site builds.

Display of email blocks based on country and language ​

Show email blocks for specific countries or languages on the Blocks tab in eWizard Editor. You can include or exclude the countries you want to show the block for in the countries object. Add languages in the languages array to display a block for specific languages.

Edit the countries and languages in the blocks-themes.json file if you use dynamic themes, or blocks.json, if you want to apply the settings to the whole email template.

For more information, see Blocks in eWizard.js projects.

Email theme settings ​

Use the getRaw method of the settings API to pass the settings from the settings.json file to the email theme index.js file. This API method ensures the email theme settings use the specified fields from the settings.json file without rebuilding the email project.

For more information, see Email theme settings.

Documentation updates ​

We've updated the following documentation articles:

General development ​

  • Actions

    Use the Vue.js directives to assign actions like Open slide/PDF/pop-up/link in e-Detailers, landing pages, or messenger ads. Learn about using the directives, such as v-open, v-goto, v-switch, v-toggle, and v-outside-click.

Email components ​