Une des choses qui me gêne assez souvent sur les boutiques en ligne est le nombre de clics à réaliser pour se connecter à son compte. Qu’il s’agisse de tests réalisés sur des plateformes de développement, ou de sites sur lesquels je désire rapidement retrouver mes paniers ou mes anciennes commandes, je rencontre assez fréquemment le besoin de rapidement me connecter afin de retrouver mes informations.
Sur Prestashop 1.7, les variables Smarty ont pas mal évoluées, proposant désormais bien plus d’éléments que sur la version précédente de ce CMS. Je me suis donc demandé s’il n’y avait pas – à l’instar d’autres CMS – la possibilité d’afficher rapidement un formulaire de connexion dans les barres latérales d’une boutique Prestashop 1.7.
Un de nos clients, lors de la mise en place d’une boutique liée au Don Du Sang (et faites des dons !) nous a fait la remarque que la connexion client est bien trop souvent un simple lien caché comme un arbre au milieu de la forêt, sur une page contenant souvent beaucoup d’éléments. Dur de se connecter rapidement sur Prestashop !
Pour l’anecdote, j’ai chez moi deux geckos, nommés Dump et Root. les geckos sont de petits lézards tout mignons, qui doivent avoir un habitat préparé de manière minutieuse. Leur alimentation étant majoritairement constituée d’insectes, je me retrouve à commander régulièrement des grillons sur une boutique Prestashop (Ah, que le monde est petit !).
Sur la boutique en question, il est bien plus rapide et facile pour moi de recommander exactement les mêmes produits que précédemment. Je me connecte donc à mon compte, je regarde la liste de mes commandes et je recommande tout simplement la dernière passée. Je n’ai plus qu’à valider le tunnel de commande et hop ! Commande passée rapidement. Je pourrais pourtant faire bien plus rapide, par exemple en me connectant en un clic à mon compte…
L’intérêt d’un bloc de connexion client
L’intérêt de rapidement proposer aux internautes de se connecter ou de se créer un compte le plus rapidement possible est multiple.
- si l’internaute possède un compte mais n’est pas connecté, cela lui permet de rapidement retrouver ses informations, comme dans mon cas les précédentes commandes d’insectes pour mes petits geckos. Pas besoin de me proposer plein de produits donc je n’ai aucun intérêt, car je sais ce que je désire, je l’ai déjà commandé et je sais également comment l’ajouter au panier en un clic.
- Si l’internaute possède un compte mais n’est pas connecté, cela lui permet également de visualiser de manière fiable les tarifs de livraison associés à son adresse postale. En résumé, c’est très sympa de marquer « Livraison offerte » par défaut dans le panier, mais une fois une adresse de livraison renseignée, beaucoup trop de boutiques montrent qu’en réalité la livraison offerte est finalement… le retrait en magasin ! Je me doute que la livraison sera payante pour mon adresse de livraison, me connecter m’aide à savoir quel en sera le montant
- Lorsque l’internaute est connecté et ajoute des produits au panier, le commerçant a donc toutes les informations nécessaires pour les relances de paniers abandonnés ! Par contre, par pitié, laissez un peu de temps aux clients avant d’envoyer des emails… Il est logique de ne pas être en mesure d’envoyer un rappel de panier abandonné si le client n’est pas connecté (comment voulez-vous que l’on sache qui est ce client, s’il n’est pas connecté ?)
Par-dessus le marché, et du point de vue d’un technicien devant régulièrement tester des boutiques, le nombre de clics réalisé pour se connecter à son compte me semble parfois aberrant, et autant vous dire que rien ne me gonfle plus que d’avoir à chercher une information pourtant évidente et devoir faire nombre de clics pour juste me connecter à mon compte…
Coder en HTML Smarty un bloc de connexion client
J’ai au début envisagé comme tout développeur des fonctionnalités PHP, Javascript, et j’en passe des vertes et des pas mûres pour créer une fonctionnalité Prestashop permettant une connexion plus rapide. Il faut dans mon formulaire que je teste si l’internaute est connecté ou non, que j’affiche un formulaire qui renvoie les informations renseignées vers un fichier de contrôle de Prestashop, pour renvoyer l’information, recharger ou non la page en cours… De l’ajax ? Du PHP donc ?
Et puis je me suis dit que j’étais pas mal une patate de partir aussi loin, aussi fort… N’y a-t-il pas un moyen simple de créer un formulaire de connexion, entièrement en HTML/CSS/Smarty ? Simplicité, bien souvent c’est efficacité !
Bon, première chose à faire : se documenter ! D’autant plus que ce n’est pas comme si nous avions un listing de variables Smarty Prestashop 1.7 sur notre site… Et j’ai de la sorte pu trouver des variables très intéressantes, comme celles liées au client (est-il connecté ou non ?), aux différentes URL gérées par Prestashop, etc.
Etape 1 : créer le formulaire HTML
Si vous faites de l’intégration, vous n’allez pas rencontrer ici de spécificités. Un bloc de connexion, ça reste :
- un formulaire HTML
- avec un champ email
- avec un champ password
- un bouton de validation
- et au pire un lien pour se créer un compte, et un lien « mot de passe oublié »
Prestashop par défaut a par-dessus le marché des class HTML assez utiles, pour designer des blocs. Ces class sont card card-block. Un formulaire c’est donc ceci :
<div class="card card-block">
<form action="" method="post" id="login-form" class="box">
<p class="text-uppercase h6 hidden-sm-down">Connexion</p>
<div class="form_content clearfix">
<div class="form-group">
<label for="email">Email</label>
<input class="is_required validate account_input form-control" id="email" name="email" value="" type="text" />
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input class="form-control js-child-focus js-visible-password" type="password" id="password" name="password" value="" />
</div>
<p class="lost_password form-group">
<a href="" title="Recover your forgotten password">Mot de passe oublié ?</a>
</p>
<p class="submit">
<input type="hidden" name="submitLogin" value="1">
<input type="hidden" class="hidden" name="back" value="" />
<button id="submit-login" class="btn btn-primary btn-blog-primary" data-link-action="sign-in" type="submit">
Connexion
</button>
</p>
</div>
</form>
</div>Au demeurant, aucune URL n’est ici renseignée. Je vais avoir besoin de Smarty pour un peu plus que placer des URL. De vous à moi, je ne me suis pas vraiment embêté, Prestashop embarquant une bonne partie de Bootstrap, je me suis contenté d’adapter rapidement un formulaire depuis la documentation des formulaires de Bootstrap.
Comme j’ai voulu gagner du temps sur le design de ce formulaire (comme disposer du bouton « Montrer » pour le mot de passe, etc), je me suis rendu sur la page de connexion native de Prestashop, et j’ai répercuté les class HTML dans mon code. Entre Prestashop et Bootstrap, autant dire que j’avais déjà tout à disposition…
Forcément, ce formulaire ne fait rien du tout. Aucune URL de formulaire n’est renseignée, et peut-être avez-vous repéré les champs « hidden » dans le code HTML 😉
Maintenant que le formulaire est bien calé en HTML, voyons de quoi nous avons besoin pour le finaliser en Smarty
Etape 2 : renseigner les variables Smarty
Je vais avoir besoin de certaines informations précises, à savoir :
- le client est-il connecté ? Il ne faut afficher le formulaire que si et seulement si ce dernier n’est pas connecté
- il faut que mon formulaire de connexion fasse un rappel à la page de connexion native de Prestashop (le formulaire utilisant une méthode POST)
- le top du top ! Si la connexion est bien effectuée, autant recharger la page actuelle, et pas rediriger vers « Mon compte » ou toute autre page qui ferait perdre à l’internaute sa recherche.
Coup de bol, en Smarty sur Prestashop 1.7, il y a bien une variable $customer, qui est un tableau possédant tout plein d’informations très utiles ! Par exemple, si je désire savoir si l’internaute est connecté, j’ai bien à disposition $customer.is_logged. Donc !$customer.is_logged me dira si le client n’est pas connecté. Parfait !
L’URL de la page de connexion (qui doit être renseignée dans l’attribut action de mon formulaire) est en réalité la même qu’en Prestashop 1.6. Cette URL via Smarty est la suivante
{$link->getPageLink('authentication', true)|escape:'htmlall':'UTF-8'}Dans le doute, je vais rajouter à cette URL auto-générée par Prestashop une information de back, de retour, de là où on doit renvoyer l’internaute une fois connecté. Lorsque le client se sera connecté, je pourrais le rediriger vers un peu là où je veux (tant qu’à faire).
C’est là que les variables d’URL de Prestashop 1.7 entrent en compte. Ici, le plus simple est de renvoyer l’internaute sur la page sur laquelle il se trouve déjà. L’URL de la page actuelle, en Smarty pour Prestashop 1.7, est la suivante :
{$urls.current_url|escape:'htmlall':'UTF-8'}Veillez à regarder tout ce que propose la variable $urls, qui est mine de rien rudement pratique ;-). Je pense également à placer ce code dans le champ hidden de mon formulaire, sait-on jamais.
Il faudra aussi mettre un lien « mot de passe oublié » pour les patates qui ne se souviennent pas de leur code d’accès… Le lien de mémoire devrait être le même que sur Prestashop 1.6, donc :
{$link->getPageLink('password', true)|escape:'htmlall':'UTF-8'}Du getPageLink en veux-tu, en voilà ! Il n’y a plus qu’à contrôler que je n’ai pas d’erreur dans mon code HTML/Smarty :
{* Si le client n'est PAS connecté *}
{if !$customer.is_logged}
<div class="card card-block">
{* On crée un formulaire qui renvoie vers la page de connexion native de Prestashop, avec un paramètre de retour *}
<form action="{$link->getPageLink('authentication', true)|escape:'htmlall':'UTF-8'}?back={$urls.current_url|escape:'htmlall':'UTF-8'}" method="post" id="login-form" class="box">
<p class="text-uppercase h6 hidden-sm-down">{l s='' mod='everpscustomerlogin'}</p>
<div class="form_content clearfix">
<div class="form-group">
<label>{l s='Email' mod='everpscustomerlogin'}</label>
<input class="is_required validate account_input form-control" id="email" name="email" value="" type="text" />
</div>
<div class="form-group">
<label>{l s='Mot de passe' mod='everpscustomerlogin'}</label>
<input class="form-control js-child-focus js-visible-password" type="password" id="password" name="password" value="" />
</div>
{* Le lien "Mot de passe oublié ?" pour les patates *}
<p class="lost_password form-group">
<a href="{$link->getPageLink('password', true)|escape:'htmlall':'UTF-8'}" title="{l s='Recover your forgotten password' mod='everpscustomerlogin'}">{l s='Mot de passe oublié ?' mod='everpscustomerlogin'}</a>
</p>
<p class="submit">
<input type="hidden" name="submitLogin" value="1">
{* On se passe en planqué l'URL de retour après connexion *}
<input type="hidden" class="hidden" name="back" value="{$urls.current_url|escape:'htmlall':'UTF-8'}" />
<button id="submit-login" class="btn btn-primary btn-blog-primary" data-link-action="sign-in" type="submit">
{l s='Connexion' mod='everpscustomerlogin'}
</button>
</p>
</div>
</form>
</div>
{/if}
{* Et on veille bien à refermer la condition if, sinon c'est vous la patate ! *}Etape 3 : tester sur une boutique de développement
Pour tester, autant disposer d’une boutique juste dédiée à ça (sur votre ordinateur, en ligne, peu importe).
J’ai toujours un petit thème enfant installé sur mes Prestashop 1.7 (le thème enfant c’est la vie !). Je me trouve donc un fichier pour insérer mon code Smarty, et visualiser le résultat. Pour ne pas me prendre trop la tête, je vais dans l’immédiat utiliser un emplacement simple, le footer par exemple (donc dans /classic-child/templates/_partials/footer.tpl)
Copy, paste, et actualisons n’importe quelle page.
Comme je suis non connecté, je vais tester en me connectant, pour voir si ça fonctionne bien et si par la suite (une fois connecté) le bloc disparaît bien. Je renseigne donc le formulaire, et constate que ma page s’actualise bien, le formulaire étant à présent masqué. Jackpot !
Convertir le bloc de connexion en module
Il est bien gentil d’avoir le code en HTML/Smarty, mais tout le monde ne disposant pas forcément d’accès FTP, de compétences en codage, il serait tout de même rudement pratique de disposer de ce code sous forme de module. De la sorte, les administrateurs de boutique n’auraient qu’à installer le module, le greffer ou dégreffer de certaines positions, et c’est tout, le module finalement n’affichant qu’un simple formulaire de connexion pour les personnes non connectées.
Rien de bien compliqué lorsque l’on connaît a minima le développement de modules Prestashop ! Le tout est de réfléchir aux hooks d’affichage Prestashop 1.7 qui seraient les plus judicieux, pour juste afficher une vue.
Je vais donc me servir du générateur de module fourni par Prestashop, rapidement, et au pire je pourrais juste ajouter quelques hooks, quelques lignes mais sans trop forcer…
Si vous êtes un peu pressé (comme des citrons), le code est disponible sur le compte Github de Team Ever.
Peu importe la structure du module, pas la peine de s’embêter comme une patate ! Je désire juste afficher le bloc dans une barre latérale à gauche et à droite. Ce qui m’intéresse le plus – outre les méthodes d’installation, désinstallation, et tout le tintouin habituel – ce sont bien les hooks.
Et greffer un fichier smarty à mon hook, dans un module c’est pas si dur quand on développe des modules… Cela se passe ainsi :
public function hookDisplayLeftColumn()
{
return $this->display(__FILE__, 'views/templates/hook/login.tpl');
}
public function hookDisplayRightColumn()
{
return $this->hookDisplayLeftColumn();
}Je peux même ajouter un autre hook tiens, pour afficher le bloc de connexion dans la page de panier :
public function hookDisplayLeftColumn()
{
return $this->display(__FILE__, 'views/templates/hook/login.tpl');
}
public function hookDisplayRightColumn()
{
return $this->hookDisplayLeftColumn();
}
public function hookDisplayShoppingCart()
{
return $this->hookDisplayLeftColumn();
}Si je veux que le module soit greffé par défaut à ces hooks, ma méthode d’installation est donc celle-ci :
public function install()
{
return parent::install() &&
$this->registerHook('header') &&
$this->registerHook('displayLeftColumn') &&
$this->registerHook('displayShoppingCart');
}Le module n’a pas besoin ici de configuration, juste d’afficher le bloc sur ces trois emplacements. Je range donc bien proprement mon fichier tpl contenant le formulaire de connexion client dans un répertoire /nomdumodule/views/templates/hook/login.tpl et paf, ça fait des chocapics ça fait un module.
Reste donc à installer le module, et contrôler ses positions selon le besoin. J’en aurais finalement fait un module, mais finalement ce formulaire est surtout du HTML, et du Smarty n’est-ce pas ?
Imprimer
Laisser un commentaire