Modification des templates<\/strong><\/p>\n Pour commencer il va falloir dupliquer les fichiers suivants contenant les formulaires de cr\u00e9ation de compte. <\/p>\n Dans le fichier register.phtml rechercher le code suivant :<\/p>\n Puis ajouter \u00e0 la suite le code suivant, qui va rajouter un nouveau champ de v\u00e9rification email <\/p>\n Dans le fichier billing.phtml rechercher le code suivant :<\/p>\n Et ajouter le code suivant avant le endif<\/p>\n Une fois ces codes ins\u00e9r\u00e9s, nous avons bien un nouveau champ \u00ab\u00a0Email Address Confirmation\u00a0\u00bb qui s’affiche sur ces 2 formulaires.<\/p>\n Mise en place de la validation sp\u00e9cifique<\/strong><\/p>\n Comme \u00e9voqu\u00e9 plus haut nous allons mettre en place une validation sp\u00e9cifique qui v\u00e9rifiera simplement que la valeur de notre champ \u00ab\u00a0Confirmation email\u00a0\u00bb est bien \u00e9gal \u00e0 celle du champ email.<\/p>\n Pour la mise en place de cette validation plusieurs solutions sont possibles.<\/p>\n Ce n’est pas forcement la plus pratique car elle n\u00e9cessite d’ajouter un code de v\u00e9rification\u00a0 sur chaque template. Dans le fichier register.phtml , rechercher le code :<\/p>\n Et ajouter \u00e0 la suite :<\/p>\n Dans le fichier billing.phtml, rechercher le code<\/p>\n Et ajouter \u00e0 la suite<\/p>\n C’est la solution la plus portable, car cette v\u00e9rification sera disponible sur toutes les pages chargeant le fichier js, sans ajout de code suppl\u00e9mentaire. Nous allons ensuite rajouter automatiquement ce fichier js \u00e0 toutes les pages de notre site en ajoutant les lignes suivantes dans le fichier \u00ab\u00a0local.xml\u00a0\u00bb de votre th\u00e8me ( app\/design\/frontend\/yourtheme\/default\/layout\/local.xml<\/p>\n <\/p>\n L’inconv\u00e9nient de cette solution c’est que le message d’erreur n’est pas traduisible directement. Une fois ces \u00e9l\u00e9ments mis en place notre message d’erreur est maintenant en place.<\/p>\n
\nDu th\u00e8me rwd : app\/design\/frontend\/rwd<\/em>\/default\/template\/ dans votre th\u00e8me app\/design\/frontend\/yourtheme<\/em>\/default\/template\/<\/p>\n\n
<li>\r\n<label for=\"email_address\" class=\"required\"><em>*<\/em><?php echo $this->__('Email Address') ?><\/label>\r\n<div class=\"input-box\">\r\n<input type=\"email\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" name=\"email\" id=\"email_address\" value=\"<?php echo $this->escapeHtml($this->getFormData()->getEmail()) ?>\" title=\"<?php echo $this->quoteEscape($this->__('Email Address')) ?>\" class=\"input-text validate-email required-entry\" \/>\r\n<\/div>\r\n<\/li>\r\n<\/pre>\n
\nNotez bien la classe\u00a0validate-confirm-email qui va correspondre \u00e0 la r\u00e8gle de validation que nous allons cr\u00e9er.<\/p>\n<!-- Ajout d'un \u00e9l\u00e9ment du formulaire Email de confirmation -->\r\n<li>\r\n <label for=\"email_address_confirm\" class=\"required\"><em>*<\/em><?php echo $this->__('Email Address Confirmation') ?><\/label>\r\n <div class=\"input-box\">\r\n <input type=\"email\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" name=\"email_confirm\" id=\"email_address_confirm\" value=\"<?php echo $this->escapeHtml($this->getFormData()->getEmail()) ?>\" title=\"<?php echo $this->quoteEscape($this->__('Confirm Email Address')) ?>\" class=\"input-text validate-email required-entry validate-confirm-email\" \/>\r\n <\/div>\r\n<\/li>\r\n<!-- Fin Ajout d'un \u00e9l\u00e9ment du formulaire Email de confirmation -->\r\n<\/pre>\n<?php if(!$this->isCustomerLoggedIn()): ?>\r\n<div class=\"field\">\r\n<label for=\"billing:email\" class=\"required\"><em>*<\/em><?php echo $this->__('Email Address') ?><\/label>\r\n<div class=\"input-box\">\r\n<input type=\"email\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" name=\"billing[email]\" id=\"billing:email\" value=\"<?php echo $this->escapeHtml($this->getAddress()->getEmail()) ?>\" title=\"<?php echo $this->quoteEscape($this->__('Email Address')) ?>\" class=\"input-text validate-email required-entry\" \/>\r\n<\/div>\r\n<\/div>\r\n<?php endif; ?>\r\n<\/pre>\n<div class=\"field\">\r\n<label for=\"billing:email\" class=\"required\"><em>*<\/em><?php echo $this->__('Email Address Confirmation') ?><\/label>\r\n<div class=\"input-box\">\r\n<input type=\"email\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" name=\"billing[email_confirmation]\" id=\"billing:email_confirmation\" value=\"<?php echo $this->escapeHtml($this->getAddress()->getEmail()) ?>\" title=\"<?php echo $this->quoteEscape($this->__('Email Address')) ?>\" class=\"input-text validate-email validate-confirm-email required-entry\" \/>\r\n<\/div>\r\n<\/div>\r\n<\/pre>\n![\"Checkout](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2015\/09\/checkout-email-conf.jpg\")
<\/a> \u00a0![\"register-email-conf\"](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2015\/09\/register-email-conf.jpg\")
<\/a><\/p>\n\n
\nCette possibilit\u00e9 existe c’est pourquoi je la d\u00e9taille tout de m\u00eame \ud83d\ude42<\/p>\nvar dataForm = new VarienForm('form-validate', true);\r\n<\/pre>\nValidation.add('validate-confirm-email', '<?php echo $this->quoteEscape($this->__('Confirmation email doesn\\'t match'));?>', function(v) {\r\n var email = $('email_address').value;\r\n return (email === v);\r\n});\r\n<\/pre>\nvar billingForm = new VarienForm('co-billing-form');\r\n<\/pre>\nValidation.add('validate-confirm-email', '<?php echo $this->quoteEscape($this->__('Confirmation email doesn\\'t match'));?>', function(v) {\r\n var email = $('billing:email').value;\r\n return (email === v);\r\n});\r\n<\/pre>\n\n
\nNous allons cr\u00e9er un fichier \u00ab\u00a0validations.js\u00a0\u00bb dans le dossier javascript de notre th\u00e8me ( skin\/frontend\/yourtheme\/default\/js\/), ce fichier pourra \u00eatre r\u00e9utilis\u00e9 ult\u00e9rieurement pour ajouter d’autres validations.<\/p>\n\/**\r\n* R\u00e8gles de validations sp\u00e9cifiques au th\u00e8me\r\n*\/\r\nValidation.addAllThese([\r\n\u00a0\u00a0\u00a0 ['validate-confirm-email', 'Confirmation email doesnt match', function(v) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if ( $('email_address'))\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var email = $('email_address').value;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if ( $('billing:email'))\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var email = $('billing:email').value;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return (email === v);}],\r\n]);\r\n<\/pre>\n<default>\r\n<!-- Ajout d'un fichier js sp\u00e9cifique avec toutes les nouvelles validations -->\r\n<reference name=\"head\">\r\n <action method=\"addItem\">\r\n <type>skin_js<\/type>\r\n <name>js\/validations.js<\/name>\r\n <\/action>\r\n<\/reference>\r\n<\/default>\r\n<\/pre>\n
\nIl sera n\u00e9cessaire d’ajouter la traduction via un Translator.add dans un template, ou via un fichier jstranslator d’un module.<\/p>\n