Prestashop
1.7
Difficulté
2/4
Durée
25′
Vous souhaitez étoffer les informations contenus dans votre bon de livraison (BL) et afficher la marque de chaque produit ? Pour aboutir, il est nécessaire de faire un override du template PDF qui gère le bon de livraison. Nous allons voir ensemble les étapes a suivre pour arriver à ce résultat avec deux choix d’affichages.
Le premier consiste à concaténer le nom de la marque à la suite du nom du produit.
le second consiste à créer une nouvelle colonne entre les colonnes produit et quantité.
Prérequis nécessaires pour suivre facilement ce tutoriel :
- connaître la structure de fichiers et le fonctionnement de Prestashop
- être familier avec le langage HTML
- être familier avec le langage de template Smarty
- notion avec le langage PHP
Étapes essentielles
pour aboutir à ce résultat il faudra :
- déterminer le template à overrider
- appeler la méthode pour afficher le nom de la marque en fonction de son ID
- dans le cas du second affichage, traduire le nom de la nouvelle colonne
1/ Déterminer le template à overrider
Il nous faut connaître le template qui gère l’affichage du bon de livraison dans ce pdf. Ce dernier se trouve à la racine de votre projet dans le dossier pdf.
Ce dossier contient tous les templates liés à l’affichage des pdf. Celui qui nous intéresse est delivery-slip.product-tab.tpl. Pour l’overrider, c’est à dire pour qu’il affiche notre contenu, il nous suffit de copier ce fichier et de le coller dans notre thème. Attention il est très important de respecter scrupuleusement la structure des dossiers dans lequel nous l’avons trouver. Sans cela Prestashop ne le prendra pas en compte ! Ici ce sera dans themes/nom du thème/pdf/delivery-slip.product-tab.tpl.
2/ Appeler la méthode pour afficher le nom de la marque en fonction de son ID
Nous avons déterminé l’id de la marque du produit listé, mais nous recherchons son nom. Rien de plus simple! Il nous faut trouver une méthode qui lorsque l’on lui passe l’id de la marque en paramètre nous retourne son nom. Cette méthode se trouve dans la classe Manufacturer située dans le dossier classes. Cette méthode porte bien son nom, il s’agit de la méthode : getNameById($idManufacturer). On voit qu’elle prend en paramètre l’id du manufacturer, c’est exactement ce qu’il nous faut! Par ailleurs il s’agit d’une méthode public et static on peut donc l’utiliser dans notre template en appelant la classe d’où elle est issue. voici le résultat à obtenir : Manufacturer::getNameById($order_detail.id_manufacturer).
2a/ Placer la méthode dans notre template
Plusieurs emplacements sont possibles. Comme signalé au début de ce tutoriel, nous avons fait le choix de l’indiquer à la suite du nom du produit (1er affichage) et en créant une colonne dédiée entre celle du produit et celle de la quantité. Le template dans lequel nous allons intervenir utilise le langage Smarty, il faut donc utiliser l’implémentation souhaitée par ce langage c’est à dire d’englober notre code dans des acolades ( { } ). Mais ce n’est pas tout! Afin de faire un code « propre » il est important de vérifier si il existe avant de vouloir afficher le nom de la marque. Nous entendons par là de savoir si un nom de marque a été renseigné dans la fiche produit.
1er affichage – à la suite du nom du produit
Voici ci-dessous le code final commenté pour ce premier affichage :
<td width="80%">
{$order_detail.product_name}
{* Mise en place de la condition *}
{* équivaut à si id_manufacturer = 1 et donc existe *}
{if $order_detail.id_manufacturer}
{* si oui, affiche : - "le nom de la marque" *}
- {Manufacturer::getNameById($order_detail.id_manufacturer)}
{/if}
{* fin de la condition *}
</td> Attention ce code est à implanter à deux endroits! Il faut l’implanter dans la condition qui vérifie si l’on souhaite afficher l’image du produit ( {if $display_product_images} ) et dans la condition contraire.
voici ci-dessous la copie d’écran du template avec le code intégré pour le 1er affichage :
2ème affichage – en créant une colonne dédiée
Pour créer une colonne dédiée il suffit de définir dans le <thead> le titre de notre colonne en l’encapsulant dans une balise <th>. Il est important de prendre bien soin que la somme des widths des colonnes ne dépasse pas 100%. Enfin il ne reste plus qu’à placer notre code dans une balise <td> en respectant bien l’ordre du <thead> pour ne pas mélanger les colonnes.
Voici ci-dessous le code final commenté pour ce 2éme affichage:
{* dans le thead *}
<thead>
<tr>
<th class="product header small" width="15%">{l s='Brand' d='Shop.Pdf' pdf='true'}</th>
</tr>
</thead>
{* dans le tbody *}
<td class="center">
{* Mise en place de la condition *}
{* équivaut à si id_manufacturer = 1 et donc existe *}
{if $order_detail.id_manufacturer }
{* Affiche le nom de la marque *}
{Manufacturer::getNameById($order_detail.id_manufacturer)}
{* si non n'affiche rien! *}
{/if}
{* fin de la condition *}
</td> voici ci-dessous la copie d’écran du template avec le code intégré pour le 2ème affichage :
pour cette 2ème présentation on peut remarquer que chaque balise th a une balise td correspondante et que la somme des width de nos th ne dépasse pas 100%.
3/ Dans le cas du second affichage, traduire le nom de la nouvelle colonne
En effet étant donné que l’on précise un nom fixe pour le titre de notre colonne il est important qu’il soit traduit pour s’adapter à la langue de l’utilisateur en fonction des langues définies sur votre site. Pour cela il faut utiliser la méthode de traduction de Smarty (l s= » » d= » ») . Il faudra ensuite se diriger dans le back office du site Prestashop au niveau de la partie « Personaliser » puis « International » et enfin « Traductions ».
Dans le bloc Modifier les traductions :
- pour « Type de traduction » choisir : Traductions de thème
- pour « Sélectionnez votre thème » choisir : « le nom de votre thème »
- pour « Choisissez votre langue » choisir : la langue souhaité ici français
une nouvelle fenêtre contenant les traductions s’affiche alors, cliquez sur le menu « Shop » à gauche vous verrez apparaître un sous menu « pdf ». Cliquez dessus, vous aurez alors accès à toutes les traductions de pdf. Votre nouveau champ s’y trouve, traduisez-le et sauvegarder.
Attention, dans le cadre d’un contexte multi-boutique votre champ n’apparaîtra pas dans les traductions, Prestashop ne pouvant déterminer la boutique dans laquelle vous vous trouvez!
Conclusion
Voilà vous avez fini, vous savez maintenant modifier vos bons de livraisons en ajoutant le nom de la marque! Vous avez la possibilité bien sur de lui appliquer le style de votre choix en lui précisant une class personnalisée. Vous pouvez bien entendu étendre cette pratique à d’autres attributs en fonction de vos besoins en suivant les même principes .
Ci-dessous le résultat obtenu avec ces 2 affichages :
Vous pouvez voir ce rendu dans votre back office au niveau des commandes dont l’état est en cours de livraison ou tout autre état défini après « paiement accepté » en cliquant sur l’icon du transporteur (un camion).
Si vous avez aimé ce tutoriel vous aimerez surement notre tutoriel sur : Comment afficher la marque des produits dans l’historique des commandes du tableau de bord client Prestashop ?(front office)
A la recherche de modules pour Prestashop
Vous avez besoin d’un module sur mesure ou d’un développement particulier ? N’attendez plus
A bientôt pour de nouveaux tutoriels avec Com’onsoft !