{"id":6632,"date":"2025-01-24T09:59:00","date_gmt":"2025-01-24T07:59:00","guid":{"rendered":"https:\/\/www.h-hennes.fr\/blog\/?p=6632"},"modified":"2025-01-25T22:50:13","modified_gmt":"2025-01-25T20:50:13","slug":"prestashop-ajouter-un-champ-confirmation-email-sur-le-formulaire-de-creation-de-compte","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2025\/01\/24\/prestashop-ajouter-un-champ-confirmation-email-sur-le-formulaire-de-creation-de-compte\/","title":{"rendered":"Prestashop : Ajouter un champ confirmation email sur le formulaire de cr\u00e9ation de compte"},"content":{"rendered":"\n<p>\u00e7a fait longtemps que je n&rsquo;avais pas fait de petit module Prestashop facile et sympa, j&rsquo;ai profit\u00e9 d&rsquo;un commentaire post\u00e9 sur le blog pour en avoir l&rsquo;id\u00e9e \ud83d\ude42<br>Donc le principe va \u00eatre d&rsquo;ajouter un champ de confirmation email sur le formulaire de cr\u00e9ation de compte, ceci afin d&rsquo;\u00e9viter que vos utilisateurs se trompent dans leur email lors de l&rsquo;inscription.<br>Voici le r\u00e9sultat attendu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"695\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-1.png\" alt=\"\" class=\"wp-image-6633\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-1.png 682w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-1-294x300.png 294w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/a><\/figure>\n\n\n\n<p>Pour la mise en oeuvre de l&rsquo;ajout de ce champ et sa validation c&rsquo;est relativement facile car il existe des hooks natifs pour faire cela.<br>Nous allons ajouter un champ confirmation_email, dans le formulaire.<br><br>A savoir que l&rsquo;ajout du champ dans le formulaire va l&rsquo;ajouter automatiquement \u00e0 3 endroits sur une version native :<\/p>\n<ul>\n<li>Dans le formulaire de cr\u00e9ation de compte normal<\/li>\n<li>Dans le formulaire de cr\u00e9ation de compte dans le tunnel de commande<\/li>\n<li>Dans l&rsquo;\u00e9dition des param\u00e8tres du compte<\/li>\n<\/ul>\n<p>Pour ajouter le champ au formulaire <strong>additionalCustomerFormFields<\/strong><br>Pour valider les valeur du champ <strong>validateCustomerFormFields<\/strong><\/p>\n<p>Voici le code de base avec les commentaires qui permettent de comprendre sa mise en oeuvre.<br><br><\/p>\n\n\n\n<pre lang=\"php\">\n     \/**\n     * Gestion des champs sur le formulaire client\n     *\n     * @param array $params\n     * @return array\n     *\/\n    public function hookAdditionalCustomerFormFields(array $params)\n    {\n        \/\/Ajout d'un champ \"confirmation_email\" de type email dans le formulaire\n        return [\n            'confirmation_email' => (new FormField())\n                ->setName('email_confirmation')\n                ->setType('email')\n                ->setLabel($this->l('Confirm email'))\n                ->setRequired(true)\n                ->addConstraint('isEmail')\n        ];\n    }\n\n    \/**\n     * Hook pour valider les champs du formulaire client\n     *\n     * @param array $params\n     * @return bool\n     *\/\n    public function hookValidateCustomerFormFields(array $params)\n    {\n        foreach ($params['fields'] as $field) {\n            \/** @var FormField $field *\/\n            if ($field->getName() == 'email_confirmation') {\n                $email_confirmation = $field->getValue();\n                \/\/Dans le cas ou la valeur n'est pas la m\u00eame que le champ email standard on d\u00e9fini un message d'erreur.\n                if (Tools::getValue('email') != $email_confirmation) {\n                    $field->addError($this->l('Confirmation email does not match with email'));\n                    return false;\n                }\n            }\n        }\n        return true;\n    }\n\n<\/pre>\n\n\n\n<p>On peut voir le rendu que cela fait avec le code, notre champ apparait bien \u00e0 la fin du formulaire de cr\u00e9ation de compte.<br>Mais pour notre besoin ce n&rsquo;est pas hyper ergonomique.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"871\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-2.png\" alt=\"\" class=\"wp-image-6635\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-2.png 643w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2025\/01\/image-2-221x300.png 221w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><\/a><\/figure>\n\n\n\n<p>La prochaine \u00e9tape est un peu plus p\u00e9nible, car le hook ne permets que d&rsquo;ajouter des champs \u00e0 la fin du formulaire.<br \/>J&rsquo;ai essay\u00e9 de jouer avec et de changer les positions dans le tableau des param\u00e8tres \u00e7a fonctionne uniquement pour les champs existants.<br \/>Et je n&rsquo;ai pas trouv\u00e9 de hook qui permettrait de changer l&rsquo;ordre de ces \u00e9l\u00e9ments proprement, cela pourrait peut \u00eatre faire l&rsquo;objet d&rsquo;une contribution sur le projet.<br \/>Ou alors de la cr\u00e9ation d&rsquo;un module d\u00e9di\u00e9 uniquement \u00e0 cet usage.<br \/>Edit :\u00a0 Le module a \u00e9t\u00e9 cr\u00e9\u00e9 et il est disponible ici :\u00a0 <a href=\"_wp_link_placeholder\" data-wplink-edit=\"true\">https:\/\/shop.h-hennes.fr\/fr\/20-tri-des-champs-du-formulaire-de-creation-de-compte.html <\/a>(Article de blog \u00e0 venir)<br \/><br \/>Pour \u00e9viter de faire une surcharge j&rsquo;ai donc choisi de d\u00e9placer les \u00e9l\u00e9ments directement en javascript.<br \/>Voici le comportement que j&rsquo;ai mis en place, en revanche il est grandement li\u00e9 au th\u00e8me cela pourrait donc ne pas marcher sur tous les th\u00e8mes.<br \/>C&rsquo;est pour cela que j&rsquo;ai choisi de n&rsquo;effectuer ce d\u00e9placement que si la configuration est activ\u00e9e dans le backoffice.<br \/><br \/><\/p>\n\n\n\n<pre lang=\"javascript\">\n\/\/ On d\u00e9place le champ \"email_confirmation\" apr\u00e8s le champ email\ndocument.addEventListener('DOMContentLoaded', function () {\n    const emailField = document.querySelector(\"#field-email\");\n    const emailConfirmationGroup = document.querySelector(\"#field-email_confirmation\").closest(\".form-group\");\n    if (emailField && emailConfirmationGroup) {\n        const emailGroup = emailField.closest(\".form-group\");\n        emailGroup.parentNode.insertBefore(emailConfirmationGroup, emailGroup.nextSibling);\n    }\n});\n<\/pre>\n\n\n\n<p>Comme d&rsquo;habitude le module est dispo gratuitement sur la boutique.<br><br>N&rsquo;h\u00e9sitez pas \u00e0 me partager vos retours sur celui-ci !<\/p>\n\n\n\n<p class=\"has-text-align-center has-luminous-vivid-amber-background-color has-background\"><a href=\"https:\/\/shop.h-hennes.fr\/fr\/19-confirmation-d-email-creation-de-compte.html\" target=\"_blank\" rel=\"noopener\" title=\"\">T\u00e9l\u00e9charger le module complet ( et gratuit ) sur la boutique<\/a><\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>\u00e7a fait longtemps que je n&rsquo;avais pas fait de petit module Prestashop facile et sympa, j&rsquo;ai profit\u00e9 d&rsquo;un commentaire post\u00e9 sur le blog pour en avoir l&rsquo;id\u00e9e \ud83d\ude42Donc le principe va \u00eatre d&rsquo;ajouter un champ de confirmation email sur le formulaire de cr\u00e9ation de compte, ceci afin d&rsquo;\u00e9viter que vos utilisateurs se trompent dans leur [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[245],"tags":[104,615],"class_list":["post-6632","post","type-post","status-publish","format-standard","hentry","category-prestashop-2","tag-prestashop","tag-registration"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/6632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/comments?post=6632"}],"version-history":[{"count":5,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/6632\/revisions"}],"predecessor-version":[{"id":6647,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/6632\/revisions\/6647"}],"wp:attachment":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/media?parent=6632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/categories?post=6632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/tags?post=6632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}