Étiquette : prototype

[Magento 1.9] Modifier le mode d’affichage standard des erreurs de saisie des formulaires, orchestré via Prototype.js

Dans Magento, le comportement après validation d’un formulaire (mode d’affichage des erreurs de saisie) est défini dans le fichier js/prototype/validation.js. Les options disponibles sont les suivantes :

Ajouter les classes validation-passed et validation-error aux <div class="input-box"> qui englobent chaque champ de formulaire

On a la possibilité de surcharger une option définie par défaut de manière spécifique en déclarant la nouvelle valeur comme ci-dessous directement dans un template phtml :

Cette ré-écriture doit se faire avant que l’objet Validation soit invoqué dans le template. Résultat :

validation

Ajouter un wrapper <span class="control-wrapper" /> autour de chaque champ de formulaire

Attention : il faut obligatoirement avoir mis en place les classes validation-passed et validation-error aux <div class="input-box"> qui englobent chaque champ de formulaire

Lorsque votre charte graphique prévoit d’afficher des icônes de réussite ou d’échec à droite des champs après soumission des informations renseignées dans un formulaire (phase de vérification), il peut être utile (à des fins d’habillage CSS) d’ajouter un <span class="control-wrapper" /> autour de chaque champ.

input-wrapper

Pour ce faire, il faut surcharger un bout de code se trouvant en standard dans js/prototype/validation.js. Vous pouvez créer un nouveau fichier skin/frontend/nom_du_theme/js/validation.js dans lequel vous allez mettre le code suivant :

Vous pourrez ensuite aisément mettre en place l’apparition des icônes de validation ou d’échec par le biais de CSS :

Ressources externes utiles :

[Magento] Résoudre le conflit de dropdown entre Bootstrap 3 et PrototypeJS

Source : Resolve the conflict between Bootstrap 3 and PrototypeJS
.

Composants Bootstrap affectés :

  • Collapsible components useful for building accordion and navigation.
  • Dropdown menus : quand le menu se ferme, il disparaît entièrement.
  • Modal dialogs
  • Tootips

Solution sans chargement des librairies JavaScript via CMD :

Source : http://jsfiddle.net/dgervalle/hhBc6/.

Solution avec chargement des librairies JavaScript via CMD :

Source : http://jsfiddle.net/dgervalle/e8Apv/.