Dynamic themes in the master template provide a new approach to the email development. With this approach, you use one master template for all your brands. How does it work?
You select the master template for your email in the eWizard My library when you click the ADD NEW button. Instead of multiple email templates developed for each brand, now you see one master template that includes the settings and themes for all the brands. These settings and themes are automatically applied when you select the brand from the drop-down list and click the CREATE button.
As a developer, now you don't need to create the templates for each brand. You develop one master template that includes the color schemes and themes for all the brands of your company.
What's an email theme?
A theme in the eWizard.js email template consists of:
• The ./common/styles/theme.scss file with the CSS styles for the brand colors, etc.
• The ./themes/ directory containing the brand themes subdirectories with the CSS files, media resources, and the index.js file with the list of variables that are available in the template under the $theme key.
• The ./themes/themes.json file that contains configuration for selecting themes in the eWizard Create new pop-up window. The file lists available themes.
Create dynamic themes
To create the dynamic themes for selecting in the eWizard platform, add the themes directory to the root of your email template with the following structure.
. ├─themes/ | ├─theme1/ | | ├─media/ | | | └─images/ | | ├─index.js | | ├─index.scss | | └─variables.scss | ├─theme2/ | └─themes.json
Where
• themes is the directory containing the subdirectories with the specific themes.
• theme1, theme2, etc. is the subdirectory of the theme. Use lower case for its name.
• media is the subdirectory containing the media resources. For example, images.
• index.js is the list of variables available in the template under the $ theme key. See the example here.
• variables.scss is the list of the Sass variables that you use in the theme.
• index.scss is the entry point for the theme. This file contains the imports of this kind:
@import "./variables.scss"; // variables of themes@import "~/../../common/styles/theme.scss"; // file where these variables are used
NOTE: The ~/ characters mean the path to the home directory of your email project.
You can change the names of the index.scss and variables.scss files, but you must specify the new names in the ./.ewizard/settings.json file.
// ./.ewizard/settings.json
{
"path": {
"themePaths": {
"main": "entry.scss", //index.scss
"variables": "vars.scss" // variables.scss
}
}
}• themes.json is the themes configuration for selecting themes in the eWizard Create new pop-up window.
{
"themes": [
{
"id": "viseven",
"name": "Viseven",
"dependencies": {
"brand": ["brand1, brand2"]
}
},
{
"id": "viseven-dark",
"name": "Viseven dark"
}
]
}Where
— id is the theme ID.
— name is the theme name in the drop-down list of the eWizard platform.
— dependencies contains the list of brands for displaying specific themes in the drop-down list of the eWizard platform. If you add the dependency on a certain brand, only this theme is available for selection from the drop-down list for this brand. Other themes don't display. You can add one or more brands to the dependencies field to use the theme with those brands. If there is no dependencies field, all the themes appear in the drop-down list.
— brand is the brand name for which the theme is applied.
TIP: Use this email template directory structure to switch your theme at runtime. For example, the entry point index.scss Sass file of the current theme and all the styles imported in this file, such as ./common/styles/theme.scss, are switched at runtime without rebuilding the Sass files.
Dynamic theme plugins
To use dynamic themes, your email template must have the ThemePlugin and DynamicThemePlugin plugins in the ./extensions/themes.js file.
// ./extensions/themes.jsimport {
ThemePlugin,
DynamicThemePlugin,
} from 'ewizardjs';export default function (Vue, { settings }) {
Vue.use(ThemePlugin);
Vue.use(DynamicThemePlugin, { settings });
}eWizard.js imports extensions in alphabetical order. As best practice, themes should be loaded after the components in a template. To ensure this, start the name of the components file from any letter preceding T. For example, globalComponents.js:
Default and current theme
The settings.json file in the email template root directory contains the settings for the default and current theme name.
{
"theme": {
"default": "viseven",
"current": "viseven-dark"
}
}Where
• default is the default theme name based on the used email template. The default theme displays as the first theme in the theme selection drop-down list. All other themes appear in the alphabetical order.
• current is the current theme applied to the email template.
TIP: Use lower case for the theme name.
Dynamic list of blocks
You can use a dynamic list of blocks for the applied dynamic themes. What's a dynamic list of blocks?
A dynamic list of blocks means that blocks available in the Blocks tab of the eWizard Editor elements panel depend on the selected theme or target CLM system. You can filter the blocks in the email template by the selected theme or CLM system.
Configure blocks for themes
Use the ./common/blocks-library/blocks-themes.json file to configure which blocks you want to display for the specific theme in the eWizard Editor Blocks tab.
{
"themes": {
"viseven": {
"blocks": [
{
"id": "wiz-header-1a",
"name": "Header with social icons"
}
]
},
"viseven-dark": {
"blocks": [
"wiz-header-1c",
{
"id": "wiz-header-1d",
"name": "Header with text V2"
}
]
}
}
}The blocks field provides the array list of blocks for the specific theme. Each block can be a string, for example wiz-header-1c, or an object with these fields:
• id is a string value for the block, for example wiz-header-1d.
• name is a string value for the block name as it displays in the Editor Blocks tab, for example Header with text V2.
To display the list of blocks for the specific theme, select this theme as current in the settings.json file.
For example, select the dark theme as the current theme in the email template's settings.json file.
{
"theme": {
"default": "viseven",
"current": "viseven-dark"
}
}With this configuration, only the blocks listed for the viseven-dark theme appear on the eWizard Editor Blocks tab.
WARNING: If you don't add the blocks-themes.json file to the email project, or the current theme in the settings.json file doesn't match the themes in the blocks-themes.json file, then all the blocks from the blocks.json file appear on the eWizard Editor Blocks tab.
Default blocks
The default blocks are those that are displayed on the email layout in eWizard Editor by default. They're predefined by the selected theme. The default blocks aren't available for selection on the Blocks tab within the elements panel.
To add the default blocks to your email template:
1) Add the defaultBlocks field to the blocks-themes.json file.
// ./common/blocks-library/blocks-themes.json
{
"themes": {
"viseven": {
"blocks": [
"block-header01",
{
"id": "block-header01",
"name": "Header 1",
"clm": ["oce-sales"]
}
],
"defaultBlocks": ["block-header01", "block-header02"]
},
"viseven-dark": {
"blocks": ["block-footer01"],
"defaultBlocks": ["block-footer03", "block-footer04"]
}
}
}2) Add the DynamicBlocksLoader.vue component to the App.vue template in the root of your email project.
<template>
<wiz-root class="m-full-width" align="center">
<DynamicBlocksLoader: blocks-themes="blockThemes": blocks-list="blocksList"></DynamicBlocksLoader>
</wiz-root>
</template><script>
import { DynamicBlocksLoader } from "ewizardjs";
import { themes } from "./common/blocks-library/blocks-themes.json"
import { components } from "./common/blocks-library/blocks.json"export default {
name: "wiz-app",
data: function () {
return {
blockThemes: themes,
blocksList: components,
};
},
components: {
DynamicBlocksLoader,
},
};
</script>As a result, the default Header 1 block will be displayed on the email layout in eWizard Editor for the viseven theme.
NOTE: This feature is available in eWizard.js 5.7.0 or later.
Configure blocks for CLM systems
Use the ./common/blocks-library/blocks-themes.json file to configure which blocks you want to display for the specific target CLM systems in the eWizard Editor Blocks tab.
{
"themes": {
"viseven-dark": {
"blocks": [
"wiz-header-1c",
{
"id": "wiz-header-1d",
"name": "Header with text V2",
"clm": ["viseven", "veeva", "oce-sales"]
}
]
}
}
}Use the clm field for listing the target CLM systems fo which you want to display specific blocks in the eWizard Editor Blocks tab. The clm field uses the code value for the targetCLM parameter from the settings.json file.
// ./settings.json{
"targetCLM": {
"name": "Viseven",
"code": "viseven"
}
}See the list of target systems with their names and codes below.
Target system name | Code |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you don't use the blocks-themes.json file, you can use the blocks.json file for listing the target CLM systems for displaying specific blocks in the eWizard Editor Blocks tab.
// ./common/blocks-library/blocks.json"components": [
{
{
"id": "wiz-header-1c",
"name": "Simple header",
"model": {},
"icon": "node_modules/@blocks/wiz-header-1c/icon.png",
"metadata": [],
"clm": [
"oce-sales",
"viseven"
]
}
}
]The wiz-header-1c block in the preceding example displays in the eWizard Editor Blocks tab only if you select the OCE Sales or Viseven target CLM systems in the Create new pop-up window.
WARNING: The clm field in the blocks.json file has a higher priority than this field in the blocks-themes.json file. It means that the blocks that have the clm field in the blocks.json file appear on the eWizard Editor Blocks tab instead of the same blocks with the clm field in the blocks-themes.json file.
Configure blocks for email purposes
NOTE: This feature is available for eWizard.js 5.14.0 or later.
Emails can have different purposes, such as invitation, follow-up, reminder. The email purpose defines:
• what default blocks are displayed on the eWizard Editor layout.
• what blocks are displayed in the eWizard Editor sidebar.
The email purposes are stored in the purpose.json file.
To display the default blocks on the email layout:
1) Create a purpose.json file in the common/metadata directory. You can list different purposes in the file. For example, a purpose.json file with two purposes: invitation and follow-up.
// ./common/metadata/purpose.json{
"purpose": [
{
"code": "invitation",
"name": "Invitation"
},
{
"code": "follow-up",
"name": "Follow up"
}
]
}— code is the code value of the purpose used in all other settings.
— name is the displayed name of the purpose.
2) Add the path to the purpose.json file in the ./.ewizard/settings.json file. For example:
// ./.ewizard/settings.json{
"path": {
"metadata": {
"purpose": "common/metadata/purpose.json"
}
}
}3) Set the default and current purposes in ./settings.json. For example:
// ./settings.json{
"metadata": {
"purpose": {
"default": "invitation",
"current": "follow-up"
}
}
}— default is the default email purpose displayed first in the Purpose list.
— current is the current purpose applied to the email template.
4) Enter the purpose of the block in the purpose array of the blocks-themes.json file of the default block. You can add multiple purposes to a block. For example:
// ./common/blocks-library/blocks-themes.json"defaultBlocks": [
"bg-email-block-h1",
{
"id": "bg-email-block-c2",
"purpose": [
"follow-up",
"invitation"
]
},For example, the bg-email-block-c2 block appears on the email layout for the follow-up and invitation purposes.
You can configure how the default blocks appear on the item layout by modifying values in the purpose array:
• When you add values to the purpose array, the block appears for these purposes. For example, the bg-email-block-c2 block appears on the item layout for the follow-up and invitation purposes:
// ./common/blocks-library/blocks-themes.json"defaultBlocks": [
{
"id": "bg-email-block-c2",
"purpose": [
"follow-up",
"invitation"
]
},• When you delete all values in the purpose array, the block doesn't appear in the list of blocks. For example, the bg-email-block-c2 block doesn't appear on the item layout:
// ./common/blocks-library/blocks-themes.json"defaultBlocks": [
{
"id": "bg-email-block-c2",
"purpose": []
},• When you don't set the purpose array, the block appears for all purposes. For example, the bg-email-block-h1 block appears on the item layout for all purposes:
// ./common/blocks-library/blocks-themes.json"defaultBlocks": [ "bg-email-block-h1" ]
To configure how the blocks appear on the item sidebar, change the purpose values in the common/blocks-library/blocks.json file of your project.
For example, the bg-ae-block-c1 block appears in the sidebar for the invitation and follow-up purposes:
// ./common/blocks-library/blocks.json{
"components": [
{
"id": "bg-ae-block-c1",
"clm": ["veeva"],
"icon": "common/blocks-library/bg-ae-block-c1/icon.png",
"path": "common/blocks-library/bg-ae-block-c1",
"purpose": [
"invitation",
"follow-up"
]
},
]
}Custom path to blocks
You can add blocks to various directories of your email project and provide the paths to these blocks in the blocks.json and blocks-themes.json files. The path in the blocks-themes.json file has a higher priority than the path in the blocks.json file.
For example, if you add the ./blocks/block-header01a block, use the blocks/block-header01a path in the path field for this block in the blocks-themes.json file.
// ./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"
}
]
}
}
}This custom path overrides the common/blocks-library path in the .ewizard/settings.json file.
// ./.ewizard/settings.json{
"path": {
"blocks": "common/blocks-library",
"blocksManifest": "common/blocks-library/blocks.json"
}
}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 blocks-themes.json file.
TIP: The path field in the blocks.json or blocks-themes.json file has a higher priority than the common/blocks-library path in the .ewizard/settings.json file. If you have the same block in both locations, eWizard.js uses the block with the specified path field in the blocks.json or blocks-themes.json file.
Configure blocks for countries and languages
You can configure the display of blocks for specific countries and languages on the Blocks tab in eWizard Editor. When you select the item country and language in eWizard Library, the blocks are filtered and displayed according to your settings.
Enter the countries and languages in the blocks-themes.json file to filter out the blocks.
The countries object has two arrays:
• The include array lists the countries the block is shown for. To display the block for all countries, leave the include array empty, or enter Global. For example, block-1 is shown only for Ukraine, Britain, and Sweden:
// ./common/blocks-library/blocks-themes.json{
"themes": {
"Unbranded": {
"defaultBlocks": [
{
"id": "block-1",
"countries": {
"include": ["Ukraine", "Britain", "Sweden"],
"exclude": ["Germany", "France"]
},
"languages": []
}
]
}
}
}• The exclude array lists the countries the block isn't shown for. Leave the exclude array empty, to display the block for all countries. For example, block-1 isn't shown for Germany and France.
The exclude array has priority over include. If a country is in both exclude and include arrays, the block isn't shown for a country. For example, block-1 isn't shown for Germany:
// ./common/blocks-library/blocks-themes.json{
"themes": {
"Unbranded": {
"defaultBlocks": [
{
"id": "block-1",
"countries": {
"include": ["Ukraine", "Britain", "Sweden", "Germany"],
"exclude": ["Germany", "France"]
},
"languages": []
}
]
}
}
}The languages array lists the languages the block is displayed for. The language code must be in the three-letter ISO 3 format. For example, block-1 is displayed for the English (eng) and French (fra) languages:
// ./common/blocks-library/blocks-themes.json{
"themes": {
"Unbranded": {
"defaultBlocks": [
{
"id": "block-1",
"countries": {
"include": ["Ukraine", "Britain", "Sweden"],
"exclude": ["Germany", "France"]
},
"languages": ["eng", "fra"]
}
]
}
}
}You can also apply the country and language settings to the whole template in the blocks.json file. eWizard.js checks the blocks-themes.json file before the blocks.json file. If the same block has countries and languages settings in both blocks-themes.json and blocks.json, the blocks-themes.json settings are applied.
Dynamic list of components
You can display a specific list of components in eWizard Editor for the selected theme.
Configure components for themes
Use the ./common/components/components-themes.json file to configure which components you want to display for the specific theme on the Components tab in eWizard Editor.
{
"themes": {
"viseven": {
"components": [
{
"id": "wiz-text",
"name": "New Text"
},
"wiz-image"
]
},
"viseven-dark": {
"components": ["wiz-title", "wiz-image"]
}
}
}The components field provides the array list of components for the specific theme. Each component can be a string, for example wiz-image, or an object with these fields:
• id is a string value for the component, for example wiz-text.
• name is a string value for the component name as it's displayed in eWizard Editor, for example New Text.
TIP: The name field value is displayed in eWizard Editor instead of the value for this component name in the components.json file.
To display the list of components for the specific theme, select this theme as current in the settings.json file.
For example, select the dark theme as the current theme in the email template's settings.json file.
{
"theme": {
"default": "viseven",
"current": "viseven-dark"
}
}With this configuration, only the components listed for the viseven-dark theme are displayed on the Components tab in eWizard Editor.
WARNING: If you don't add the components-themes.json file to the email project, or the current theme in the settings.json file doesn't match the themes in the components-themes.json file, then all the components from the components.json file are displayed in eWizard Editor.
Icons for blocks and components
You can display specific icons for blocks or components based on the selected theme. How does it work?
To display the specific icons for the components or blocks in eWizard Editor on the Components or Blocks tab based on the selected theme:
1) Add the path to the icon:
— In the components.json file for the component.
— In the blocks.json file for the block.
2) Add the icons to the specified component or block directory path as the PNG, JPG, or JPEG files.
Icons for blocks based on the theme
To display specific icons for blocks in your email template based on the selected theme, add the icon path to the blocks.json file. The icon filename must have the following format: icon-theme.png.
Where:
• theme is the current theme.
For example, to add a specific icon for the block based on the dark theme:
1) Select viseven-dark as the current theme in the settings.json file.
{
"theme": {
"default": "viseven",
"current": "viseven-dark"
}
}2) Add the path value for the wiz-header-1d block to display the icon for this block on the Blocks tab in eWizard Editor.
// ./common/blocks-library/blocks.json
{
"id": "wiz-header-1d",
"name": "Header with text V2",
"model": {},
"icon": "node_modules/@blocks/wiz-header-1d/icon.png",
"path": "node_modules/@blocks/wiz-header-1d",
"metadata": []
},3) Add the icon PNG file with the theme name in the specified path location: ./node_modules/@blocks/wiz-header-1d/icon-viseven-dark.png.
Icons for components based on the theme
To display the specific icons for components in your email template based on the selected theme, add the icon path to the components.json file. The icon filename must have the following format: icon-theme.png.
Where:
• theme is the current theme.
For example, to add a specific icon for the Calendar component based on the dark theme:
1) Select viseven-dark as the current theme in the settings.json file.
{
"theme": {
"default": "viseven",
"current": "viseven-dark"
}
}2) Add the path value for the wiz-calendar component to display the icon for this component on the Components tab in eWizard Editor.
// ./common/components/components.json
{
"components": [
{
"id": "wiz-calendar",
"name": {
"eng": "Calendar"
},
"model": {},
"path": "common/components/wiz-calendar"
}
],
"ignore": []
}3) Add the icon PNG file with the theme name in the specified path location: ./common/components/wiz-calendar/icon-viseven-dark.png.
Paths for icons
You can add the path to the icons for components or blocks with different parameters and with different priorities. Add the path to the icons in these files:
• ./common/blocks-library/blocks.json for blocks.
• ./common/components/components.json for components.
The following path parameters are available with these priorities:
1) Use iconsPath to load all the icons from the component or block directory. This is the highest priority path for icons.
// ./common/components/components.json
{
"components": [
{
"id": "wiz-calendar",
"name": {
"eng": "Calendar"
},
"model": {},
"iconsPath": "common/components/wiz-calendar"
}
],
"ignore": []
}2) Use icon to load the specific icons from the component or block directory. This is the second priority path for icons.
// ./common/blocks-library/blocks.json
{
"components": [
{
"id": "block-header02",
"name": "block-header02",
"model": {},
"icon": {
"icon": "common/blocks-library/block-header02/icon.png",
"icon-viseven": "common/blocks-library/block-header02/icon-viseven.png"
},
"metadata": []
}
]
}3) Use path to load all the icons from the component or block directory. This is the lowest priority path for icons.
// ./common/components/components.json
{
"components": [
{
"id": "wiz-calendar",
"name": {
"eng": "Calendar"
},
"model": {},
"path": "common/components/wiz-calendar"
}
],
"ignore": []
}Naming for icons
To display the specific icons for blocks or components based on the theme, target system, language, or country selected in the eWizard Create new pop-up, add the icon filename in the following formats:
• icon-theme-clm-country-lang.png
• icon-theme-clm-lang.png
• icon-theme-clm.png
• icon-theme-lang.png
Where:
• theme is the current theme in the settings.json file.
• clm is the code value from targetCLM in the settings.json file.
• lang is the langs value from localization in the settings.json file.
• country is the country value in the settings.json file. The country name must be in the lower case.
WARNING: You can't display specific icons for components based on the selected target CLM system. This feature is available only for blocks.
For example, the viseven-dark-veeva-estonia-eng icon name means that this icon image is displayed for the block on the Blocks tab in eWizard Editor if you select Viseven dark as Theme, Veeva Vault as Target system, English as Language, and Estonia as Country from the drop-down lists.
You can add multiple icon images that are displayed based on the icon filename with the following priority.
1) icon-theme-clm-country-lang.png
2) icon-theme-clm-lang.png
3) icon-theme-clm.png
4) icon-theme-lang.png
5) icon-theme.png
6) icon-clm-country-lang.png
7) icon-clm-lang.png
8) icon-clm.png
9) icon-lang.png
10) icon.png
Change settings at runtime
You can change certain settings in the emails with dynamic themes at runtime. To change these settings, you don't need to rebuild the project locally. You can change the settings in the settings.json file without editing the file itself. Instead you can pass these settings as parameters in your browser address bar.
The settings in the settings.json file include language, target system, scheme, and theme.
• theme is the current theme in the settings.json file.
• scheme is the color scheme in the theme SCSS file.
• clm is the code value from targetCLM in the settings.json file.
• lang is the langs value from localization in the settings.json file.
To change the settings:
1) Build the email project as a live-reload server.
wiz dev --live
2) Go to http://localhost:3000/ in your browser.
3) In the browser address bar:
• Add ?lang=[LANGUAGE_CODE] after localhost:3000/ to change the localization of your email.
For example, enter http://localhost:3000/?lang=deu in your browser address bar to change the localization of your email to the German language. The text changes to German if you have the localized text in your email project.
• Add ?theme=[THEME_NAME] after localhost:3000/ to switch to another theme.
For example, enter http://localhost:3000/?theme=viseven-dark in your browser address bar to change the theme of your email to the dark Viseven theme. Enter http://localhost:3000/?theme=viseven to switch the theme back to the standard Viseven theme.
NOTE: You must have the themes configured in your project to switch the themes.
• Add ?clm=[CLM_CODE] after http://localhost:3000/ to switch to another target system.
For example, enter http://localhost:3000/?clm=oce-sales in your browser address bar to change the target system of your email to OCE Sales.
See the list of target systems.
TIP: Change multiple settings at the same time with the & symbol. For example, enter http://localhost:3000/?lang=deu&theme=viseven-dark to change language to German and set the dark Viseven theme.
Multiple layouts in one email template
eWizard.js supports multiple email layouts in one master template. You can specify the theme, blocks, and components that appear in your email layout. Each layout is a separate email template with the configured theme, a set of blocks and components. Place each email layout directory in the ./layouts directory in your email master template.
. ├─layouts/ | ├─layout1/ | └─layout2/
TIP: You can rename the ./layouts directory or add a path to a specific layout. For more information, see Rename or change path to an email template.
To build your email project with a specific layout:
wiz dev --layout layout1
To view the result, open the ./index.html file in the browser. Your email has the specified theme, blocks, and components.
TIP: You can build your email with the specified layout with the wiz dev --live or wiz dev --watch options. For example, run wiz dev --live --layout layout2 to build your email with layout2 and start a live-reload server. Open http://localhost:3000/ to view your email with the specified layout.
To zip your email project with a specific layout:
wiz archive --layout layout1
As a result, eWizard CLI generates the layout1.zip file in the root directory of your email project.
You can zip your email project with several layouts:
wiz archive --layout layout1 layout2
As a result, eWizard CLI generates the layout1.zip and layout2.zip files in the root directory of your email project.
For more information, see wiz dev --layout and wiz archive --layout eWizard CLI commands.
Rename or change path to an email template
You can rename or change the path to the specific email layout that you build with wiz dev --layout or wiz archive --layout CLI commands within the master email template.
To rename the ./layouts directory:
1) Go to the ./.ewizard/settings.json directory of your master email template.
2) Set the name of the layout directory in the layouts key.
In this example, the name of the layout directory is country:
// ./.ewizard/settings.json"path": {
"layouts": "country"
}You can also add a path to a specific layout in the layouts key. For example:
// ./.ewizard/settings.json"path": {
"layouts": "country/France/Paris"
}NOTE: When adding a path in the layouts key, start the path from the directory where all layouts are located. In this example, country is the directory with all layouts.
Running wiz archive --layout [LAYOUT_NAME] with these settings adds all layouts from the country directory to the project archive.
To exclude unnecessary layouts from the archive, add the directory with all layouts in the ignore array in the ./.ewizard/settings.json file of the master template. For example, to exclude all layouts except country/France/Paris, ignore the country directory:
// ./.ewizard/settings.json"path": {
"layouts": "country/France/Paris"
},
// Other settings
"archive": {
"ignore": [
"country"
]
}Build an email with a specific layout and theme
To build and zip your email project with a specific layout and theme, run the following command and options in the project root directory.
wiz archive --layout [LAYOUT_NAME] --current-theme
• LAYOUT_NAME is the name of your layout directory. This directory must be in the ./layouts directory.
• --current-theme or -ct is the option for the wiz archive eWizard CLI command that builds the email project with the blocks specified for the current theme in the ./layouts/[LAYOUT_NAME]/common/blocks-library/blocks-themes.json and ./layouts/[LAYOUT_NAME]/common/blocks-library/blocks.json files. This option ignores the rest of the blocks specified in the email master template: the ./common/blocks-library/blocks-themes.json and ./common/blocks-library/blocks.json files. The option takes the current theme from the ./settings.json file.
This feature reduces the size of the resulting archive as it contains only the blocks from the specified layout and theme.
Prerequisites
To build the email project with a specific layout and theme, the ./layouts/layout directory must have the following structure.
. ├─.ewizard/ ├─common/ | └─blocks-library/ | ├─blocks.json | └─blocks-themes.json ├─themes/ | ├─current-theme/ | └─themes.json ├─App.vue ├─package.json └─settings.json
• The current-theme directory must have the name specified as the current field value for theme in the ./settings.json file.
• The ./layouts/layout/common/blocks-library/blocks.json file lists the IDs of the blocks used in the current theme. These blocks are in the dedicated directories inside the ./common/blocks-library/ directory.
// ./layouts/layout/common/blocks-library/blocks.json{
"components": [
{ "id": "email-block1" },
{ "id": "email-block2" }
]
}• The ./layouts/layout/common/blocks-library/blocks-themes.json file provides the configuration for the current theme: the current theme name and its blocks with IDs, names, and icons that appear on the eWizard Editor Blocks tab.
// ./layouts/layout/common/blocks-library/blocks-themes.json{
"themes": {
"viseven-dark": {
"blocks": [
{
"id": "email-block1",
"name": "Email Block 1",
"icon": {
"icon": "themes/viseven-dark/blocks-icons/email-block1/icon.png"
}
},
{
"id": "email-block2",
"name": "Email Block 2",
"icon": {
"icon": "themes/viseven-dark/blocks-icons/email-block2/icon.png",
}
}
]
}
}
}NOTE: The path to the blocks icons for the specific layout and theme is ./layouts/layout/themes/viseven-dark/blocks-icons/.
• The ./layouts/layout/themes/themes.json file provides the configuration for the current theme: its ID, name as it appears in the Create new pop-up window in eWizard My library, and its dependency on the brand.
// ./layouts/layout/themes/themes.json{
"themes": [
{
"id": "viseven-dark",
"name": "Viseven dark",
"dependencies": {
"brand": ["viseven"]
}
}
]
}Monorepo emails
In eWizard.js, you can create monorepo emails: eWizard templates and workspaces. Monorepo emails are emails created from a master template stored in a repository.
The node modules for monorepo are installed only once in the master template. Other emails created from the master template use the same node modules via a symlink. This means that you need to install node modules only once to the master template, which lets you create emails that use fewer storage data.
An eWizard template is a monorepo email created from a master template stored in the repository. You can create an eWizard template from a master template layout with specific blocks, emails, and components. The package.json file of the workspace depends on the master template repository with all the settings.
A workspace is an eWizard template after customization in eWizard Editor and upload to the repository. The workspace stores the node modules of the master template via a symlink. The package.json file of the workspace depends on the master template repository with all the settings.
To create an eWizard template:
1) Upload a master template to a repository.
WARNING: In master templates used for monorepo emails, all relative paths must start with ^.
For example, in the ./common/blocks-library/blocks-themes.json file, use:
{
"icon": "^/themes/blocks-icons/common-icons/icon.png",
}Instead of:
{
"icon": "themes/blocks-icons/common-icons/icon.png",
}2) Clone the repository to your computer.
3) Create an eWizard template with the wiz create command, for example, from layout1:
wiz create ewizard-template --from layout1
As a result, the layout1 folder is archived. The master template settings are added as a dependency to the package.json file:
// ./package.json{
"dependencies": {
"ewizard.js": "5.23.0",
"master": "git+https://git.qapint.com/myrepository"
}For more information about the wiz create command, see wiz create [options]
To create a monorepo workspace:
1) Modify an eWizard template in eWizard Editor.
2) Download the source archive.
3) Upload the unzipped archive to a repository.
Store the monorepo workspaces in the emails directory of your repository. For example, a monorepo structure with Global and Ukraine workspaces:
The node_modules directory stores symlinks to the node modules of the master template.