PageLife pour Prestashop

Prestashop 1.7 – Imiter PageLife (ép. 46)

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)

Télécharger

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.
Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (15 votes, moyenne : 5,00 sur 5)
Loading...

37 commentaires sur “Prestashop 1.7 – Imiter PageLife (ép. 46)”

  1. 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.

  2. 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

  3. 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.

  4. 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.

  5. 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

    1. 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 !

  6. 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.

    1. 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 !

  7. 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 !

      1. 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 !

  8. 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

    1. 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 !

  9. 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

  10. 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?

    1. 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 !

      1. 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.

        1. 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 !

  11. 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

  12. 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

    1. 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 !

  13. 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

    1. 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 !

Laisser un commentaire

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