Anmelden

Flow-Formular-Shortcodes und Elementor-Widgets

Flow lassen sich über Shortcodes und Elementor-Integrationen außerhalb von Gutenberg wiederverwenden.

Shortcodes​

[smartcloud-flow-form id="..."]​

Verwenden Sie diesen Shortcode, wenn der referenzierte wiederverwendbare Block oder das Pattern einen Flow-Formularblock enthält.

Der Shortcode rendert ein Flow-Formular aus einer referenzierten Block- oder Pattern-Quelle. Attributnamen werden zwischen camelCase, kebab-case und snake_case normalisiert.

In Bereitstellungen mit Laufzeit-Konfigurationsüberschreibungen können Sie auch codierte Konfigurationsnutzlasten wie configB64 von der Hostseite übergeben.

Zeichenketteneinstellungen der Laufzeit können dieselben Interpolationstokens verwenden, die auf der Seite zur JavaScript-API beschrieben sind. So kann endpointPath etwa auf {{location.origin}}/contact, {{wpsuite.apiBaseUrl}}/contact oder {{global.MyApp.forms.submitUrl}} gesetzt werden, wenn diese globalen Werte auf der Hostseite verfügbar sind.

Bei einem benutzerdefinierten Übermittlungsendpunkt können Sie endpointMethod außerdem auf GET, POST, PUT oder PATCH setzen. Ohne Angabe verwendet Flow weiterhin POST. Mit GET sendet Flow die serialisierten Feldwerte als URL-Abfrageparameter. Zusätzliche browserseitige Anfrage-Header lassen sich über endpointHeaders als JSON-Objektzeichenkette angeben, zum Beispiel {"X-Request-Source":"wpsuite"}. Headerwerte unterstützen dieselben Laufzeit-Interpolationstokens wie endpointPath. Werte wie {"X-Post-Id":"{{wp.postId}}","X-Email":"{{email}}"} werden daher beim Absenden aufgelöst.

[smartcloud-flow-form id="123"]

[smartcloud-flow-content-root id="..."]​

Verwenden Sie diesen Shortcode, wenn der referenzierte wiederverwendbare Block oder das Pattern einen Flow-Content-Root-Block enthält.

Damit können Sie einen gespeicherten Flow-Inhaltscontainer und seine untergeordneten Darstellungs- und Layoutblöcke außerhalb von Gutenberg rendern, ohne eine Formularinstanz einzubetten. Der Shortcode verwendet dieselbe Attributnamensnormalisierung wie der Formular-Shortcode.

Häufige Überschreibungen sind language, direction, colorMode, primaryColor und themeOverrides. Zusätzliche verschachtelte Konfiguration kann im Shortcode-Inhalt als Mini-YAML angegeben werden, etwa für colors, primaryShade oder fieldOverrides.

[smartcloud-flow-content-root id="456" colormode="dark"]
primaryShade:
  light: 5
  dark: 8
[/smartcloud-flow-content-root]

[smartcloud-flow-modal id="..."]​

Verwenden Sie diesen Shortcode, wenn der referenzierte wiederverwendbare Block oder das Pattern einen Flow-Modal-Block enthält.

Der Shortcode rendert die gespeicherte modale Flow-Struktur und akzeptiert dieselbe Normalisierung von camelCase-, kebab-case- und snake_case-Attributen wie die bestehenden Flow-Shortcodes. Überschreibungen des Modalverhaltens wie modalId, showCloseButton, closeButtonLabel, allowBodyFullscreen, size, position, mobileBehavior, backdropStyle und die Schalter für das Schließverhalten können direkt am Shortcode angegeben werden.

[smartcloud-flow-modal id="789" modalid="product-gallery" allowbodyfullscreen="true"]

Elementor​

Flow enthält außerdem eine Elementor-Integration, mit der sich Flow-Blöcke in Elementor-Layouts einbetten lassen.

Verfügbare Widgets:

  • Flow Form
  • Flow Content Root
  • Flow Modal

Steuerelemente zum Überschreiben von Widget-Werten können im Zustand „Übernehmen“ bleiben. Dann gibt das Widget das zugehörige Shortcode-Attribut nicht aus und der im referenzierten Flow-Pattern gespeicherte Originalwert bleibt wirksam. Für Optionen wie die Sichtbarkeit der Schließen-Schaltfläche und den Vollbildmodus des Inhalts gilt beim Modal-Widget dieselbe Regel.

Laufzeitverhalten​

Shortcode- und Elementor-Pfade verwenden für gemeinsame Flow-Rendering-Aufgaben dieselbe Laufzeitoberfläche wie die Gutenberg-Ausgabe:

  • Dieselben smartcloud-flow:*-Laufzeitereignisse steigen weiterhin zur Hostseite auf.
  • Dieselben Theme-Überschreibungen und --flow-*-Tokens gelten innerhalb des Shadow Root.
  • Dieselbe gespeicherte Flow-Blockstruktur dient als Rendering-Quelle.

Speziell beim Rendern von Flow-Formularen bleibt auch das bestehende Übermittlungsverhalten erhalten:

  • Das Formular kann weiterhin direkt aus dem Browser an die pro Formular konfigurierte Endpunkt-URL senden.
  • Benutzerdefinierte Übermittlungsendpunkte berücksichtigen die konfigurierte endpointMethod (GET, POST, PUT oder PATCH).
  • Backendgestützte Formulare verwenden weiterhin den konfigurierten Flow-Backend-Transport.
  • Assistenten-, Erfolgsansichts-, Entwurfs- und KI-Vorschlagsverhalten funktionieren weiterhin.