Se connecter

Shortcodes de formulaires Flow et widgets Elementor

Flow peut être réutilisé en dehors de Gutenberg via des intégrations shortcode et Elementor.

Shortcodes​

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

Utilisez ce shortcode lorsque le bloc / motif réutilisable référencé contient un bloc Flow Form.

Le shortcode rend un formulaire Flow à partir d’une source de bloc / motif référencée. Les noms d’attribut sont normalisés entre camelCase, kebab-case et snake_case.

Dans les déploiements qui utilisent des substitutions de configuration runtime, vous pouvez aussi transmettre depuis la page hôte des charges utiles de configuration encodées telles que configB64.

Les paramètres de chaîne runtime peuvent aussi utiliser les mêmes jetons d’interpolation que ceux décrits dans la page de l’API JavaScript. Par exemple, endpointPath peut être défini sur des valeurs telles que {{location.origin}}/contact, {{wpsuite.apiBaseUrl}}/contact ou {{global.MyApp.forms.submitUrl}} lorsque ces globals sont disponibles sur la page hôte.

Lorsqu’un formulaire utilise un point de terminaison de soumission personnalisé, vous pouvez aussi définir endpointMethod sur GET, POST, PUT ou PATCH. S’il est omis, Flow continue d’utiliser POST. Avec GET, Flow envoie les valeurs de champ sérialisées sous forme de paramètres de requête d’URL. Des en-têtes de requête supplémentaires côté navigateur peuvent être fournis via endpointHeaders sous la forme d’une chaîne JSON d’objet, par exemple {"X-Request-Source":"wpsuite"}. Les valeurs d’en-tête prennent en charge les mêmes jetons d’interpolation runtime que endpointPath, de sorte que des valeurs comme {"X-Post-Id":"{{wp.postId}}","X-Email":"{{email}}"} sont résolues au moment de la soumission.

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

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

Utilisez ce shortcode lorsque le bloc / motif réutilisable référencé contient un bloc Flow Content Root.

C’est utile lorsque vous souhaitez afficher un conteneur de contenu Flow enregistré et ses blocs enfants d’affichage/mise en page en dehors de Gutenberg sans intégrer une instance de formulaire. Le shortcode utilise la même normalisation des noms d’attribut que le shortcode de formulaire.

Les substitutions courantes incluent language, direction, colorMode, primaryColor et themeOverrides. Une configuration imbriquée supplémentaire peut aussi être fournie dans le corps du shortcode sous forme de mini-YAML, par exemple pour colors, primaryShade ou fieldOverrides.

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

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

Utilisez ce shortcode lorsque le bloc / motif réutilisable référencé contient un bloc Flow Modal.

Le shortcode rend la structure enregistrée de la modale Flow et accepte la même normalisation camelCase, kebab-case et snake_case des attributs que les shortcodes Flow existants. Les substitutions de comportement modal telles que modalId, showCloseButton, closeButtonLabel, allowBodyFullscreen, size, position, mobileBehavior, backdropStyle et les indicateurs de comportement de fermeture peuvent toutes être fournies directement dans le shortcode.

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

Elementor​

Flow inclut aussi une intégration Elementor afin que les blocs Flow puissent être intégrés dans des mises en page pilotées par Elementor.

Widgets disponibles :

  • Flow Form
  • Flow Content Root
  • Flow Modal

Les contrôles de substitution de widget peuvent être laissés à l’état d’héritage. Dans ce cas, le widget n’émet pas l’attribut shortcode correspondant, de sorte que la valeur d’origine stockée dans le motif Flow référencé reste effective. Le widget modal suit la même règle pour des options telles que la visibilité du bouton de fermeture et la prise en charge du plein écran du corps.

Comportement runtime​

Les chemins shortcode et Elementor conservent la même surface runtime que la sortie Gutenberg pour les aspects de rendu Flow partagés :

  • les mêmes événements runtime smartcloud-flow:* continuent de remonter jusqu’à la page hôte,
  • les mêmes substitutions Theme Overrides et les mêmes jetons --flow-* continuent de s’appliquer à l’intérieur du shadow root,
  • la même structure enregistrée de blocs Flow est utilisée comme source de rendu.

Pour les rendus Flow Form en particulier, le comportement de soumission existant reste aussi le même :

  • le formulaire peut toujours être soumis directement depuis le navigateur vers l’URL de point de terminaison configurée pour le formulaire,
  • les points de terminaison de soumission personnalisés respectent désormais le endpointMethod configuré (GET, POST, PUT ou PATCH),
  • les formulaires conscients du backend utilisent toujours le transport Flow backend configuré,
  • le comportement du wizard, de l’état de succès, du brouillon et des suggestions IA fonctionne toujours,