Utiliser des variables dynamiques pour traduire les éléments de formulaire personnalisés
Découvrez comment les variables dynamiques peuvent créer des invites de connexion multilingues.
Vous pouvez afficher les personnalisations de Sign-Up Prompt Customizations (Personnalisations de l’invite d’inscription) différemment selon les données contextuelles. La variable locale est utilisée pour afficher conditionnellement les champs du formulaire et définir le comportement de validation.Le cas d’utilisation suivant fonctionne avec la variable locale pour afficher un message de conditions d’utilisation et une case à cocher. Toute variable exposée à Page Templates (Modèles de pages) peut être substituée.
Rendre conditionnellement les champs personnalisés
Utilisez le pour ajouter un modèle partiel à l’invite d inscription Conteneur d’invite de connexion universelle form-content-end. Dans le cas où le paramètre régional est es ou fr, vous souhaiterez peut-être afficher un message de conditions d’utilisation et une case à cocher.
Copy
Ask AI
{% if locale == 'fr' %} <div class="ulp-field"> <input type="checkbox" name="ulp-terms-of-service" id="terms-of-service"> <label for="terms-of-service"> J'accepte les <a href="https://fr.example.com/tos">termes et conditions</a> </label> </div>{% endif %}{% if locale == 'es' %} <div class="ulp-field"> <input type="checkbox" name="ulp-terms-of-service" id="terms-of-service"> <label for="terms-of-service"> Estoy de acuerdo con los <a href="https://es.example.com/tos">términos y condiciones</a> </label> </div>{% endif %}
La demande suivante est envoyée au point terminal Set custom text for a specific prompt (Définir un texte personnalisé pour une invite spécifique) dans la Management API :
Copy
Ask AI
// PUT prompts/signup/partials{ "signup": { "form-content-end": "{% if locale..." }}
Votre invite d’inscription affiche désormais un message de conditions d’utilisation et une case à cocher uniquement lorsque les paramètres régionaux sont définis sur fr ou es :
Lorsque le paramètre régional est fr, vous pouvez valider que la case est cochée avant de continuer. Mettez à jour le modèle partiel à l’aide du code de validation suivant :
Copy
Ask AI
{% if locale == 'fr' %} <div class="ulp-field"> <input type="checkbox" name="ulp-terms-of-service" id="terms-of-service"> <label for="terms-of-service"> J'accepte les <a href="https://fr.example.com/tos">termes et conditions</a> </label> <!-- NEW --> <div class="ulp-error-info" data-ulp-validation-function="requiredFunction" data-ulp-validation-event-listeners="change"> Vous devez accepter les termes et conditions pour continuer </div> <!-- END NEW --> </div>{% endif %}{% if locale == 'es' %} <div class="ulp-field"> <input type="checkbox" name="ulp-terms-of-service" id="terms-of-service"> <label for="terms-of-service"> Estoy de acuerdo con los <a href="https://es.example.com/tos">términos y condiciones</a> </label> </div>{% endif %}<!-- NEW --><script> function requiredFunction(element, formSubmitted) { if (! formSubmitted) { return true; } return element.checked; }</script><!-- END NEW -->
fr.
Les validations dans ce cas d’utilisation se font côté client et sont destinées à faciliter la tâche de l’utilisateur. Leur fonctionnement n’est pas garanti; par exemple, le navigateur de l’utilisateur peut avoir désactivé Javascript. En outre, les validations peuvent être modifiées par des acteurs curieux ou malveillants. Pour garantir l’intégrité de la logique de validation, les validations côté client doivent être associées à des validations côté serveur.