Den Advanced editor verwenden
Im Advanced editor gestalten Sie, wie der Assistent aussieht und sich verhält – live und mit sofortigem Feedback. Er teilt den Bildschirm in drei Bereiche: die Live-Vorschau des Assistenten links, den Code-Editor in der Mitte und den Dateibrowser rechts.
Die drei Bereiche
| Bereich | Funktion |
|---|---|
| Live-Vorschau (links, ca. 35 %) | Eine echte Instanz Ihres Assistenten, die im Editor läuft. Bei jedem Speichern startet sie automatisch neu, sodass Sie Änderungen sofort sehen. |
| Code-Editor (Mitte) | Ein Monaco-basierter Editor mit Syntaxhervorhebung für Liquid (Templates) und JavaScript (Helper). Bietet Autovervollständigung für Liquid-Tags ({% if %}, {% for %}, {% include %} usw.) und Echtzeit-Validierung ausgeglichener Begrenzer und verschachtelter Blöcke. |
| Dateibrowser (rechter Bereich, ein-/ausblendbar) | Listet alle Templates und Helper alphabetisch auf, gruppiert in Layout Templates und Template Helpers. Klicken Sie auf einen Eintrag, um ihn in den Editor zu laden. |
Die Editor-Symbolleiste
Die Symbolleiste oben im Code-Editor bietet schnellen Zugriff auf alle Aktionen:
| Aktion | Funktion |
|---|---|
| Save | Speichert die aktuellen Änderungen in der Konfiguration des Assistenten und startet die Live-Vorschau neu. Nur aktiv, wenn es ungespeicherte Änderungen gibt. |
| Add → Add Template | Erstellt ein neues benanntes Liquid-Template (alphanumerische ID). |
| Add → Add Template Helper | Erstellt eine neue JavaScript-Helper-Funktion. |
| Test code | (Nur Helper) Öffnet eine JSON-Eingabe für Parameter, führt dann den Helper aus und zeigt den Rückgabewert im Debug-Bereich. |
| Delete / Return to default | Entfernt Ihre Überschreibung für das ausgewählte Template bzw. den Helper und stellt die integrierte Standardversion wieder her. |
| Toggle assistant (Käfer-Symbol) | Blendet den Live-Vorschau-Bereich ein oder aus – praktisch, um dem Editor mehr Platz zu geben. |
| Toggle files (Ordner-Symbol) | Blendet den Dateibrowser ein oder aus. |
Die Assistenten-Symbolleiste
Über der Live-Vorschau steuert eine zweite Symbolleiste die Instanz des Assistenten:
| Aktion | Funktion |
|---|---|
| Show debug info | Schaltet den Vorschaubereich in den Debug-Modus – einen JSON-Viewer, der Laufzeitfehler, Rückgabewerte von Helpern und den Template-Zustand anzeigt. |
| Show assistant | Wechselt vom Debug-Modus zurück zum Live-Assistenten. |
| Restart assistant | Startet den eingebetteten Assistenten manuell neu, ohne zu speichern. |
| Clear debug | Leert die Debug-Ausgabe. |
Der Arbeitsablauf
- Öffnen Sie die Konfiguration des Assistenten und wechseln Sie zum Tab Advanced editor.
- Öffnen Sie den Dateibrowser (Ordner-Symbol) und wählen Sie ein Template oder einen Helper zum Bearbeiten.
- Bearbeiten Sie den Code. Der Editor validiert Liquid in Echtzeit – rote Markierungen zeigen nicht geschlossene Blöcke, unausgeglichene Begrenzer oder nicht zusammenpassende Tags.
- Klicken Sie auf Save – der Assistent startet im Vorschaubereich mit Ihren Änderungen neu.
- Wenn etwas nicht funktioniert, wechseln Sie in den Debug-Modus, um den Fehler zu sehen, korrigieren Sie den Code und speichern Sie erneut.
- Nutzen Sie bei Helpern Test code, um die Funktion mit Beispielparametern auszuführen und den Rückgabewert im Debug-Bereich zu prüfen.
Tipps
- Gehen Sie vom Standard-Template aus – öffnen Sie es im Dateibrowser, kopieren Sie das Liquid in eine neue Überschreibung und ändern Sie nur, was nötig ist. So bleibt die gesamte Verdrahtung (Helper, Klassen, Data-Attribute) erhalten, von der der Assistent abhängt.
- Aktivieren Sie
isDebug: truebeim Einbetten während der Entwicklung – dann wird der vollständige Template-Zustand in der Konsole protokolliert. - Der Editor funktioniert nur auf Desktop-Bildschirmen. Auf Mobilgeräten oder schmalen Viewports zeigt er stattdessen eine Warnung.