[PrestaShop 1.7] Afficher le prix HT et TTC sur la fiche produit

Photo by Mark Wieder on Unsplash

Cette demande revient assez souvent sur le forum PrestaShop il me semble donc légitime d'en faire un tutoriel durable.

Je ne sais pas si je ferais une version pour PrestaShop 1.6 et Thirtybees, mais là nous ne parlerons que de la version 1.7 de PrestaShop.

Situation de départ

Au départ, était la vie ... pardon, je m'égare.

Au départ, sur la fiche produit de Prestashop on a soit l'affichage TTC, soit l'affichage HT en fonction de la configuration de chaque groupe client. Dans certains cas, on peut être amené à vouloir afficher les deux prix sur la fiche produit, je vais donc vous montrer simplement comment afficher simplement le montant HT en plus du montant TTC.

Affichage TTC de la fiche produit sur PrestaShop 1.7
Affichage TTC de la fiche produit sur PrestaShop 1.7
Affichage HT de la fiche produit sur PrestaShop 1.7
Affichage HT de la fiche produit sur PrestaShop 1.7

Affichons le HT sur avec le TTC

Sur PrestaShop, cela est très simple, il suffit de modifier légèrement un petit fichier de votre template.

Je travaille, il va de soi, sur le template Classic livré de base avec toutes les installations de PrestaShop. Si vous utilisez un template personnalisé, vous devrez certainement adapter à votre sauce.

Donc, rendez-vous dans le fichier :

  • /themes/classic/templates/catalog/_partials/product-prices.tpl

Au niveau de la ligne 68 (on a eu chaud), vous devriez trouver ce bout de code :

Nous constatons que ce prix ne s'affiche que lorsque la valeur de $priceDisplay est égale à 2, sauf que cela n'arrive jamais où je n'ai pas encore trouvé, n'hésitez pas à m'en parler dans les commentaires.

Il suffit donc de changer la règle pour faire apparaitre cet élément sur la fiche produit.

Sachant qu'il serait aberrant d'afficher cet élément si la règle appliquée au groupe client est déjà d'afficher les prix en hors taxes, nous devons donc faire correspondre cette règle à l'affichage TTC seulement.

Pour cela j'ai regardé dans le code de PrestaShop lors du choix du format dans la page de configuration des groupes clients et cette valeur est 1 pour l'affichage TTC.

Remplaçons donc $priceDisplay == 2 par $priceDisplay != 1.

Je fais le choix de faire un affichage lorsque la valeur de $priceDisplay est différente de 1 pour lui permettre d'inclure le fait que ce résultat puisse être égal à 2 même si je ne sais pas si cela peut arriver.

Nous obtenons ce code :

qui provoque ce résultat sur la fiche produit :

Affichage simple du montant HT et TTC en même temps sur une fiche produit sur Prestashop 1.7
Affichage simple du montant HT et TTC en même temps sur une fiche produit sur Prestashop 1.7

Nous avons bien le montant TTC et HT d'affiché, mais vous constaterez que le montant HT se place bizarrement et ne comporte ni décimale, ni devise.

Mais ce n'est pas tout, regardez le résultat lorsque l'on change de devise ou si on a enregistré ses prix en TTC lors de la création de la fiche produit :

Affichage bizarre lorsque l'on change de devise
Affichage bizarre lorsque l'on change de devise

Vous constatez que nous n'avons toujours pas la devise et qu'en plus nous avons les 6 décimales de base.

Nous allons donc travailler à présenter convenablement ce tarif et le placer comme il faut sur la fiche produit.

La version plus

Nous allons travailler en 2 temps, le premier pour afficher le prix avec la devise et le bon nombre de décimale en fonction de la configuration de la devise (que l'on peut de nouveau configurer dans les versions 1.7.7.0 et supérieures), puis dans un second temps regarder où déplacer l'affichage du prix pour rendre cela plus cohérent.

Prix et devise

nous allons traiter la variable $product.price_tax_exc pour l'afficher avec le bon nombre de décimale et la bonne devise, celle affichée par le client.

Pour cela il existe une fonction disponible dans la classe Tools que nous pouvons appeler directement puisque c'est une fonction définie comme static.

Nous obtenons donc ce résultat : Tools::displayPrice($product.price_tax_exc)

Vous remarquerez que nous n'avons pas besoin de définir le nombre de décimale ou la devise utilisée, cela se fait automatiquement en fonction de la configuration de votre site, donc l'affichage sera toujours bon, quelle que soit la devise ou le groupe client.

Le code final d'ajout de la devise sera donc :

Ce qui nous permet d'obtenir le résultat suivant sur la fiche produit :

Affichage propre du prix en fonction de la devise affichée
Affichage propre du prix en fonction de la devise affichée

Avouez que le résultat est tout de même plus sympathique.

Nouvel emplacement

Pour déplacer ce prix HT, il vous suffit de déplacer l'intégralité du block à l'endroit souhaitez, mais de préférence à l'extérieur d'un autre block présent sur la même page.

Personnellement, j'aime bien le placer au-dessus du prix TTC actuellement affiché.

Qu'en pensez-vous ?

Un prix HT mis en valeur
Un prix HT mis en valeur

Conclusion

Comme nous l'avons encore expérimenté, la réponse à la question de départ est très simple, mais pour obtenir un résultat réellement utilisable j'ai dû intégrer des notions plus complexes que l'on ne peut acquérir qu'en pratiquant régulièrement le développement sur PrestaShop.

Pour découvrir ce souci de décimale, j'ai eu la chance de travailler sur mon module de gestion de TVA anglaise dans le cadre du Brexit juste avant, sinon, je serais certainement passé à côté de ce problème, donc soyez indulgent avec vos prestataires qui peuvent toujours oublier un cas très particulier tellement il y a de choses à maitriser.

Je vous laisse le plaisir d'adapter le design du prix à votre template, ce n'est pas le propos de cet article.

Commentaires