Edition de PDF Prestashop

Prestashop 1.7 – Modifier le PDF des commandes (ép.19)

L’impression du PDF des commandes est effectuée par la plupart des e-commerçants, pourtant celui-ci mériterait parfois quelques retouches pour être optimisé. Voyons ensemble ce qu’on peut  envisager de faire !

Episode 19

Ce que me disent souvent les clients, c’est qu’ils veulent une autre présentation de facture… et bien souvent ils me montrent un modèle issu de leur ERP / outil de gestion et qu’il faudrait reproduire le « même document ». Ce que je leur réponds en principe, c’est plutôt qu’il faut s’adapter à la structure existante en ajustant ce qui ne correspond pas à l’affichage.

Dans les anciennes versions de Prestashop il était complexe d’éditer les PDF avec la librairie FPDF, à présent on peut le faire assez simplement en modifiant du HTML directement les fichiers TPL. On peut surcharger facilement les fichiers par défaut, en créant un override « pdf » directement dans le dossier du thème.

Ce que je conseille, c’est surtout d’enlever toutes les informations superflues pour que le client ne se concentre que sur l’essentiel. La petite innovation reste surtout d’ajouter une bannière dans l’entête du PDF, afin de faire passer un message qui sera vu par tous vos clients.

Prenez le temps de retoucher vos PDF, cela peut faire la différence et aussi donner une image plus « rassurante » de votre entreprise, plutôt que d’utiliser simplement les réglages proposés par défaut.

Ressources

Pour ce tutoriel vous avez à disposition :

  • banner-pdf.psd (exemple de bannière pour l’entête de facture)
  • dossier PDF (override pour le thème Prestashop)

Télécharger

Au programme

  • La modification des PDF est une demande récurrente de la part des clients.
  • Adaptez-vous à la structure existante, n’essayez pas de faire « la facture ultime ».
  • Ajustez les réglages généraux (tailles police / couleurs) via le fichier « invoice.style-tabl.tpl ».
  • Retouchez le header, en retirant la mention « Facture » et en ajoutant une bannière si vous désirez faire passer un message à vos clients.
  • Retirez le bloc de récapitulatif des taxes pour éviter les confusions.
  • Ajustez le footer pour une meilleure lisibilité.

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 ! (8 votes, moyenne : 5,00 sur 5)
Loading...

36 commentaires sur “Prestashop 1.7 – Modifier le PDF des commandes (ép.19)”

  1. bonjour, pourriez-vous m’aider a modifier le pdf : Invoice-product-tab.tpl s’il vous plait .
    Après modification j’ai retirer : Taux de taxe
    Toute ma ligne : Référence, produit, Prix unitaire, Qté et Total est écrit en anglais je souhaite l’avoir en français .
    (il ne me manques aucune traduction dans mon prestashop, le problème doit venir du pdf)
    merci par avance 🙂

    1. Bonjour,

      Je n’ai pas fait le test sur cette partie, par contre je pense qu’il faudrait regarder du côté du fichier :
      \app\Resources\translations\fr-FR\ShopPdf.fr-FR.xlf

      Ensuite à tester, voir s’il faut vider les caches après modification pour que la traduction soit prise en charge. J’ai pas encore vraiment testé cette zone des traductions.

      Merci pour votre visite !

  2. Bonjour,

    J’ai le même problème que melody, mais dans le fichier invoice.total-tab. J’ai regardé dans le fichier shopPDF.fr mais les traductions sont correctes. J’ai regardé dans traductions de mon back office et pareil les traductions sont là. J’ai vidé le cache et toujours rien. En attendant de trouver une solution j’ai modifié les termes en les mettant en français car je ne pouvais pas laisser ça pour mes clients.

    1. Bonjour,

      Pour le moment je n’ai pas assez expérimenté cette version Prestashop 1.7 pour faire un retour sur ce problème des traductions. A l’usage je reviendrai faire un commentaire d’ajustement si je suis confronté au même problème (par la suite) sur des instances de Prestashop 1.7 en production.

      A bientôt !

  3. Bonjour Germain
    Tout d’abord merci pour vos vidéos qui permettent de découvrir, comprendre et approfondir le fonctionnement de Prestashop. C’est très appréciable et je profite de votre générosité.
    Pour cette rubrique sur le bon de commande, il me reste un problème. Malgré la modification de l’image logo dans Personnaliser / Apparence / thème et logo, elle ne s’affiche ni sur les pdf commandes ni sur les pdf factures, seul le logo par défaut « Classic » apparait.
    Les logos et favicon s’affichent normalement partout ailleurs.
    Merci par avance

    1. Bonjour,

      Sincèrement je ne sais pas exactement la cause de ce problème… je viens de re-survoler le tutoriel, mais je me rappelle plus trop les subtilités (le temps passe vite). Vous pouvez peut-être essayer d’utiliser la méthode de la bannière fixe pour palier à ce problème (comme vu en fin de vidéo).

      Merci pour votre attention !

  4. Juste après avoir envoyé ce message je me suis aperçu que je n’avais pas regardé correctement l’image. Désolé.
    Bien cordialement

  5. Bonjour,

    Presta 1.7.1.2
    Merci pour le tuto, simple et sans module.
    J’ai ajouté les images des produits dans le back office / Facture /option de facture.
    Par contre je n’arrive pas a augmenter la taille des images dans la facture, sans désordonner les colonnes références… Pour cela j’ai augmenté dans invoice.product-tab.tpl dans le >td> de l’image le width= »15% par une valeur supérieure..une autre idée?

    J’aimerais sinon, en bas de la facture ajouter l’une à cote de l’autre les images en plus gros des produits de la facture. Quand je duplique le code des images dans « invoice.product-tab.tpl pour l’insérer dans le footer.tpl cela ne marche pas. pourquoi?

    1. Bonjour,

      Il est difficile pour moi de répondre sur ce cas… en plus ça fait déjà un moment et j’ai plus vraiment ce tutoriel en tête. A essayer aussi peut-être de fixer une taille sur les images en % ou en pixels… Pour le reste il faudra investiguer, car la question est trop spécifique.

      A bientôt !

      1. Merci pour la reponse.
        Apres x temps de recherche. rien non plus
        En faite les images du devis viennent de img/tmp « product_mini »

        J’ai rien trouvé sur comment augmenter la taille des images auto généré du répertoire tmp.

        Si quelqu’un a une idée.

        Sinon comment remplacer le lien des images du répertoire tmp par le répertoire « p » où les images sont plus grande et de meilleurs qualité?

        C’est fou qu’un logiciel comme prestashop soit si mal pensé. Des images sur des devis, commande, voir facture doivent être de bonne qualité car c’est un document de vente et au lieu de cela on nous propose des miniatures!

        J’ai trouvé ça mais je ne sais pas comment l’adapter pour les factures et avec prestashop 1.7.2.2 :
        https://www.prestashop.com/forums/topic/183122-category-list-la-deuxieme-image-du-produit-au-survol/#entry1130471

        1. Bonjour,

          Pour ce genre de questions, je pense qu’il faudra faire appel à une personne qui se penche spécifiquement sur le cas, car ça prend du temps à vous dire comme ça… il faut tester, regarder, approfondir… Enfin je dis ça surtout parce que c’est le genre de question que je vois ensuite souvent sans réponse dans les forums (débugage trop spécifique).

          A bientôt !

  6. Bonsoir Germain,

    Merci pour tous tes tutos très instructifs.

    Te faisant à 100% confiance, j’ai pris l’habitude d’adapter mon site en fonction de tes tutos. Du coup, quelques fichiers sont régulièrement mis à jour.

    Mais… Actuellement je suis sous PS1722….alors, qu’adviendra-t-il de ces fichiers en cas d’upgrade de PS? Si je fais une mise à jour, est-ce que l’export puis l’import du thème sera suffisant pour garder tous les changements effectués?

    Merci,

    Bruno

    1. Hello,

      Il faut vraiment éviter de continuer à faire des mises à jour de Prestashop. Le changement sera effectivement écrasé si celui-ci est dans le coeur ou dans le thème original de Prestashop. Vous pouvez toujours « dupliquer » le thème afin de faire un thème personnalisé pour que celui-ci ne soit pas mis à jour. Mon conseil premier reste d’éviter de faire des mises à jour régulières, cela crée en général trop de perturbations et il faut ensuite reprendre beaucoup de choses.

      A bientôt !

  7. Hello Germain,

    Merci pour tous les tutos que tu proposes.
    J’ai découvert ton site depuis peu, et je t’avoue que je dévore un peu plus chaque jour chacun de tes posts.

    Je ne sais pas si tu as remarqué sur ta vidéo, mais dans la facture que tu génères, il y a une petite coquille d’affichage. J’ai pu constater que j’avais la même chose, donc je suppose que c’est propre à PrestaShop …
    Il s’agit dans la partie « product_tab » de la colonne quantité, dont le titre est découpé sur 2 lignes. Je trouve ça assez moche, et après avoir passé quelques heures à fouiller, et à essayer plusieurs solutions, je n’ai malheureusement pas avancé.
    As-tu déjà remarqué cette erreur, et si oui, as-tu une idée de comment rendre ceci un peu plus esthétique ?

    Merci d’avance,

    Antoine

    1. Hello,

      Je suis de retour, et j’ai trouvé une solution (qui ne conviendra pas à tout le monde, mais bon, ça reste une solution).

      En fait, étant auto entrepreneur, je ne facture pas de TVA (et donc la colonne « Taux de taxe » ne m’est pas utile, car elle reste vide.
      J’ai donc supprimé cette colonne dans le fichier « invoice.product-tab.tpl ».

      J’ai ensuite appliqué une règle de calcul pour redimensionner deux colonnes, et ainsi avoir la largeur de tableau identique à l’origine.

      Voilà, merci quand même.
      Je reste à l’écoute si quelqu’un à une autre solution à me proposer. 🙂

      Merci

      Antoine

        1. Bonjour,

          Vous pouvez déjà essayer de désactiver les taxes dans Prestashop, sous la configuration des taxes pour voir si cela à une influence dans le PDF.

          A bientôt !

          1. Bonjour
            Non j’ai essayé rien ne marche la colonne Taux de taxe reste toujours sur la facture et le é de quantité est a la ligne .C’est pour ca que j’ai demandé a Antoine les modifs qu’il avait appliquées
            A bientôt
            JM

          2. Re bonjour
            Je suis arrive a supprimé le texte Taux de taxe mais je ne sais pas comment recalculé la largeur de mes colonnes ne sachant pas codé
            Merci si vous avez une réponse
            Cordialement
            JM

          3. Bonjour,

            Pour cela il faut utiliser les attributs HTML classiques comme width avec une valeur en %, à voir ensuite pour appliquer cela directement avec la balise « style » directement sur l’élément TD ou TH du tableau.

            A bientôt !

    2. Hello,

      Sincèrement je n’ai pas trop fait attention à ce cas, peut-être que la solution serait de rechercher la chaîne de caractère dans Prestashop et de la modifier par une plus courte ex. « Qte » pour détourner temporairement le problème.

      A bientôt !

    3. Bonjour Antoine, as tu trouvé dans quel module de traduction , on peut modifier le terme Quantité en Qté ?
      car si je recherche quantité j’en ai tellement que je sais pas le quel est ce 🙂

      merci

      1. Bonjour exmx,

        Allez dans traduction=> autres traductions
        Là il y aura un dossier nommé pdf, vous trouverez le moyen de changé quantité par Qté, je l’ai fait ça fonctionne super

        Bonne journée

  8. Salut,

    Ahah en effet, solution basique à laquelle je n’ai pas pensé, mais qui résout bien le problème, sans trop de prise de tête :).

    J’ai passé pas mal de temps sur ce problème, mais bon, c’est pas perdu pour autant.

    Merci de ton retour en tout cas,
    A bientôt

  9. Bonjour,

    Tout d’abord grand merci pour tes tutos qui permettent simplement d’améliorer nos boutiques.

    En suivant ce tuto pour optimiser le pdf de la facture, lors de mes modifications j’ai du faire une fausse manip plus rien ne fonctionne. Je m’explique lorsque je vais dans le BO pour visualiser la facture (je suis sous ps 1.7.2.2, firefox en local via xampp) un nouvel onglet s’ouvre et charge puis se ferme et rien…..
    J’ai essayer de revenir à zéro : suppression du dossier pdf ajouté dans le dossier classic selon le tuto …. pas mieux. J’ai essayer de remplacer le dossier pdf situé dans le dossier prestashop par le dossier pdf de base …pas mieux

    Si quelqu’un a une idée je suis preneur

    merci

    1. Hello,

      Effectivement en cas de problème, il est sage de remettre le dossier PDF par défaut (fourni dans l’archive de base Prestashop). En même temps il faudrait vider le cache de Prestashop et activer le debug pour voir si vous avez une erreur spécifique. Ce tutoriel peut potentiellement débloquer la situation pour mieux comprendre l’origine de l’erreur : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/

      A bientôt !

      1. Bonjour

        J’ai bien remis le dossier de base en place mais toujours rien même après avoir vider le cache…..
        J’ai activer le mode debug et là C’EST LE DRAME !!!

        Warning à la ligne 2748 du fichier C:\\xampp\\htdocs\\prestashop\\vendor\\prestashop\\smarty\\sysplugins\\smarty_internal_templatebase.php(157) : eval()'d code
        [2] A non-numeric value encountered

  10. Bonsoir

    Je suis toujours aussi fan de vos tutos. Un grand merci.
    Pour mettre Qté, car c’est trop grand, en allant dans traduction, et en recherchant Quantité puis en allant sous PDF, j’ai modifié et c’est OK.
    Par contre j’ai un pb de génération du pdf côté client, et coté administratif comme énoncé dans ce qui suit :

    Quand je suis côté client, et que je veux consulter la facture PDF, le nom du fichier est Invoice.pdf, le numéro de facture est FA00000, et la facture a 2 pages.
    extrait de la console sous chrome

    C’est la même chose côté administration quand je clique sur la ligne de la commande.
    extrait de la console sous chrome

                
            

    Par contre quand je consulte la facture en étant dans la commande (au niveau des documents), la facture est correcte

    Le nom du fichier est le numéro de facture.
    extrait de la console sous chrome
                                                                         FA000010     

    Si quelqu’un peut m’aider ? Merci

    1. Bonjour,

      La question est trop spécifique pour que je puisse apporter une réponse ici, d’autant plus qu’il y’a énormément de facteurs qui peuvent influencer ce problème. A voir du côté du forum de Prestashop, si d’autres personnes ont déjà rencontré le même cas… (à tester / diminuer la police, retirer les éléments superflus du PDF pour raccourcir la page).

      A bientôt !

      1. En fait j’ai fait une autre commande et là c’est bon. Cela vient sans doute du fait que je n’avais pas mis de n° de facture dans le paramétrage. Maintenant c’est OK partout.

  11. Bonjour
    merci déjà pour l’aide que tu nous accorde pour les différentes retouches de nos sites.

    j’ai un soucis avec prestashop 1.7.En mode test, l’édition des factures pdf affiche error, apparemment il faut installer un module d’édition des factures pdf pour pouvoir le faire.

    Pouvez-vous m’aider svp?

    merci d’avance.

  12. Bonjour,

    D’abord un grand merci pour tous ces tutos. J’apprends pas mal sur Prestashop 1.7 grâce à toi.
    J’ai pu « customiser » mon format de facture donc merci pour cette vidéo.
    Par contre, je voudrais modifier le récap de la commande (document qui reste en interne). En fait je veux ajouter une check list dessous l’encart paiement pour vérifier que nous avons bien suivi toutes les étapes.
    Malheureusement je ne trouve pas le fichier tpl qui correspond.
    Peux tu m’aider stp ?

    Merci
    Romain

    1. Hello,

      Difficile à répondre sur ce point, sans me plonger dans les fichiers et faire des tests. Normalement tout ce qui touche la partie des PDF se trouve à la racine dans « /pdf »… il faudrait tester chaque fichier 1 à 1 pour contrôler celui qui touche la zone concernée. En principe je vide code du fichier PDF et je teste le lien de génération pour voir s’il fait une erreur… si oui, alors cela veut dire que je touche le bon fichier.

      A bientôt !

Laisser un commentaire

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