Prestashop
1.7
Difficulté
2/4
Durée
25′
Exemple : afficher la marque dans le récapitulatif des commandes du client Prestashop
Vous souhaitez afficher la marque du produit au niveau du récapitulatif des commandes du tableau de bord de vos clients membres ? Ce tutoriel vous explique comment aboutir à ce résultat pas à pas. Nous avons fait le choix de vous proposer 2 manières d’afficher cette information pour que le résultat s’approche au plus près de vos attentes.
Le premier consiste à concaténer le nom de la marque à la suite du nom du produit.
Le second consiste lui à 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 les templates à modifier
- appeler la méthode pour afficher le nom en fonction de l’ID de la marque
- dans le cas du second affichage, traduire le nom de la nouvelle colonne
1/ Déterminer les templates à modifier
Pour déterminer le template qui affiche le récapitulatif d’une commande dans l’historique du tableau de bord client, il nous faut aller dans le dossier templates qui se trouve dans le dossier thème puis le nom du thème utilisé et enfin templates. Nous cherchons à apporter des informations supplémentaires à notre client dans son espace personnel. Les templates à modifier se trouvent dans le dossier customer : order-detail-return.tpl et order-detail-no-return.tpl.
2/ Appeler la méthode pour afficher le nom de la marque en fonction de son ID
L’id de la marque du produit se trouve dans l’objet $product. 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 nos templates en appelant la classe dont elle est issue. voici le résultat obtenu : Manufacturer::getNameById($product.id_manufacturer)
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 des quantités. Les templates dans lesquels nous allons intervenir utilisent le langage Smarty. Il faut donc utiliser l’implémentation souhaitée par ce langage, c’est à dire d’englober notre code dans des accolades ( { } ). Mais ce n’est pas tout! Afin de faire un code « propre » il est nécessaire de vérifier si le nom de la marque existe avant de vouloir l’afficher.
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 à intégrer, commenté, pour ce premier affichage :
{* Mise en place de la condition *}
{* équivaut à si id_manufacturer = 1 et donc existe *}
{if $product.id_manufacturer}
{* si oui, affiche : "- le nom de la marque" *}
- {Manufacturer::getNameById($product.id_manufacturer)}
{/if}
{* fin de la condition *}voici ci-dessous la copie d’écran, avec le code intégré, dans les deux templates pour le 1er affichage :
2ème affichage – en créant une colonne dédiée
Pour créer une colonne dédiée il nous suffit de définir dans le <thead> le titre de notre colonne dans une balise <th>. Ensuite il ne reste qu’à placer notre code dans une balise <td> à l’intérieur du <tbody> en respectant bien l’ordre du <thead> pour ne pas mélanger les colonnes.
Voici ci-dessous le code final à intégrer, commenté, pour ce premier affichage :
{* dans le thead *}
<thead>
<tr>
<th>{l s='Manufacturer' d='Shop.Theme.Catalog'}</th>
</tr>
</thead>
{* dans le tbody *}
<td>
{* Mise en place de la condition *}
{* équivaut à si id_manufacturer = 1 et donc existe *}
{if $product.id_manufacturer }
{* Affiche le nom de la marque *}
{Manufacturer::getNameById($product.id_manufacturer)}
{* si non n'affiche rien! *}
{/if}
{* fin de la condition *}
</td>voici ci-dessous la copie d’écran, avec le code intégré, dans les deux templates pour ce 2ème affichage :
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 la zone Modifier les traductions :
- pour « Type de traduction » choisissez : Traductions de thème
- pour « Sélectionnez votre thème » choisissez : « le nom de votre thème »
- pour « Choisissez votre langue » choisissez : la langue souhaité ici français
une nouvelle fenêtre contenant les traductions s’affiche alors, cliquez sur le menu « Shop » à gauche puis sur le sous menu « thème » vous verrez apparaître un autre sous menu « catalog ». Cliquez dessus, vous aurez alors accès à toutes les traductions de catalog. Votre champ « Manufacturer » 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 ajouter la marque dans le récapitulatif d’une commande pour votre client. 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 deux affichages sur les deux templates :
Vous pouvez voir ce rendu dans votre front office, en créant au préalable un compte client et en passant une commande. Il se situe au niveau du tableau de bord utilisateur (icon user) puis dans historique et détails de mes commandes. Cliquez enfin sur la commande à afficher.
Si vous avez aimé ce tutoriel vous aimerez surement notre tutoriel sur : Comment afficher la marque du produit dans le bon de livraison Prestashop ?
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 !