Paiement sous Prestashop

Prestashop 1.7 – L’étape du paiement (ép.9)

Le paiement reste une étape décisive pour toutes les boutiques en ligne, il serait vraiment dommage de perdre votre client à cette étape. Découvrez un élément qui m’a frappé dans cette nouvelle version de Prestashop.

Episode 9

Actuellement le e-commerce fourmille de détail, tous les e-commerçants font pourtant de leur mieux (pour vendre)… mais c’est surtout le « cumul » de plusieurs petites choses qui peuvent exercer l’influence sur un acheteur.

Les clients n’aiment pas lire, ils veulent tout de suite comprendre ce qui se passe et pouvoir rapidement passer à autre chose. Par défaut sous Prestashop 1.7, l’étape du paiement est très épurée… peut-être un peu trop, car les logos des méthodes de paiement ne s’affichent pas, seul le texte est mentionné.

Peut-être que cela est temporaire, car j’ai vu un extrait de code dans le fichier « payment.tpl » qui fait mention du logo… mais cela ne semble pas fonctionner. Mon conseil est donc d’intégrer un logo de paiement à tout prix, pour que vos visiteurs se sentent en confiance.

On dit bien souvent qu’une image vaut 1000 mots et c’est vrai, de plus il y’a une certaine méfiance quand on ne montre pas le logo d’une méthode de paiement… cela peut presque faire « peur » de cliquer et de ne pas savoir ce que va déclencher le formulaire.

La fraude augmente de plus en plus, le piratage des cartes de crédit aussi (la méfiance est toujours là). Même si au niveau de la sécurité cela ne change rien pour l’internaute, un logo de paiement connu va le rendre plus serein pour la validation.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier payment.tpl (révision du hook de paiement)
  • Fichier theme.css.txt (extrait règle CSS)
  • Fichier payment-option-X.psd (exemples de logos de paiement)

Télécharger

Au programme

  • Visualisation de l’étape de paiement tel que proposé en standard.
  • Un extrait de code pour les logos est déjà présent, mais ne semble pas fonctionner. Peut-être que ce sera le cas dans les prochaines versions ?
  • Création de deux icônes dans Photoshop, vous avez la base déjà pour démarrer. Vous pouvez récupérer des icônes sur FlatIcon.
  • Modifiez le fichier de l’étape de paiement qui se trouve sous : « themes\classic\templates\checkout\_partials\steps\payment.tpl ».
  • Ajustez le fichier CSS du template avec les nouvelles règles.
  • Videz le cache du navigateur pour bien visualiser les changements.
  • Utilisez des logos de couleurs pour mieux percuter les esprits.

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 ! (Soyez le premier à noter ce billet)
Loading...

11 commentaires sur “Prestashop 1.7 – L’étape du paiement (ép.9)”

    1. Bonjour,

      Sous la version 1.6, la seule possibilité c’est surtout d’utiliser le mode « One page checkout » qui donne un rendu différent.

      Merci pour votre visite !

  1. Bonsoir,
    Merci pour vos tutos qui sont une grande bouffée d’air frais.
    et encore bravo pour ceux de la version 1.6, que j’ai fait en même temps que les vidéos, mais dommage que j’ai eu un bug sur mon index.html et que je n’arrive pas à corriger, c’est pourquoi je fais celle de la 1.7 directement sur mon hébergeur.
    Cependant, je n’arrive pas à mettre un produit dans le panier… je suis désespérée ! car je ne peux plus avancer dans ma configuration.
    Merci pour toute l’aide que vous m’apporterez.

    1. Bonjour,

      Si vous avez un problème avec l’ajout au panier, essayez de désactiver le mode Ajax dans le module panier, pour voir si c’est la méthode Ajax qui cause problème.

      Assurez-vous aussi de bien avoir mis du stock sur l’article que vous testez.

      Merci pour votre visite !

  2. Bonjour,
    Merci pour votre réponse rapide.
    j’ai bien désactivé le mode ajax, et les quantités sont bien actives.
    Je ne comprends pas, j’ai beau faire un clic sur l’ajout du panier, mais rien n’y fait, le panier reste à zéro.
    C’est ballot, lolll c’est justement le pourquoi on créé un site e commerce et la fonction primordial ne fonctionne pas.
    Par contre j’ai déjà installé le module paypal, et je me demandais si cela pouvait faire une interaction sur le module panier !
    Merci encore pour votre aide.

    1. Bonjour,

      Difficile de vous répondre sur ce point, ce que je ferais à votre place :

      > tenter une ré-installation depuis zéro pour voir si vous avez le problème à la base
      > utiliser la dernière version du navigateur Chrome
      > désactiver la fonction Ajax du bloc panier

      Merci pour votre commentaire !

  3. (Prestashop 1.7.1.2)
    Bonjour,
    Vous n’avez pas de logo car dans les modules ils ne sont pas implémenter ..
    Je m’explique lors de l’appel pour les paiements on appel la Class
    PaymentOption dans la quelle il y a une variable logo
    Mais dans les deux modules de la video ,
    On ne initialise pas le logo vous pouvez le faire avec si vous le souhaitez avec dans la methode hookPaymentOptions en mettant:
    $newOption->setLogo(« monUrl ». »monlogo.jpg »);
    Avant le return
    return [$newOption];

    1. Je rajoute une remarque il est fort possible que vos modules payant n’est pas besoin de cette modification de template d’autre part cette modification risque de rentrer en conflit avec des modules ou le développeur n’a sciemment oublié d’initialiser cette variable je vous conseil plutôt de modifier au niveau du module.

      1. Bonjour,

        Effectivement il est aussi possible de procéder de cette manière qui est plus propre au niveau de l’intégration. Ici cela permettait de faire l’intégration rapidement via le template…

        J’ai testé l’utilisation de cette méthode d’intégration sur l’un de mes modules de paiement, mais pour le moment je ne l’ai pas activé, car sur les modules officiels de Prestashop ils n’intègrent pas le logo, du coup après l’affichage n’est pas uniforme.

        Merci d’avoir apporté cette précision pour les développeurs.

        A bientôt !

  4. Bonjour,

    Tout d’abord merci beaucoup pour tous ces tutoriels vraiment utiles quand on débute dans le monde de Prestashop ^^
    J’ai tout fait comme indiqué dans ta vidéo, cependant mes deux boutons à cocher ne sont pas alignés en face des phrases correspondantes « payer par chèque » et « payer par virement ».

    Chacune des phrase est située un « saut de ligne » en dessous du bouton…

    Si quelqu’un a une idée, merci !

    1. Hello,

      Difficile de répondre à cette question, à mon sens pour cela il va falloir réviser certaines règles CSS, mais cela varie au cas par cas… Peut-être faire appel à un intégrateur pour l’ajustement.

      Merci de suivre mon actualité…

      A bientôt !

Laisser un commentaire

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