Nachrichten mit Mock-JSON in der Vorschau testen

Simulieren Sie API- oder Entry-Style-JSON in Ihrer Nachricht mit capture und json_parse, um Liquid und Layout in der Vorschau des Nachrichten-Editors zu validieren, bevor Sie eine Campaign starten, ein Canvas triggern oder Connected Content live aufrufen.

Über dieses Beispiel

Flash & Thread, eine fiktive Bekleidungsmarke aus dem Einzelhandel, erstellt Nachrichten, die von Connected-Content-Antworten, Canvas-Kontextvariablen oder Profildaten in Form von Objekt-Arrays abhängen. Wenn Sie für jede Iteration echte API-Aufrufe auslösen oder Campaigns starten, verlangsamt das die Entwicklung.

In diesem Szenario wird ein Mock-JSON-Payload in den Nachrichtentext eingebettet, mit capture gespeichert und anschließend mit json_parse geparst, sodass Liquid im Bereich Vorschau auf strukturierte Felder verweisen kann – ganz ohne Live-Connected-Content-Aufruf, API-getriggerten Canvas-Entry oder Testversand.

Nutzen Sie dieses Vorgehen während der Entwicklung von Nachrichten. Es ersetzt keine End-to-End-Tests mit echten Triggern, Testversänden oder der Vorschau von Nutzerpfaden in Canvas.

Überlegungen

• Dieser Ansatz unterstützt die Vorschau im Nachrichten-Editor während der Entwicklung. Führen Sie Testsendungen und Prüfungen des Live-Pfads durch, bevor Sie den Versand an Kund:innen starten.
• Ein capture-Block allein speichert JSON als String. Referenzieren Sie Felder erst, nachdem Sie json_parse angewendet haben – andernfalls kann die Vorschau leer bleiben.
• Mock-JSON muss gültig sein. Ungültiges JSON führt dazu, dass json_parse fehlschlägt oder unerwartete Strukturen zurückgibt.
• Ersetzen oder entfernen Sie Mock-Blöcke vor dem Launch, oder sichern Sie Ihr Liquid für die Produktion so ab, dass Mock-Daten nur in der Vorschau verwendet werden (zum Beispiel mit einem Kommentar-Flag, das Sie vor dem Go-live löschen).
• Die Liquid-Snippets in diesem Artikel sind Beispiele. Testen Sie sie in Ihren Kanälen und mit den tatsächlichen Strukturen Ihrer Payloads.
• Wenn Sie Connected-Content in der Produktion verwenden, entfernen Sie den Mock-Block und nutzen Sie Ihr Live-URL-Tag. Siehe API-Aufruf durchführen.

Einrichtung

Dieses Beispiel simuliert eine Connected-Content-ähnliche Antwort mit einer Produktliste für eine E-Mail, die über listings iteriert.

Schritt 1: Mock-JSON in der Nachricht erfassen

Verwenden Sie capture, um den JSON-String zu speichern. Verwenden Sie innerhalb des Blocks gültige JSON-Syntax (doppelte Anführungszeichen bei Schlüsseln und String-Werten).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{% capture mock_response %}
{
  "success": true,
  "listings": [
    {
      "id": 45731,
      "name": "Summit Trail Jacket",
      "image_url": "https://example.com/images/trail-jacket.png",
      "price": {
        "actual": "89.00",
        "currency": "USD"
      },
      "link": "https://example.com/products/trail-jacket",
      "product_category": "Outerwear",
      "properties": {
        "size": "L",
        "colour": "Navy",
        "limited_edition": false
      },
      "out_of_stock": false
    }
  ]
}
{% endcapture %}

Schritt 2: JSON mit json_parse parsen

Weisen Sie die geparste Struktur einer Variablen zu, die Sie im Rest der Nachricht referenzieren.

1

{% assign response_json = mock_response | json_parse %}

Ohne json_parse wird die Punktnotation auf dem erfassten String (zum Beispiel {{ mock_response.listings }}) in der Vorschau in der Regel leer angezeigt.

Schritt 3: Geparste Felder in Liquid referenzieren

Iterieren Sie über das geparste Array und rendern Sie die Felder so, wie Sie es bei einer echten API-Antwort tun würden.

1
2
3

{% for listing in response_json.listings %}
{{ listing.name }} — {{ listing.price.actual }} {{ listing.price.currency }}
{% endfor %}

Gehen Sie im Nachrichten-Editor zum Bereich Vorschau und prüfen Sie, ob die Felder korrekt gerendert werden.

Schritt 4: Dasselbe Muster auf andere JSON-Strukturen anwenden

Verwenden Sie denselben Ablauf aus capture + json_parse, um Folgendes zu simulieren:

Ersetzen Sie die Mock-Variablen vor dem Start durch produktives Liquid (Canvas-Kontextvariablen, angepasste Attribute oder Connected-Content-Tags).

Verwandte Artikel

• Testnachrichten senden
• Nutzerpfade in Canvas in der Vorschau anzeigen
• Erweiterte Liquid-Filter (json_parse)
• Connected-Content
• Array von Objekten
• Kontextvariablen