Comment utiliser Liquid pour créer des formulaires robustes pour les thèmes Shopify

Comment utiliser Liquid pour créer des formulaires robustes pour les thèmes Shopify

Si vous créez des formulaires sur Shopify, vous savez qu'ils peuvent être très utiles sur les boutiques pour l'inscription des clients, les commentaires sur les blogs, l'envoi de messages aux marchands et même pour l'ajout de variantes de produit au panier. Puisqu'ils sont l'un des principaux vecteurs de communication entre vos clients et leurs acheteurs, ils doivent absolument être fiables et intuitifs.

Ne faites pas l'erreur courante de les délaisser au profit d'autres composants plus dynamiques de la boutique en ligne de vos clients, comme les champs méta Shopify. En termes de fonctionnalité, les formulaires jouent un rôle majeur pour les interactions d'un acheteur avec une boutique.

La création de formulaires est une tâche répétitive et sujette aux erreurs lorsque l'on part de zéro. Heureusement, plusieurs éléments Liquid permettent de créer des formulaires de façon plus simple et plus fiable, en générant automatiquement le code nécessaire au transfert des données vers le point de terminaison approprié.

Dans cet article, nous découvrirons comment utiliser Liquid pour simplifier la création de formulaires sur Shopify en générant des éléments d'entrée, en identifiant les erreurs et en affichant des messages aux acheteurs. Nous verrons aussi quels sont les types de formulaires disponibles.

Qu'est-ce qu'une balise form ?

La balise Liquid form génère un élément HTML <form>, ainsi que les éléments d'entrée (input) nécessaires pour envoyer les données soumises à un point de terminaison spécifique. Avec cette balise, les actions et les valeurs sont automatiquement assignées lors de la création de différents types de formulaires sur les pages Shopify.

La balise form vous permet, en tant que développeur, d'ajouter rapidement et efficacement des formulaires à vos projets, sans avoir à écrire le code complet décrivant les actions à effectuer ou le point de terminaison à cibler. Non seulement cela vous fait gagner du temps, mais cela permet aussi de réduire le risque d'erreur humaine lors de la création de formulaires pour la connexion, les commentaires sur des articles de blog ou l'envoi de messages aux marchands.

Lorsque la balise form est utilisée en spécifiant un type, un élément HTML <form> est créé, avec les éléments d'entrée qui sont utilisés par le point de terminaison pour décider de la façon de traiter les données soumises ou de l’action à effectuer. Selon le type de formulaire choisi, différents éléments d'entrée sont générés pour exécuter l'action requise.

Les champs d'entrée automatiquement créés se connectent aux points de terminaison du serveur Shopify, et aucun de ces champs d'entrée créés par la balise form n'est destiné à une interaction avec les utilisateurs. Cela signifie que vous ajouterez manuellement les champs d'entrée pour les adresses e-mail ou les mots de passe des clients, alors que la balise se chargera d'envoyer les données aux serveurs Shopify.

Un exemple de balise form

Comme nous l'avons vu, la balise form est une méthode plus fiable que de créer un formulaire en HTML. Prenons l'exemple de la création d'un formulaire de connexion client. Sans la balise form, vous devriez écrire un code du type :

<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/login" id="customer_login" method="post">
<input name="form_type" type="hidden" value="customer_login" />
<input name="utf8" type="hidden" value="✓" />
<!--code for input fields and labels-->
</form>

La balise form permet de remplacer tout le code ci-dessus par ce balisage simplifié :

{% form 'customer_login' %}
<!--code for input fields and labels-->
{% endform %}

Nous voyons dans cet exemple que la balise ouvrante form peut également inclure un « type », qui est dans notre cas customer_login. Il existe 13 types de formulaires différents, qui génèrent des éléments <form> et <input> spécifiques pour chaque utilisation. Nous reviendrons plus tard sur les différents types de formulaires actuellement disponibles.

Bien que la balise form crée les éléments <form> et <input> nécessaires pour envoyer les données à un point de terminaison spécifique, nous devons créer les éléments d'entrée avec lesquels les clients finaux interagiront.

Par exemple, pour que notre formulaire de connexion client soit utilisable, nous devons créer des champs où entrer une adresse e-mail et un mot de passe, ainsi qu'un bouton Soumettre. Une fois ces éléments ajoutés dans les balises form, le code sera le suivant :

Le formulaire se présentera ainsi sur l'interface de la boutique en ligne :

Créer un formulaire sur l'interface d'une boutique en ligne

Consultez nos exemples de code Liquid pour voir un modèle entièrement fonctionnel de formulaire de connexion client, et même l'utiliser comme base de départ pour vos propres créations.

Paramètres supplémentaires

Dans certains cas, des paramètres supplémentaires doivent être ajoutés dans la balise form pour cibler un objet spécifique. Par exemple, le formulaire utilisé pour envoyer un commentaire sur un article de blog nécessite le type new_comment ainsi qu'un objet article en tant que paramètre :

{% form 'new_comment', article %}
<!--code for input fields and labels-->
{% endform %}

Le résultat sera le suivant :

<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments"
class="comment-form" id="article-10582441-comment-form" method="post">
<input name="form_type" type="hidden" value="new_comment" />
<input name="utf8" type="hidden" value="✓" />
<!--code for input fields and labels-->
</form>

Dans cet exemple, le paramètre article permet au formulaire d'associer le nouveau commentaire à l'article de blog correspondant. Les formulaires dédiés à des produits, listes d'adresses client et nouveaux commentaires d'articles nécessitent tous des paramètres supplémentaires.

Les différents types de formulaires Liquid

Treize types de formulaires Liquid spécifiques sont disponibles pour les différentes interactions des clients finaux avec une boutique ou l'envoi de données. Comme nous l'avons expliqué dans notre exemple de formulaire d'inscription, la balise form exige un attribut type pour créer un formulaire.

Les types de formulaires prédéfinis sont les suivants :

  • activate_customer_password
  • contact
  • currency
  • customer
  • create_customer
  • customer_address
  • customer_login
  • guest_login
  • new_comment
  • product
  • recover_customer_password
  • reset_customer_password
  • storefront_password

Des exemples de chacun de ces formulaires et des éventuels paramètres supplémentaires requis sont présentés dans notre centre d'aide.

Utilisation de logique conditionnelle dans les formulaires

Certains types de formulaires nécessitent des fonctionnalités supplémentaires, comme la réinitialisation d'un mot de passe oublié ou l'affichage d'une erreur lorsque des données non valides sont envoyées. Nous pouvons utiliser des balises de contrôle de flux pour définir des règles qui permettront d'afficher un contenu prédéfini si un événement spécifique se produit (par exemple, afficher un message d'erreur lorsqu'une adresse e-mail non valide est saisie).

L'objet Liquid form.errors et le filtre Liquid default_errors sont très utiles lorsque des données sont manquantes ou incorrectes dans un formulaire, car ils vous permettent d'afficher des messages d'erreur par défaut.

L'objet form.errors génère ou renvoie un tableau de chaînes si un formulaire a été incorrectement rempli. Les chaînes renvoyées dépendent des champs du formulaire qui ont été laissés vides ou contenaient des erreurs. Les valeurs renvoyées peuvent être les suivantes :

  • author
  • body
  • email
  • form

Cet objet nous permet d'identifier et de renvoyer la partie du formulaire qui n'a pas été correctement remplie. Si nous souhaitons afficher le type d'erreur faite par l'utilisateur, nous pouvons configurer une itération pour une boucle comme ceci :

{% for error in form.errors %}
{{ error }}
{% endfor %}

Dans l'exemple ci-dessus, si un client entre une adresse e-mail incorrecte, la valeur email est renvoyée. Nous pouvons donc utiliser cette information et appliquer le filtre default_errors pour afficher automatiquement un message d'erreur prédéfini.

Le filtre default_errors renvoie un message spécifique en fonction de la chaîne renvoyée par l'objet form.errors. En pratique, pour voir cela, nous utiliserions les balises de contrôle de flux pour créer l'instruction if dans nos balises {% form %} :

{% if form.errors %}
{{ form.errors | default_errors }}
{% endif %}

Ainsi, un utilisateur qui a entré une adresse e-mail incorrecte verra un message lui suggérant d’entrer une adresse e-mail valide.

Vous devez impérativement ajouter ces règles conditionnelles à vos thèmes personnalisés pour vous assurer que les clients finaux voient les messages appropriés s'ils entrent des données non valides. Ainsi, Liquid peut être utilisé pour afficher aux acheteurs les bons messages d'erreurs aux bons moments sur la boutique de votre client.

Formulaires et fonctionnalités

Maintenant que vous savez comment les objets, balises et filtres Liquid peuvent être utilisés conjointement pour créer des formulaires robustes, vous pouvez ajouter d'autres fonctionnalités aux formulaires que vous créez sur Shopify en ajoutant des champs personnalisés adaptés aux exigences de vos clients, ou en modifiant les attributs du formulaire.

Quelle que soit la façon dont vous créez ou concevez vos formulaires, l'utilisation des éléments Liquid pertinents vous aidera à garantir leur fiabilité et leur cohérence. Nous espérons que cet article vous aura permis de mieux comprendre comment Liquid peut vous aider pour vos projets de formulaires et de thèmes.

Rejoignez le programme des partenaires de Shopify

Inscrivez-vous gratuitement au programme partenaire de Shopify. Accédez à des outils et ressources pour aider les marchands Shopify à développer leur activité et faites partie d’un écosystème riche en opportunités.

Devenir partenaire Shopify

Which method is right for you?Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Liam Griffin. Traduction par Solenn Marchand.

Développez votre entreprise avec le programme Partenaires Shopify

En savoir plus