Dynamic Data Example

This example demonstrates how to use merge tags and dynamic data in email templates.

Overview

The dynamic data example shows how to:

• Define merge tags
• Provide merge tag data
• Use dynamic variables in templates

Code Example

import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";
import { Retro } from "easy-email-pro-theme";

const mergetags = [
  {
    label: "Order",
    value: "",
    children: [
      {
        label: "Order number",
        value: "order.number",
      },
      {
        label: "Order total",
        value: "order.total",
      },
    ],
  },
  {
    label: "Customer",
    value: "",
    children: [
      {
        label: "Customer name",
        value: "customer.name",
      },
      {
        label: "Customer email",
        value: "customer.email",
      },
    ],
  },
];

const mergetagsData = {
  order: {
    number: "12345",
    total: "$99.99",
  },
  customer: {
    name: "John Doe",
    email: "john@example.com",
  },
};

const config = Retro.useCreateConfig({
  mergetags,
  mergetagsData,
  // ... other config
});

export default function MyEditor() {
  return (
    <EmailEditorProvider {...config}>
      <Retro.Layout />
    </EmailEditorProvider>
  );
}

Using Merge Tags

In your email template, use merge tags like:

• {{order.number}} - Order number
• {{customer.name}} - Customer name
• {{customer.email}} - Customer email

Key Points

• Define merge tag structure
• Provide data object
• Use {{variable.path}} syntax in templates