Avoir une boutique en ligne c’est très bien, mais il faut qu’elle soit vivante pour que vos visiteurs y croient vraiment… Comment rendre une boutique Prestashop vivante ? C’est pas si compliqué avec la méthode PageLife.
Montrer de la preuve sociale
Vous trouvez que c’est barbare comme terme « preuve sociale » ? En fait c’est tout bête, quand on est sur un site e-commerce on peine à mesurer l’interaction du site marchand. Parfois on a de très beaux sites marchand, mais on se demande s’ils ont déjà fait des ventes (car il y’a un manque de mise en confiance) du coup en tant qu’acheteur on peut vraiment hésiter à passer commande.
Récemment j’ai découvert un service qui s’appelle PageLife est qui est vraiment très interactif, car il permet d’afficher des infobulles sur votre boutique e-commerce, qui montrent vraiment au visiteur qu’il se passe quelque chose sur la boutique.
Comme j’ai trouvé le concept intéressant, je me suis amusé à retranscrire la logique de ce comportement sur des fiches produits de Prestashop, l’idée était simple… montrer que quelqu’un a déjà acheté le produit, citer son prénom… (et la lettre du nom de famille) ainsi que la ville de provenance. En plus de ça, je trouvais rassurant de mentionner aussi le nombre de fois où le produit a été acheté (pour montrer toujours plus de crédibilité).
Parfois il suffit de pas grand chose pour modifier mentalement la perception que les gens ont de votre boutique en ligne. Des grands sites comme Hotels.com, Wish… misent beaucoup sur les interactions sociales déjà effectuées par les acheteurs, car ça montre qu’il y a une réelle activité derrière la façade et que leur business n’est pas en train de dormir.
Ce que je vous propose c’est une approche d’intégration assez basique et pas trop intrusive, après bien sûr libre à vous de laisser cours à votre imagination. Au moins comme ça vous avez déjà une base, vous pouvez aussi réfléchir à d’autres idées d’informations (issues de votre base de données) qui pourraient être remontées sur la fiche produit. Bonne intégration !
Ressources
Pour ce tutoriel vous aurez à disposition :
- 1 x fichier ProductController.php (pour modifier la fiche produit)
- 1 x fichier product.tpl (pour intégrer le bloc preuve social)
- 1 x fichier custom.css (pour ajuster le bloc preuve social)
Résumé de la vidéo : Avoir une boutique Prestashop qui donne l’impression d’être vivant !
- Un shop mort ou vivant ? Dans quelle catégorie se trouve votre boutique ?
- Mise en place d’un nouveau ProductController, avec adaptation du fichier TPL de la page produit, pour faire remonter le nom des clients déjà existants.
- Compréhension rapide des principes du code PHP.
- Test de la page produit avec une seule commande pour un message différent. Quand il n’y a eu qu’une seule commande sur le produit, on affiche plutôt un message lié au stock (sentiment d’urgence).
- Une méthode simple, honnête et durable qui peut booster votre shop.
Super ! c’est vrai que la « preuve sociale » est un très bon moyen d’augmenter le CA d’une boutique PrestaShop. Le must reste le commentaire client sur la page produit tout de même.
On est bien d’accord, j’espère arriver avec cette fonction sur King-Avis en fin d’année 2018… Affaire à suivre !
Bonjour,
Trés intéressant, merci.
Je suis sur 1.6. Y a t’il une version pour 1.6 ou est-ce compatible ?
Merci,
Cordialement.
Bonjour,
Je pense qu’il faudra adapter l’override de controller, car celui-ci est valable uniquement pour Prestashop 1.7
A bientôt !
Très sympa ce concept, peut-il fonctionner sur une version 1.6 de Prestashop?
Voir ma réponse à la question précédente.
Bonjour Germain, tout d’abord je tiens à te remercier pour tes tutos
je tenais juste à préciser qu’il existe un module « infobulles produit » en natif qui permet d’afficher les consultations ainsi que les dernières ventes du produit. Je parle ici pour ma version à savoir 1.5.6. peut être que le module n’existe plus sur la 1.6 et 1.7
A bientôt
Hello,
Effectivement je me souviens d’un module gratuit qui faisait cela, mais ça fait un moment que je l’ai plus vu. On dirait qu’il existe une extension dans le même genre qui propose cette fonction : https://addons.prestashop.com/fr/onglet-produit/17467-infobulles-produit-avance.html
A bientôt !
Oui Mohamed, en regardant de plus près mes modules, il existe bien sur la version 1.6.
Je ne l’avais pas vu car il fait parti des modules désinstallés.
Merci, c’est super bien
Je viens de tester le module « Infobulles produits ». C’est une espèce de widget ou popup qui apparaît pendant 3 secondes en haut à droite. Très différent de ce que propose Germain, qui est bien plus attrayant.
Bonjour Germain,
Merci merci pour ce nouveau tuto . Parfait.
Cependant, la mise en forme ne fonctionne pas sur mon Samsung A3.
Y a-t-il moyen d’avoir le code pour que cela fonctionne sur les PC, mais pas sur les Smartphone et les tablettes?
Merci encore,
Bruno
Bonjour,
Il faut essayer d’ajouter des classes Boostrap sur la div ex « hidden-xs » pour masquer sur mobile, c’est à tester (à voir aussi la documentation Boostrap).
A bientôt !
Bonjour germain et merci pour tes astuces.
Je suis sur prestashop 1.6 comment faire fonctionner ton code ?
Car je ne crois pas qu’il soit compatible avec le version 1.6.
Ci c’est possible de l’avoir c’est cool.
Encore merci à toi pour tes videos.
Bonjour,
Le code du controlleur ne va pas fonctionner directement, si jamais demandez dans le forum si quelqu’un peut tester et adapter les quelques lignes nécessaires.
A bientôt !
Hello,
Pour ceux qui veulent ajuster le code sur mobile modifiez les deux règles CSS suivantes :
#product #customer_info #block1{float:left;width:10%;text-align:center;} #product #customer_info #block2{float:left;width:90%;text-align:left;padding-left:20px;}A bientôt !
Bonjour, encore un super tuto, merci beaucoup. Comment on fait pour gérer la langue d’affichage ?
Bonjour,
Pour les traductions, il suffit de traduire le thème par l’outil classique de Prestashop et normalement vous pouvez traduire ces textes.
A bientôt !
Salut Germain,
Il faudrait prévoir que le texte soir disponible pour les traductions, beaucoup de sites sont en multi-langues…
Merci,
J’ai trouvé ici : http://build.prestashop.com/howtos/translation/how-to-translate-your-theme/
Je confirme que c’est ça qu’il faut faire !
Bonjour,
Voir mon commentaire précédent… à Jean-Philippe Guay.
A bientôt !
Bonjour,
Très intéressant et très pédagogique. En revanche, Sur chaque produit s’affiche la mention « John D… » et les commentaires ne correspondent pas à de vraies commandes passées… Est-ce que j’ai loupé quelque-chose ?
Merci en tout cas
Olivier
Hello,
Difficile de dire comme ça… à vérifier dans la base de données sous « ps_orders / ps_order_detail » s’il n’y a pas des informations concernant des commandes de test concernant ces produits.
A bientôt !
erratum > commentaire précédent à ne pas prendre en compte;)
Merci encore pour ces excellents tuto !
Juste top. Germain je tiens à te dire un sincère merci pour tes tutos simples, concis, pratiques et très pédagogique. Cela me dépanne énormément pour certaines fonctionnalités. En somme tu me fais faire des économies. Chapeau l’artiste
Merci pour ce retour positif, cela me fait très plaisir !
Bonjour Germain,
Il est super ton astuce,merci pour tout.Chez moi l’image png que j’ai mis dans le dossier img ne s’affiche pas sur la page produit, il n’y a que le message.
Faut il une image particulière?
Hello,
Il faut analyser l’url de votre image dans le code source de votre site, pour voir si cela conduit bien au fichier. L’image en question peut-être un fichier PNG classique, il n’y a pas de subtilité à ce niveau.
A bientôt !
Bonjour,
Merci bien, j’ai regardé et la console de ma page sur google chromé affiche le message suivant lorsque je suis sur a page;Failed to load resource: the server responded with a status of 404 (Not Found)
Comment y remedier , toutes les caches ont été bien vidées.
Merci de la solution.
Bonjour,
Dans ce cas, il faut regarder le lien qui renvoie la page d’erreur 404 et ajuster l’emplacement du fichier. Soit le lien est incorrect ou alors c’est l’emplacement du fichier qui n’est pas bon.
A bientôt !
Bonsoir Germain,
Ma question reste sans suite.
Je voudrais savoir comment procéder pour faire apparaître l’image à côté du message comme dans le tutoriel, j’ai essayé en vain en téléchargeant une image dans le dossier img de PS 1.7.
Merci pour tout
Bonjour,
Il faut déjà que l’image soit bien présente dans le dossier en question, puis ensuite il faut bien vérifier que le CSS se charge avec les nouvelles règles. Si l’affichage de la page cause problème (au niveau présentation), regardez ce tutoriel : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
A bientôt !
Bonjour,
Dans la partie fiche produits, après avoir intégrer le code d’imitation Pagelife et l’encapsulation, je rencontre un problème d’affichage CSS. Après ces modifications, je me rend compte que le texte de description produit ne s’adapte plus au block description produit et le texte dépasse…
J’aimerai trouvé un moyen d’adapter le block description produit en fonction de la taille du texte de la description, autrement dit qu’il s’ajuste automatiquement..
Des idées ?
Merci beaucoup,
Maël
Bonjour,
Normalement le fait d’ajouter ce code modifie uniquement le comportement de la nouvelle DIV ajoutée, la zone description ne devrait pas être impactée par le changement. Difficile de vous aider précisément sur ce point.
A bientôt !
Bonjour Germain,
Faut-il une taille particulière pour cette image svp? j’ai essayé quelques tailles et je n’y parviens pas, l’image ne s’affiche toujours pas.Je voudrais supprimer carrément l’image et laisser juste le message, car le plus important c’est le message! comment effacer complètement le cadre de l’image dans le bloc.
Merci d’avance
Bonjour,
Je constate que vous avez déjà réussi à exécuter l’opération… bonne continuation dans l’avancement de votre e-commerce.
A bientôt !
C’est bien d’avoir ce pageLife aussi dans le quick view non ?
Si ça peut aider, il suffit de copier la parie de code {* 15.02.18 – Webbax – TUTO 46 *} dans themes/classic/templates/catalog/_partials/quickview.tpl après la description short par exemple et de remplacer #product #customer_info par seulement #customer_info dans custom.css.
Il est vraiment top ce tuto, merci !
Bonjour,
Pas très clair, erroné et pas très propre (copier/coller) en fait mon commentaire, merci de ne pas le publier.
Par contre là nous sommes dans un cas d’utilisation d’un même code dans 2 scripts différents : product et quickview. Peut-être, si cela est possible, l’occasion d’une explication sur où placer le code et comment l’appeler ?
Bien cordialement.
Bonjour,
Merci pour la suggestion et la contribution en espérant que cela puisse aider d’autres personnes.
A bientôt !
Bonjour,
merci pour ce tuto, si quelqu’un a réussi à l’adapter pour une version 1.6, ce serait sympa de partager le code.
Bonjour,
Merci pour ce super tuto, je trouve l’idée géniale !
Ce qui serai super aussi c’est de pouvoir faire des sortes de side notification qui affiche de temps à autre ce genre de message aléatoirement sur le site « laura de Nantes à acheté tel produit », « bienvenu à farid qui vient de s’inscrire sur le site », « félicitation à léa qui vient de passer sa première commande »!
j’aimerai bien la développer mais je ne vois pas comment créer ce genre de notification
Bonjour,
Ici il s’agit d’un premier exemple, mais pour arriver à ce genre de résultat… il faudrait un module dédié avec des processus beaucoup plus intelligents.
A bientôt !
Super tuto comme d’habitude 🙂 juste une question peut on remplace le prenom et le debut du nom par juste » un acheteur » j ai essaye mais pas reussi alors je viens appelé a l’aide 😉
Du coup j’ai reussi 🙂 grâce a tes tutos j’adore de plus en plus fouiller 🙂 bref j’ai modifié ceci :
Un client {l s=’de’} {$customer_info.address->city} {l s=’a acheté ce produit récemment’}
et cela fonctionne, je sais pas si mon bidoullage est tres academique mais cela fonctionne
C’est super c’est effectivement une manipulation du genre qu’il fallait faire pour ajuster le fichier product.tpl de Prestashop…
Tuto fort utile qui va me permettre d’ameliorer ma boutique en ligne
Bonjour Germain,
Super tuto que je viens de mettre en place. Cependant chez moi j’ia eu un soucis de lecture de ma base de données donc j’ai du légèrement modifié le code de l’override.
Donc j’ai mis :
if(isset($od['id_order'])){ $order = Db::getInstance()->getRow('SELECT * FROM `'._DB_PREFIX_.'orders` WHERE `id_order`="'.pSQL($od['id_order']).'"');au lieu de la simple demande et je n’ai plus eu de bug.
Si cela peux aider quelqu’un 😉
Continue comme ca