eWizard.js v5.45.0 and eWizard CLI v1.4.0

June 2024

New in eWizard.js

Banners

You can now develop banners in eWizard.js. Use banners to provide concise information about your brand and direct the target audience to your website. Banners placed on high-traffic websites and social media reach your intended custom across different screens and devices.

For more information about banner development, see:

• Overview

• Directory structure

• Banner structure

• Settings

• System settings

Site analytics

You can now configure site analytics to track user clicks, page transitions, and analyze user journeys effectively.

To collect analytics in eWizard.js, use the $analytics plugin and the v-analytics directive.

// ./extensions/analytics.js

export default function (Vue) {
  Vue.prototype.$analytics.setOutput((data) => {
  
    window.dataLayer = window.dataLayer ?? [];
    window.dataLayer.push(data);
  });
}

Site anchors

Add anchors to your blocks, components, and placeholders for navigation between site pages and to improve user experience.

You can add an anchor to the landing page layout or multipage site page.

<template>
    <wiz-page>
        <wiz-block data-anchor-id="block-anchor" data-anchor-label="Block anchor">
        </wiz-block>
    </wiz-page>
</template>

To reference the anchor, you can use the v-goto action.

<!-- ./pages/home/index.vue -->

<i18n>
{
    "eng": {
        "text_1": "Go to first page",
    }
}
</i18n>

<template>
    <wiz-page id="home" class="editable-block">
        <wiz-block>
            <wiz-button :text="$t('text_1')" v-goto="first#my-anchor"></wiz-button>
        </wiz-block>
    </wiz-page>
</template>

Component display based on the theme

We added the possibility of displaying components in the components.js file based on the selected theme. This provides a consistent style for different themes and improves the behavior and appearance of components based on the selected theme.

• Define the showInComponentsTab field to conditionally display components in the Editor sidebar based on the theme.

  // components.js
  
  import WizText from '@edetailer/wiz-text';
  
  export default function ({ settings, theme }) {
  const currentTheme = settings.getCurrentTheme();
  
  return [
      {
      name: 'wiz-text',
      component: WizText,
      showInComponentsTab: settings.getCurrentTheme() === 'light',
      },
  ];
  }

• Access and utilize theme variables from theme.scss to adjust component styles.

  import WizText from '@edetailer/wiz-text';
  
  export default function ({ settings, theme }) {
  const currentTheme = settings.getCurrentTheme();
  
  return [
      {
      name: 'wiz-text',
      component: WizText,
      attrs: {
          style: `color: ${theme.textColor}`,
      },
      },
  ];
  }

• Dynamically choose component templates based on the current theme using the require object and settings.getCurrentTheme() expression.

  // components.js
  
  import WizText from '@edetailer/wiz-text';
  
  export default function ({ settings, theme }) {
  return [
      {
      name: 'wiz-text',
      component: WizText,
      ewizardConfig: {
          template: require(`./components/templates/wiz-text-templates/${settings.getCurrentTheme()}.template.vue`).default.template,
      },
      },
  ];
  }

Thumbnail generation for all themes

Use the thumbForEachTheme option in settings.json to generate thumbnails for all themes in e-Detailers, landing pages, and multipage sites. This ensures the correct display of thumbnails in the eWizard platform.

// ./settings.json

{
  "screenshoter": {
    "thumbForEachTheme": true,
  }
}

Documentation updates

We've updated the following documentation articles:

General development

Export eWizard tokens

Email export

Export emails for Mailchimp