Beaucoup de développeuses et développeurs se demandent comment créer un module sous Prestashop contenant un onglet.
Nous allons donc détailler pas à pas la création de ce fameux module.
Le véritable schéma de construction d’un module dans Prestashop devrai toujours s’apparenter à ceci:
Comme vous pouvez le voir, le module dispose de trois dossiers :
Le module dispose aussi de divers fichiers :
Note
Le mot « tutorial » dans le nom des fichiers doit-être remplacer par le nom de votre module ou onglet.
Par convention, ce nom est en anglais (et pas Franglais…)
Le fichier cœur du module est le fichier qui régit l’installation, la désinstallation, la configuration et
l’exécution dans les hooks (ou hameçons en français).
Ce fichier est composé d’une seule classe portant le nom de votre module et étendant la classe Module.
<?php class tutorial extends Module { // Méthodes & Membres } ?>
Le constructeur de cette classe ayant pour nom de méthode __construct() (je vous renvoie aux cours sur l’objet PHP5) permet au module d’être identifié et classé dans la liste des modules du backoffice.
public function __construct() { $this->name = 'tutorial'; $this->tab = 'Blocks'; $this->version = '1.0'; parent::__construct(); $this->displayName = $this->l('Tutorial Module'); $this->description = $this->l('I'm a tutorial module, thanks to Julien Breux'); $this->confirmUninstall = $this->l('Are you sure you want to delete your details ?'); }
Comme vous pouvez le voir, la méthode __construct() permet d’attribuer des valeurs à certains membres.
(petit rappel de base, les variables à l’intérieur des classes sont appelées des membres)
Les membres sont les suivants :
Important
La pseudo-variable $this est une référence à votre module (ou objet), autrement dit, pour appeler une méthode ou un membre dans votre classe,
vous pouvez l’utiliser comme ceci : $this->myMethod(); / $this->myProperty;
Le mot clé parent permet quant à lui via l’opérateur de résolution de portée (::) d’appeler la méthode parente contenue dans la classe Module (rappelez-vous le mot clé extends permet à votre module d’hériter des méthodes et membres de la classe Module).
Cette méthode permet donc de traduire du texte, par défaut le texte passé en paramètre doit-être en anglais (car cette langue ne contient pas d’accents, et l’anglais est la langue internationale 
)
C’est grâce à l’héritage que l’on peut appeler la méthode nommée l($string) de la classe mère Module.
De cette façon $this->l(‘My Translation’);
Note
Dans le constructeur de votre module, vous devez appeler la méthode parent::__construct() avant de traduire du texte (d’utiliser la méthode l($string)) et après avoir déclaré le membre $this->name. (la méthode de traduction se sert de $this->name pour trouver les fichiers de traduction)
La méthode pour l’installation est très simpliste, elle permet d’enregistrer le module, d’effectuer les actions que vous voulez et aussi d’enregistrer des hooks.
Tout se qui est dans cette méthode est exécuté lors de l’installation de votre module.
Pour l’exemple, j’ai choisi d’installer un hook, d’ajouter une variable de configuration stockée dans la base de donnée et la fameuse installation de l’onglet (que nous verrons plus tard)
public function install() { if(!parent::install() || !$this->registerHook('leftColumn') || !Configuration::updateValue('MOD_TUTORIAL_IMG', 'http://julien.breux.free.fr/logo.jpg') || !$this->installModuleTab('AdminTutorial', array(1=>'My Tutorial Tab', 2=>'Mon onglet tutoriel'), 2)) return false; return true; }
Pour faire bref, la méthode registerHook($hookName) permet d’enregistrer (référencer) un hook dans Prestashop. (Vue plus tard)
La méthode statique updateValue($key, $value) de la classe Configuration permet de mettre à jour une variable de configuration ou bien de créer celle-ci si elle n’existe pas 
et enfin la méthode installModuleTab($tabClass, $tabName, $idTabParent) et une méthode de ma sauce permettant d’enregistrer un ou plusieurs onglets.
Si la méthode install() renvoie false, le module n’est pas installé. (enfin en théorie…)
La méthode pour la désinstallation est toute aussi simple, la méthode deleteByName($key) de la classe Configuration permet de supprimer une variable de configuration de la base de données. La méthode uninstallModuleTab($tabClass) est aussi une méthode de ma sauce pour supprimer un onglet.
Les hooks quant à eux sont désinstallés automatiquement.
public function uninstall() { if(!parent::uninstall() || !Configuration::deleteByName('MOD_TUTORIAL_IMG') || !$this->uninstallModuleTab('AdminTutorial')) return false; return true; }
Cette méthode permet de configurer votre module via un lien (>> Configurer) dans la liste des modules. Elle se charge simplement de faire un echo du xHTML que vous mettrez dedans :
public function getContent() { $html = ''; if(Tools::isSubmit('submitTutorial')) { if(Validate::isUrl(Tools::getValue('tutorial_img'))) { Configuration::updateValue('MOD_TUTORIAL_IMG', Tools::getValue('tutorial_img')); $html .= $this->displayConfirmation($this->l('Settings updated.')); } else { $html .= $this->displayError($this->l('Invalid URL.')); } } $tutorial_img = Configuration::get('MOD_TUTORIAL_IMG'); $html .= '<h2>'.$this->l('Tutorial Module').'</h2> <form action="'.$_SERVER['REQUEST_URI'].'" method="post"> <fieldset> <legend>'.$this->l('Settings').'</legend> <label>'.$this->l('Image URL').'</label> <div class="margin-form"> <input type="text" name="tutorial_img" value="'.$tutorial_img.'" /> </div> <div class="clear center"> <p> </p> <input class="button" type="submit" name="submitTutorial" value="'.$this->l(' Save ').'" /> </div> </fieldset> </form>'; return $html; }
Tools::isSubmit($post_get_var_name) : Méthode statique outils qui renvoie true si l’élément de formulaire est envoyé.
Validate::isUrl($var) : Méthode statique validateur qui renvoie true si la variable passé est un URL.
Tools::getValue($post_get_var_name) : Méthode statique outils qui renvoie la valeur d’un élément de formulaire.
displayConfirmation($message) : Méthode qui permet d’afficher un message de succès.
displayError($message); : Méthode qui permet d’afficher un message d’erreur.
Comme pour nous le hook sera accroché à leftColumn, la méthode porte donc le nom : hookleftColumn($params)
Nous reviendrons dans un autre tutoriel sur les différents types de hook existant dans Prestashop et les différents paramètres qu’ils acceptent.
Ce hook permet simplement d’afficher l’image de notre tutoriel dans la colonne de gauche grâce au fichier modèle tutorial.tpl en lui assignant une variable nommée TUTORIAL_IMG. (affin de lui donner l’url de l’image)
public function hookleftColumn($params) { global $smarty; $smarty->assign('TUTORIAL_IMG', Configuration::get('MOD_TUTORIAL_IMG')); return $this->display(__FILE__, 'tutorial.tpl'); }
Le fichier modéle contiendra donc le code suivant :
<div class="block">
<h4>{l s='Tutorial' mod='tutorial'}</h4>
<div class="block_content center">
<img src="{$TUTORIAL_IMG}" alt="{l s='Tutorial' mod='tutorial'}" />
</div>
</div>Vous remarquerez simplement que dans un template la traduction se fait avec la fonction {l s=’Tutorial’ mod=’tutorial’},
My Tutorial étend le texte à traduire et tutorial étend le nom du module.
De plus l’affichage d’une variable assignée s’utilise comme ceci : {$my_var} / {$myVar} / …
C’est tout pour … le hook et les templates…
Jusqu’ici, vous pouvez maintenant faire un module qui tient la route !
Voyons maintenant comment installer un onglet. Voici ma méthode:
private function installModuleTab($tabClass, $tabName, $idTabParent) { @copy(_PS_MODULE_DIR_.$this->name.'/logo.gif', _PS_IMG_DIR_.'t/'.$tabClass.'.gif'); $tab = new Tab(); $tab->name = $tabName; $tab->class_name = $tabClass; $tab->module = $this->name; $tab->id_parent = $idTabParent; if(!$tab->save()) return false; return true; }
Voyons maintenant comment désinstaller un onglet. Voici ma méthode: (<- copier/coller )
private function uninstallModuleTab($tabClass) { $idTab = Tab::getIdFromClassName($tabClass); if($idTab != 0) { $tab = new Tab($idTab); $tab->delete(); return true; } return false; }
Voici le fichier onglet :
Et voici son code :
<?php include_once(PS_ADMIN_DIR.'/../classes/AdminTab.php'); class AdminTutorial extends AdminTab { public function display() { echo $this->l('This is my tab ! A big big thanks to Julien Breux').'<br /><p class="center"><img src="'.Configuration::get('MOD_TUTORIAL_IMG').'" alt="-" /></p>'; } } ?>
La classe de votre onglet doit hériter la classe AdminTab, c’est pour ceci qu’il faut inclure cette tab (avant la fonction __autoload()).
La méthode display() permet d’afficher un contenu directement dans un onglet du backoffice de Prestashop
Et c’est ce que l’exemple démontre.
Comme vous avez surement du le remarquer la traduction fonctionne très mal. C’est pour cela que je vais vous passer un tuyau!
De plus, l’icône ne fonctionne pas dans le fil d’Ariane…
Mais nous sommes entrain de palier aux problèmes avec Philippe S. (actuellement en vacances, comme moi, mais loin )
Pour le premier problème, il vous suffit d’utiliser ce constructeur pour votre onglet :
private $module = 'tutorial'; public function __construct() { global $cookie, $_LANGADM; $langFile = _PS_MODULE_DIR_.$this->module.'/'.Language::getIsoById(intval($cookie->id_lang)).'.php'; if(file_exists($langFile)) { require_once $langFile; foreach($_MODULE as $key=>$value) if(substr(strip_tags($key), 0, 5) == 'Admin') $_LANGADM[str_replace('_', '', strip_tags($key))] = $value; } parent::__construct(); }
Pour le second problème, voici une ligne à ajouter dans la méthode installModuleTab()
@copy(_PS_MODULE_DIR_.$this->name.'/logo.gif', _PS_IMG_DIR_.'t/'.$tabClass.'.gif');
Attention, n’oubliez pas de modifier le membre module.
Vous voici en possession d’un module complet qui permet juste d’afficher une image dans un onglet mais aussi dans la colonne de gauche de votre site.
J’espère que vous aurez pris autant de plaisir à consulter ce tutoriel que moi à le rédigé.
N’hésitez pas à poster au moins un commentaire par visite, ça fait toujours plaisir. (Même pour les développeurs les plus « perso » qui se disent : « Pfff je l’savais ça ! »)
A l’occasion, n’hésitez pas à mettre un lien vers mon site… ou me demandez du développement, je suis pas très cher et travail bien
Merci à Anne-So pour certaines corrections
Vous allez gagner de l’argent avec mon tutoriel, faites moi en gagner
super tuto rien à dire
Merci beaucoup, premier commentaire, ça fait plaisir !
Merci Julien pour ce tuto.
Il m’a vraiment éclairé. Je vais reprendre quelques modules que j’avais réalisé sur la base de dbbackup.
Je suis très impatient de venir lire de nouveaux tutos.
Ps : je te rajoute à ma liste de devs pour mes prochaines projets
Merci, c’est encourageant !
Je me joins à tous les autres : un tout grand merci Julien et bravo pour la qualité du travail !!!
Un grand merci à toi Julien qui apporte une pierre essentielle à la documentation tant attendue de prestashop
Hello Julien
Un tout grand merci pour ce fa
(mon clavier a dérape….)
Hello Julien
Un tout grand merci pour ce fameux tuto!
Il m’a enfin permis de +/- comprendre les Hooks et comment customiser un module.
Je crois que cela va bien m’aider à répondre à la question que j’avais posée sur le forum Prestahsop ici : http://www.prestashop.com/forums/viewthread/25119/developpement_et_modules/s3slider_audessus_de_la_page_content_right__left_column/
Un grand grand merci à toi !
Bonne continuation
Avec plaisir, bonne utilisation
Bonjour,
Je viens de lire avec plaisir ce tutoriel. Bien réalisé, bonne présentation, pas de chichi, sympa.
A quand un autre tutoriel sur les accès aux informations (de toutes sortes) en général ?
Encore merci
Lorsqu’il y’aura eu plus que 2 donations ?
Non, plus sérieusement : bientôt, bientôt
Un merci ne suffira pas!!
Bonne continuation et je suis sur que je reviendrai et pas les mains vides.
A bientôt
Merci pour ce tuto qui viens nous éclairer.
C’est du bon boulot.
Je rencontre un petit problème de traduction :
foreach($_MODULE as $key=>$value)
comment est initialiser la variable $_MODULE ?
Sinon tout fonctionne bien.
Merci
J’l'avais pas vu celui là!!
c’est assez complet et bien détaillé. Merci pour ce petit tuto.
V++
Atch
Intéressant !
Je commence tout juste sur prestashop et je bute déjà sur une fonctionnalité : remplacer le bouton « Ajouter au panier » par un nouveau bouton « Voir le produit » qui pointerait vers le produit dans la vraie boutique…
Je ne sais pas encore si c’est via un module / ou un « hook » que je dois passer pour faire ça proprement, mais ce tutoriel me permet d’en savoir un peu plus sur l’architecture de prestashop.
Merci !
J’ajoute un « bravo » supplémentaire !! Excellent travail, très utile.
Y a t’il un endroit où l’on peut avoir la liste des fonctions et paramètres « parents » ??
Lionel
Merci pour ce tuto et bonne continuation!
Nico
Merci pour le tuto, juste une question :
les messages d’erreur PHP n’apparaissent pas qaund je developpe mon module et que je teste avec prestashop, il y a un moyen de les faire réapparaitre ?
Parce que deviner ou ca bug.. c’est pas simple !
Il vous faut aller dans le fichier /config/config.inc.php
Et commenter cette ligne comme ceci : //@ini_set(‘display_errors’, ‘off’);
tout bete, merci !!!!
Merci pour ce tuto
ce que je cherchais, merci
Merci pour le tuto
comment en peux lui ajouter un boutton ‘Ajouter au panier’
merci
Bonjour,
Super tuto, mais j’ai un soucis de mon coté:
Le fichier AdminTutorial.php devrait se trouver dans le dossier *Admin(renommé)*/tabs/
Hors a l’installation, le module ne le copie pas, et le contenu de l’onglet affiche donc « Onglet inexistant ».
Comment réparer ceci?
merci
Bonjour, et merci.
Ce système ne fonctionne que pour les versions 1.2.X
Car ces version possède un champs « module » dans la table « tab ».
En d’autre terme, si le champs module est différent de nulle, alors on va chercher l’onglet dans le module
Pourtant, je suis sous Version 1.2.5.0, mon champ module n’es pas vide, et bug:(
Merci d’apporter ta pierre à l’édifice encore minuscule de la documentation prestashop.
J’aurai voulu plus pour comprendre dans les moindres détails les notions abordées mais c’est déjà très gentil d’apporter ta contribution, d’autant plus que c’est bien expliqué.
Encore merci et bonne continuation à toi.
La compréhension des « moindres détails » passe par l’apprentissage complet de PHP.
Oui je comprend, il faut ouvrir les fichiers, comprendre leurs fonctionnements et corrélations…
C’est ce que je fait mais ca prend du temps. Pour le moment j’essaye de dépatouiller les fonctions utiles de la masse : http://shagshag.net/prestadoc/elementindex_prestashop.html
Tu dois comprendre, je suppose que tu es déjà passé par là avec ce bon « vieux » prestashop.
Bonjour Julien,
[quote]Comme vous avez surement du le remarquer la traduction fonctionne très mal. C’est pour cela que je vais vous passer un tuyau!
De plus, l’icône ne fonctionne pas dans le fil d’Ariane…
Mais nous sommes entrain de palier aux problèmes avec Philippe S.[/quote]
Je suis sur une 1.2.5, et j’ai toujours ces problèmes de traductions et de logos.
Sais-tu si cela a été corrigé ?
Merci
Olivier
Bravo pour ce gros coup de pouce et ta disponibilité.
Tout d’abord merci pour ton tuto à la fois simple et très instructif.
J’aimerai savoir si il est possible de créer soit un module « multiple » soit des dépendances entre les modules.
Imaginons en guise d’exemple que je souhaite développer un module client qui se traduirait par un onglet supplémentaire dans l’admin, et DEUX bloc coté site (une boite meilleurs clients que j’afficherais dans la colonne gauche et un petit moteur de recherche de client qui viendrait dans le header). Ce serait inutile j’en conviens … mais nous sommes dans le cadre d’un exemple^^.
Serait-il possible que le module principal ajoute « ses propres modules » (les deux blocs) que l’on retrouverait dans la liste des modules de prestashop pour ainsi pour voir les placer à notre guise dans leur hooks.
Et est ce qu’il est possible de créer une liaison entre des modules dans le cas où un module ne peut pas fonctionner sans la présence d’un premier.
Si tu as une idée sur ces interrogations n’hésite pas à me répondre^^
Je vais me coucher… mais je te réponds dés demain !
Super boulot !
Merci !
Merci vraiment pour ce tutoriel.
Un petit plus qui pourrait aider pas mal de monde :
ça serait intéressant, juste après l’arborescence du module, de décrire à l’aide d’un schéma l’intéraction entre les différents éléments de l’architecture prestashop liée à la création d’un module (MODULE, HOOK, BLOCK, ONGLET, ADMIN )
Par exemple qui va appeler la function hookleftColumn($params) et à quel moment, est-ce une méthode surchargée…?
En tout cas encore merci pour ce tutoriel qui s’est peut être fait en 4H mais qui à demandé beaucoup de travail en amont.
En effet, cela serrai très intéressent.
Mais c’est déjà assez fastidieux pour certain, alors ajouter la notion de « magie » et « callback »…
Cordialement
Bonjour Julien,
Merci beaucoup pour ce tuto il est super,mais je me suis planté au niveau de la backOffice,j’ai créer le fichier AdminTutorial.php sous /modules/mon_modules/ et je sais pas comment faire l’onglet souhaité…j’ai fait qq testes dans le BackOffice dans l’onglet outils–>onglets pour ajouter un nouveau onglet mais je me suis planté..merci de me répondre et m’aider..
Bonjour,
Deux possibilité :
- Soit tu utilise mon tutoriel pour créer un onglet dynamiquement.
- Soit tu place ton fichier AdminNasriThameur.php
dans le dossier /admin/tabs/ manuellement et tu l’ajoute depuis Panneau d’administration > Outils > Onglets > Nouveau
Je ferai prochainement un tutoriel consacré à la création d’un onglet et les différentes façons
Vraiment merci beaucoup Julien j’ai utilisé les deux méthodes et ca marche bien avec moi
…
Allez donnez nous d’autres tuto pour bien maitriser Prestashop …Grand grand grand merci
« Allez, Donnez nous des dons »
salut
je vois que tu montres dans l’architecture typique d’un module un répertoire css pour placer les css spécifiques au module.
J’ai fait de même dans mon module et je réussis à y accéder par
Par contre, de cette manière, on perd la validation HTML Transitional puisque le css n’est pas déclaré dans le head. Tu connais une manière de l’ajouter dans le head sans modif manuelle du code prestashop?
Merci d avance.
Merci Julien pour ce tuto, une chose qui m’échappe : comment spécifier que c’est dans l’onglet « client » ou dans un autre qu’on mettra notre onglet tutoriel? et en plus ou spécifier le nom de ce dernier?
C’est un bon tuto mais pour moi quelques éclaircissements sera le bienvenu.
merci pour vos tutoriaux
j’espère que vous continuerez longtemps
bonjour Julien
je viens de voir votre tutoriel : quelle qualité quelle clarté ! c’est plutot rare les développeurs sachant aussi bien expliquer bravo
Merci pour le tutoriel, je cherchais comment intégrer un tabs, avec un module, et j’ai trouvé la réponse ici.