Anzeigebedingungen

Anzeigebedingungen erlauben es Benutzern, die Sichtbarkeit von Blöcken basierend auf Bedingungen zu ändern. Wenn einem Block eine Bedingung zugewiesen ist, umschließt der Renderer dessen Ausgabe mit der von Ihnen definierten Bedingungssyntax (z. B. Liquid {% if %} / {% endif %}). Die Bedingungen werden unverändert durchgereicht — Ihre Versandplattform oder Template-Engine sollte sie vor dem Versand rendern.

Konfiguration

Definieren Sie verfügbare Bedingungen über die Editor-Konfiguration:

import { init } from '@templatical/editor';

const editor = await init({
  container: '#editor',
  displayConditions: {
    conditions: [
      {
        label: 'VIP Customers',
        before: '{% if customer.vip == true %}',
        after: '{% endif %}',
        description: 'Only shown to VIP customers',
      },
      {
        label: 'Has Active Subscription',
        before: '{% if subscription.active %}',
        after: '{% endif %}',
        description: 'Shown when user has an active subscription',
      },
    ],
  },
});

DisplayCondition-Typ

interface DisplayCondition {
  label: string;
  before: string;
  after: string;
  group?: string;
  description?: string;
}

Eigenschaft	Erforderlich	Beschreibung
label	Ja	Anzeigename in der Editor-Oberfläche
before	Ja	Markup, das vor der Blockausgabe eingefügt wird
after	Ja	Markup, das nach der Blockausgabe eingefügt wird
group	Nein	Gruppenname zur Organisation von Bedingungen im Dropdown
description	Nein	Erklärender Text, der unter dem Label angezeigt wird

DisplayConditionsConfig

interface DisplayConditionsConfig {
  conditions: DisplayCondition[];
  allowCustom?: boolean;
}

Wenn allowCustom auf true gesetzt ist, können Benutzer ihre eigenen before- und after-Zeichenketten direkt im Editor schreiben, anstatt aus der vordefinierten Liste zu wählen. Standardwert ist false.

Bedingungen gruppieren

Verwenden Sie die Eigenschaft group, um Bedingungen in logische Abschnitte zu organisieren. Gruppen erscheinen als beschriftete Abschnitte im Dropdown des Bedingungs-Pickers.

displayConditions: {
  allowCustom: true,
  conditions: [
    {
      label: 'VIP Partners',
      before: '{% if customer.vip %}',
      after: '{% endif %}',
      group: 'Audience',
    },
    {
      label: 'Free Users',
      before: '{% if customer.plan == "free" %}',
      after: '{% endif %}',
      group: 'Audience',
    },
    {
      label: 'Enterprise',
      before: '{% if customer.plan == "enterprise" %}',
      after: '{% endif %}',
      group: 'Audience',
    },
    {
      label: 'Beta Testers',
      before: '{% if customer.beta %}',
      after: '{% endif %}',
      group: 'Audience',
    },
    {
      label: 'Early Bird',
      before: '{% if registration.early_bird %}',
      after: '{% endif %}',
      group: 'Registration',
    },
    {
      label: 'Speakers',
      before: '{% if role == "speaker" %}',
      after: '{% endif %}',
      group: 'Role',
    },
  ],
}

Die Felder before und after akzeptieren jede Zeichenkette, sodass Sie jede Template-Syntax verwenden können, die Ihre Plattform unterstützt — Liquid, Handlebars, AMPscript, Jinja2 oder alles andere.

Wie sich Bedingungen auf die Ausgabe auswirken

Wenn einem Block eine Anzeigebedingung zugewiesen ist, umschließt der Renderer die HTML-Ausgabe des Blocks mit den before- und after-Zeichenketten:

{% if customer.vip == true %}
<tr>
  <td>
    <!-- block content here -->
  </td>
</tr>
{% endif %}

Der Editor und der Renderer behandeln die before- und after-Zeichenketten als undurchsichtig — sie werden genau wie definiert eingefügt.

Anwenden von Bedingungen im Editor

Benutzer wählen eine Anzeigebedingung aus dem Einstellungsbereich des Blocks aus. Jeder Block kann höchstens eine Anzeigebedingung haben. Auf der Editor-Arbeitsfläche zeigen Blöcke mit Bedingungen ein Filtersymbol, sodass auf einen Blick erkennbar ist, welcher Inhalt bedingt ist.

Das Klicken auf das Filtersymbol blendet den Block aus und simuliert eine falsche Bedingung. Dies ermöglicht es Benutzern, eine Vorschau anzuzeigen, wie das Template aussieht, wenn bestimmte bedingte Blöcke nicht sichtbar sind. Wenn ein Block auf diese Weise ausgeblendet ist, erscheint eine Wiederherstellungsschaltfläche im Editor, um alle ausgeblendeten Blöcke wiederherzustellen.

Bedingungen echt auswerten

Das Filtersymbol simuliert eine falsche Bedingung — es ist ein manuelles Was-wäre-wenn, und nichts prüft die Bedingung gegen Daten. Damit Bedingungen tatsächlich ausgewertet werden, verdrahten Sie den Hook resolvePreview: Ihr Backend erhält die Vorlage und kann Blöcke weglassen, deren Bedingung für einen bestimmten Empfänger nicht zutrifft — die Vorschau zeigt dann die echte Variante statt einer von Hand umgeschalteten.

Solange ein Resolver die Vorschau liefert, treten das Filtersymbol und die Wiederherstellungsschaltfläche zurück — der Resolver hat jede Bedingung bereits gegen echte Daten geprüft, sodass ein von Hand ausgeblendeter Block genau die Antwort überstimmen würde, die Sie angefordert haben. Ihre ausgeblendeten Blöcke sind zurück, sobald Sie die Vorschau verlassen.

Jede Variante prüfen

Zwei Wege, die unterschiedliche Fragen beantworten:

• Vorschau-Rendering — verdrahten Sie resolvePreview, und jede Variante wird im Editor gerendert, ohne etwas zu versenden. Die schnellste Schleife beim Erstellen und der einzige Weg, eine Variante für einen Empfänger zu sehen, dem Sie nicht schreiben können.
• Test-E-Mails — senden Sie an verschiedene Empfängerprofile und bestätigen Sie, dass jede Variante in einem echten Postfach ankommt. Langsamer, prüft aber die Auswertung Ihrer Plattform und den E-Mail-Client selbst, was keine Vorschau leisten kann. :::