Prestashop : Ajouter un champ confirmation email sur le formulaire de création de compte

ça fait longtemps que je n’avais pas fait de petit module Prestashop facile et sympa, j’ai profité d’un commentaire posté sur le blog pour en avoir l’idée 🙂
Donc le principe va être d’ajouter un champ de confirmation email sur le formulaire de création de compte, ceci afin d’éviter que vos utilisateurs se trompent dans leur email lors de l’inscription.
Voici le résultat attendu.

Pour la mise en oeuvre de l’ajout de ce champ et sa validation c’est relativement facile car il existe des hooks natifs pour faire cela.
Nous allons ajouter un champ confirmation_email, dans le formulaire.

A savoir que l’ajout du champ dans le formulaire va l’ajouter automatiquement à 3 endroits sur une version native :

  • Dans le formulaire de création de compte normal
  • Dans le formulaire de création de compte dans le tunnel de commande
  • Dans l’édition des paramètres du compte

Pour ajouter le champ au formulaire additionalCustomerFormFields
Pour valider les valeur du champ validateCustomerFormFields

Voici le code de base avec les commentaires qui permettent de comprendre sa mise en oeuvre.

     /**
     * Gestion des champs sur le formulaire client
     *
     * @param array $params
     * @return array
     */
    public function hookAdditionalCustomerFormFields(array $params)
    {
        //Ajout d'un champ "confirmation_email" de type email dans le formulaire
        return [
            'confirmation_email' => (new FormField())
                ->setName('email_confirmation')
                ->setType('email')
                ->setLabel($this->l('Confirm email'))
                ->setRequired(true)
                ->addConstraint('isEmail')
        ];
    }
 
    /**
     * Hook pour valider les champs du formulaire client
     *
     * @param array $params
     * @return bool
     */
    public function hookValidateCustomerFormFields(array $params)
    {
        foreach ($params['fields'] as $field) {
            /** @var FormField $field */
            if ($field->getName() == 'email_confirmation') {
                $email_confirmation = $field->getValue();
                //Dans le cas ou la valeur n'est pas la même que le champ email standard on défini un message d'erreur.
                if (Tools::getValue('email') != $email_confirmation) {
                    $field->addError($this->l('Confirmation email does not match with email'));
                    return false;
                }
            }
        }
        return true;
    }

On peut voir le rendu que cela fait avec le code, notre champ apparait bien à la fin du formulaire de création de compte.
Mais pour notre besoin ce n’est pas hyper ergonomique.

La prochaine étape est un peu plus pénible, car le hook ne permets que d’ajouter des champs à la fin du formulaire.
J’ai essayé de jouer avec et de changer les positions dans le tableau des paramètres ça fonctionne uniquement pour les champs existants.
Et je n’ai pas trouvé de hook qui permettrait de changer l’ordre de ces éléments proprement, cela pourrait peut être faire l’objet d’une contribution sur le projet.
Ou alors de la création d’un module dédié uniquement à cet usage.
Edit :  Le module a été créé et il est disponible ici :  https://shop.h-hennes.fr/fr/20-tri-des-champs-du-formulaire-de-creation-de-compte.html (Article de blog à venir)

Pour éviter de faire une surcharge j’ai donc choisi de déplacer les éléments directement en javascript.
Voici le comportement que j’ai mis en place, en revanche il est grandement lié au thème cela pourrait donc ne pas marcher sur tous les thèmes.
C’est pour cela que j’ai choisi de n’effectuer ce déplacement que si la configuration est activée dans le backoffice.

// On déplace le champ "email_confirmation" après le champ email
document.addEventListener('DOMContentLoaded', function () {
    const emailField = document.querySelector("#field-email");
    const emailConfirmationGroup = document.querySelector("#field-email_confirmation").closest(".form-group");
    if (emailField && emailConfirmationGroup) {
        const emailGroup = emailField.closest(".form-group");
        emailGroup.parentNode.insertBefore(emailConfirmationGroup, emailGroup.nextSibling);
    }
});

Comme d’habitude le module est dispo gratuitement sur la boutique.

N’hésitez pas à me partager vos retours sur celui-ci !

Télécharger le module complet ( et gratuit ) sur la boutique

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *