Étiquette : formulaire

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML

Testé fonctionnel Magento 2.4 CE. Source: Magento 2: Call customer login page in other phtml.

[Magento 2] Utiliser .addMethod() pour remplacer un libellé de message d’erreur de saisie dans un champ de formulaire (via la librairie jQuery Validate)

Testé fonctionnele Magento 2.4. Sources:

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

Attention: astuce fonctionnelle sur une version de Magento 2.4 Enterprise. Je crois que toute la partie attributs des customers n’est pas disponible en version Community Edition. Mais cette astuce pourrait très bien fonctionner avec les deux versions.

PHTML à modifier

Créer le fichier de surcharge app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/name.phtml pour remplacer l’élément Select par des boutons Radio:

A savoir:

Sans ajouter le bout de code ci-dessous, l’information sur le préfixe coché lors de l’inscription ne sera PAS récupérée pour des affichages ultérieurs des préfixes dans les pages du site.

Par exemple, dans la page « Modifier les informations de mon compte », les boutons radio représentant les préfixes disponibles s’affichaient bien, mais celui qui avait été coché lors de l’inscription n’était pas coché!

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

  • Se rendre dans STORES > Attributes > Customer
  • Dans la liste des attributs, sélectionner l’Attribute Code « prefix »
  • Scroller jusqu’au volet « Storefront Properties »
  • Passer le champ « Show on Storefront » à « Yes »
  • Cliquer sur le bouton orange « Save Attribute »
  • Se rendre ensuite dans STORES > Settings > Configuration
  • Passer le Scope au store voulu
  • Dans la navigation de gauche, aller dans CUSTOMERS > Customers Configuration
  • Ouvrir le volet « Name and Address Options »
  • Au niveau du champ « Prefix Dropdown Options », décocher la case « Use Defaults »
  • Dans le champ « Prefix Dropdown Options », saisir les préfixes séparés par des point-virgules (exemple: Madame;Mademoiselle;Monsieur)
  • Cliquer sur le bouton orange « Save Config »
  • Se rendre ensuite dans SYSTEM > Tools > Cache Management
  • Cocher les « Cache Type » « Configuration » et « Page Cache » (leur « Status » est normalement en « INVALIDATED »
  • Au niveau de la liste de sélection située en haut à gauche du tableau, sélectionner « Refresh » et cliquer sur le bouton gris « Submit »

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

Testé fonctionnel Magento 2.3, 2.4

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

Apporter plus d’attention au passages suivants:

  • data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
  • <script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Code CSS à mettre en place:

[jQuery] Vider des champs de formulaire de manière dynamique

Dans cet exemple, on vide tous les champs de formulaire enfant de l’élément qui a la classe .form-group.hidden

[jQuery] Des plugins pour gérer des actions conditionnelles (notamment afficher/masquer des champs de formulaire)

conditionize2.js

A flexible jQuery plugin for conditional actions (like showing and hiding elements, triggering events or whatever else you need) based on values of one or many fields. This is an improved version of conditionize.js jQuery plugin. Unlike the previous version, conditionize2.js is not restricted to only show and hide actions. But for simpler migration from conditionize.js to conditionize2.js, show/hide is the default behaviour.

A lot of EXAMPLES available here.

dependsOn

A jQuery plugin to facilitate the handling of form field dependencies. Demo.

[jQuery] Détecter quel bouton est cliqué lors de la soumission d’un formulaire

Source : jquery detect which button submitted form

Attention: ne fonctionne qu’avec l’élément <input />, pas avec les éléments <a />, <button />.

[jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax

Source: Form Submission without page refresh

[Foundation 6] Réinitialiser les styles par défaut pour l’élément HTML de formulaire Input

Source: Cleanest way to customize input[type=’text’] styles, codewise.

Depuis quelques semaines (et deux projets en cours de production), je décortique avec grand intérêt le framework front-end responsive Foundation 6 for sites créé et maintenu par Zurb. J’utilise Bootstrap 3 depuis sa première release stable (et Bootstrap 2 avant ça). Mais Bootstrap 4 étant encore en version Alpha j’ai décidé, pour voir, de me tourner vers une solution que je considère comme étant son principal challenger (la première version stable de Foundation 6 ayant vu le jour il y a plus d’un an).

Les possibilités offertes par Foundation 6 en terme d’habillage des champs de formulaire

Dans Foundation 6, les styles de l’ensemble des champs de saisie textuelle des formulaires (text, password, date, datetime, datetime-local, month, week, email, number, search, tel, time, url, color mais aussi l’élément HTML textarea) sont générés à partir d’une fonction text-inputs.

Cette fonction est déclarée dans le fichier /scss/util/_selector.scss du framework et se présente comme ceci:

C’est ensuite à l’aide d’un mixin foundation-form-text déclaré dans le fichier /scss/forms/_text.scss du framework que toute la batterie de styles par défaut pour l’élément input, l’ensemble de ses itérations
et l’élément textarea sont générés. Ce mixin se présente comme ceci (extrait) :

Le code CSS qui en résulte ressemble à ceci (extrait) :

Annuler les styles par défaut sur une sélection d’éléments

A ce stade, nous pourrions avoir besoin d’annuler les styles par défaut sur une sélection d’éléments pour repartir from-scratch (le bon vieux concept de reset CSS) et habiller un ou plusieurs champs de notre charte qui se démarquent visuellement des standards (un champ « Recherche » dans le bandeau de votre site ou un champ d’inscription à la « Newsletter » en pied de page par exemple; cette contrainte se présente quasi systématiquement).

Pour annuler les styles standards pour l’élément de formulaire input, nul besoin d’écrire un reset. Il faut surcharger le mixin foundation-form-text en passant en paramètre $modifier une pseudo-classe :not() à laquelle on attribuerait une classe générique, mais au libellé suffisamment parlant (par exemple, .is-unstyled (extrait):

La sortie CSS sera alors la suivante (extrait):

Désormais, un <input type="text" class="is-unstyled" /> ne sera plus affecté par les styles standard de Foundation 6. Pas besoin d’alourdir son code CSS avec quantité de styles reset pour annuler les déclarations par défaut. On peut se concentrer sur notre habillage custom.

Petit conseil: n’utilisez cette classe .is-unstyled que pour signifier, dans votre code HTML, quels éléments input ne doivent pas hériter des styles standards de Foundation 6. Pour les styler différemment, ajoutez une classe supplémentaire. Exemple:

Pour finir, sachez que vous pouvez faire appel à la fonction text-inputs à (quasiment) n’importe quel endroit dans votre code SCSS pour déclarer des styles spécifiques pour un élément donné ou toute une batterie d’éléments à la fois.

Quid des possibilités offertes par Bootstrap 4 en terme d’habillage des champs de formulaire?

De prime abord, on peut trouver ça déroutant que les styles soient appliqués à des attributs d’éléments plutôt que sur les éléments eux-mêmes via des classes, surtout si on est habitué à la logique Bootstrap 3 ou 4 et à ses classes .form-group et .form-control à appliquer sur des <div> englobantes ou sur les éléments eux-mêmes. Les styles Foundation 6 habillent d’office l’ensemble des champs de formulaires et c’est embêtant quand on veut s’affranchir de la patte graphique « Foundation » pour afficher certains formulaires.

Mais dans la pratique et avec les contraintes du terrain, la décision s’avère extrêmement pertinente (surcharge de toute la batterie de champs de formulaires d’un coup !).

Il faut le reconnaître, les formulaires sont c$%!§£s à habiller. J’ai voulu faire un test très simple: j’ai récupéré le code HTML d’un formulaire sur un site réalisé avec Drupal 7 (donc n’intégrant ni Bootstrap, ni Foundation pour que la structure HTML reste totalement neutre) et le module Webform. J’ai ensuite appliqué tour à tour la CSS sortie-de-la-boite de Bootstrap 4 et de Foundation 6 sans modifier de code ni HTML, ni CSS.

N’hésitez pas à agrandir/réduire la fenêtre en largeur pour tester l’aspect Responsive.

Avec Foundation 6, la mise en page est propre. Les champs sont habillés de manière minimaliste et le tout est parfaitement Responsive. Si votre client ne souhaite pas investir trop d’argent dans les formulaires, vous n’avez quasiment aucun travail à faire (minus peut-être les boutons à habiller) sur ce point pour obtenir un affichage convenable.

Avec Bootstrap 4, rien n’est habillé. Rien n’est Responsive. Et pour cause, les classes .form-group et autre .form-control doivent être rajoutées dans le code HTML pour obtenir un résultat (on peut aussi passer par SASS pour faire pointer les styles des classes Bootstrap sur les classes déjà en place). Au travail les développeurs front-end!!

Conclusion

A partir du moment où on décide d’aborder Foundation 6, on ne peut échapper à la comparaison avec Bootstrap 4. Chaque fois que j’en parle autour de moi, mes interlocuteurs veulent savoir si c’est mieux.

Comme je le disais en introduction, j’ai utilisé Bootstrap pendant des années. J’en connais ses points forts et ses points faibles et force est de constater que ces derniers n’ont pas été gommés avec l’arrivée de la version 4. Et l’habillage des formulaires ne reste qu’un tout petit exemple. Essayez de passer d’un menu accordéon en vue Mobile à un menu horizontal déroulant en vue Desktop… Le markup HTML est toujours (passage de la version 3 à la 4) différent d’un composant à l’autre, toujours pas de prise en charge des mediaqueries via JS, toujours pas de méthode .destroy() selon les cas.

En revanche, on sent dans la logique de fonctionnement et d’articulation du code de Foundation 6 que ses concepteurs sont des développeurs front-end chevronnés. Le framework est conçu pour être facile à utiliser et à étendre. Ses composants sont étudiés pour répondre aux contraintes quotidiennes du développeur. Avec les composants de navigation Responsive inclus, passer d’un menu accordéon en vue Mobile à un menu horizontal déroulant en vue Desktop se fait avec des classes et des data-attributes à ajouter au bon endroit dans le code HTML. Même pas besoin d’écrire de JS! Et on voit avec l’exemple donné dans ce billet que le code natif est pensé pour s’adapter immédiatement à l’environnement dans lequel il est parachuté.

Je ne peux que vous motiver à tenter de produire un site avec Foundation 6. Vous m’en direz des nouvelles 😉



Hello,
this is not an issue, but more of a concern about how to make the best out of Foundation 6 out-of-the-box SCSS components for custom website design.
So, I hope some skilled Foundation users will read this and share their opinions. 🙂

I’ve found some of the mixins to either:

  • include too much CSS properties for custom needs (core and skin properties are often merged within a same mixin),
  • prevent developer to custom-skin HTML elements (with skin values being forced rather than being included as mixin parameters).

As an example, here’s the dropdown-container mixin that includes both core and skin CSS properties :

Let’s assume I have 10 elements on my website that would use the dropdown component. 9 of them would have the same design. I can set the $dropdown- variables in the _dropdown.scss file to my regular needs.

But what if I want to take profit of the dropdown component for 1 specific element, but don’t want to show a border or need custom padding compared to the regular dropdown ?
Solutions I came up with include:

1. Make use of the regular mixin and override skin properties

(I guess I could use a Gulp plugin to remove duplicated properties within the same declaration… => Gulp clean-css with removeDuplicateRules option. Or CSS nano with discardDuplicates option).

Edit: even with a good Gulp CSS cleaning plugin, I can see a couple of issues doing that way :

  • You’ll still need to reset each and every property included in the mixin and that you don’t want to use :

2. (heavier and not so good idea IMO) Split standard mixin in 2.

3. Creating an SCSS placeholder that includes mixin core properties.

Third solution is the one I prefer so far. I might dig for a Gulp plugin that removes duplicate properties and first solution might become my favourite in the end.
What would you do?

Thanks.