Tutoriel prestashop : Créer un module
Cet article se fait vieux ! Consultez plutôt la dernière version permettant de créer des modules pour PrestaShop 1.6.
J’espère que vous le savez maintenant, Ukoo développe des modules PrestaShop pratiques et efficaces !
Mais comme on ne peut pas être sur tous les fronts, voici un tutoriel pour vous apprendre à créer vous-même vos modules PrestaShop.
Et c’est parti…
Avant de commencer
Eh bien avant toute chose, il faut définir le besoin. Mais ça je pense que vous avez déjà quelques idées n’est-ce pas ? ^^
Dans notre cas, je souhaiterais créer un module qui fait défiler quelques témoignages clients… mais attention, pas trop compliqué bien sûr 😉
En front on aura donc un bloc capable de se greffer dans la colonne de gauche. Ce bloc affichera 3 témoignages clients créés via la configuration du module en back-office.
Les 3 témoignages défileront grâce à un peu de javascript.
Rien de bien glorieux, je l’admet, mais c’est toujours mieux que les tutoriels qui vous font afficher un bête et inutile « Hello World! »… ^^
Structure d’un module
Attardons-nous sur la structure d’un module. Pour cela, disséquez n’importe quel module PrestaShop, et vous remarquerez (à peu de choses près) la même structure.
Cependant elle n’est pas figée, et dépend du développeur du module. A vous de voir si vous voulez que votre module soit facile à comprendre, ou donner du fil à retordre au prochain qui se penchera dessus…
Dans notre cas, voici la structure retenue :
/temoignage (dossier du module)
- /css/temoignage.css : fichier CSS du module
- /css/index.html : index pour empêcher la navigation dans le module
- /js/temoignage.js : fichier javascript du module
- /js/index.html : index pour empêcher la navigation dans le module
- /config.xml : fichier de config, auto généré par PrestaShop
- /temoignage.php : fichier principal du module
- /temoignage.tpl : fichier de template du module
- /index.php : index pour empêcher la navigation dans le module
- /logo.gif : icon utilisé par PrestaShop (16×16)
- /logo.png : icon utilisé par PrestaShop 1.5 (32×32)
- /fr.php : fichier de traduction français
- /it.php : fichier de traduction italien
- /en.php : fichier de traduction anglais
- /de.php : fichier de traduction allemand
- /es.php : fichier de traduction espagnol
Ah oui, j’oubliais…
Les différences entre PS1.4 et 1.5 sont vraiment minimes. Aussi, un module développé pour la 1.4 aura des chances de fonctionner sur la 1.5.
Le code que j’annonce ici fonctionne sur les deux versions, sans avoir recours à quelque artifice.
Et on code !
index.php
On commence par le plus simple. Récupérer le contenu du fichier index.php de n’importe quel module PrestaShop 1.4.
Ce fichier sert à restreindre l’accès direct à votre module, et à rediriger le petit malin vers la page d’accueil de votre boutique.
Je vous donne quand même le code que j’utilise :
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Location: ../");
exit;
Le coeur du module
A présent on attaque la partie la plus complexe : le fichier temoignage.php.
Ce fichier contient la majeure partie du code de votre module. nous allons commencer par le code indispensable au bon fonctionnement du module :
if(!defined( '_PS_VERSION_'))
exit;
class Temoignage extends Module{
public function __construct(){
$this--->name = 'temoignage';
$this->tab = 'front_office_features';
$this->version = '1.0';
$this->author = 'Moi';
$this->need_instance = 0;
parent::__construct();
$this->displayName = $this->l('Témoignages');
$this->description = $this->l('Affiche un bloc avec des témoignages clients');
$this->confirmUninstall = $this->l('Êtes-vous certain de vouloir supprimer les informations de ce module ?');
}
}
Il s’agit de créer une nouvelle classe pour votre module (ici Temoignage) qui étend la classe Module déjà existante.
La fonction __construct permet de créer une instance de la classe.
A ce niveau du tutoriel, votre module devrait déjà pouvoir s’installer et se désinstaller comme un grand depuis l’administration de PrestaShop (onglet Modules > Fonctionnalités front office).
Variables de configuration
Comme nous souhaitons stocker 3 témoignages dans la base de donnée, plusieurs choix s’offrent à nous.
Le plus simple à mettre en place, est de passer par la table ps_configuration de PrestaShop.
Dans votre classe Temoignage, rajoutez donc la fonction suivante :
public function install(){
if( !parent::install())
return false;
if( !Configuration::updateValue('TEMOIGNAGE_1', '')
|| !Configuration::updateValue('TEMOIGNAGE_2', '')
|| !Configuration::updateValue('TEMOIGNAGE_3', '')
)
return false;
return true;
}
Cette fonction va effectuer certaines actions lors de l’installation du module. Dans notre cas, nous allons créer 3 variables de configuration vides. Elles nous serviront à stocker les 3 témoignages.
Pour faire ça proprement, il faut aussi que ces variables soient supprimées lors de la désinstallation du module. Il nous faut donc rajouter la fonction suivante dans notre classe :
public function uninstall(){
if (!parent::uninstall()
|| !Configuration::deleteByName('TEMOIGNAGE_1')
|| !Configuration::deleteByName('TEMOIGNAGE_2')
|| !Configuration::deleteByName('TEMOIGNAGE_3')
)
return false;
return true;
}
Créer la configuration du module
Le lien vers la configuration du module est créé automatiquement si vous rajoutez la fonction suivante dans votre classe :
public function getContent(){
$this->_html.='
‘.$this->displayName.’
‘; return $this->_html; }
C’est dans cette fonction qu’il faut rajouter le formulaire permettant la mise à jour des témoignages :
public function getContent(){
$this->_html.='
‘.$this->displayName.’
‘; return $this->_html; }
Si vous tentez de soumettre votre formulaire… rien ne se passe ^^.
Pour enregistrer les valeurs des champs dans la base de donnée, il convient de rajouter une nouvelle fonction à votre classe :
private function _preProcess(){
if(Tools::isSubmit('save')){
if(isset($_POST['temoignage_1']))
Configuration::updateValue('TEMOIGNAGE_1', addslashes($_POST['temoignage_1']));
if(isset($_POST['temoignage_2']))
Configuration::updateValue('TEMOIGNAGE_2', addslashes($_POST['temoignage_2']));
if(isset($_POST['temoignage_3']))
Configuration::updateValue('TEMOIGNAGE_3', addslashes($_POST['temoignage_3']));
$this->_html .= '
‘; $this->_html .= $this->l(‘Témoignages enregistrés’); $this->_html .= ‘‘; } }
Et d’appeler cette fonction avant l’affichage de votre formulaire, par exemple au début de la fonction getContent() :
public function getContent(){
$this->_preProcess();
...
A présent, lors de la soumission de votre formulaire, les valeurs devraient être enregistrées en base de données et donc pré-remplir les champs.
Bien… vous avez fait la moitié du travail ^^
Passons à la suite !
Préparation de l’affichage
Le plus intéressant est bien évidemment d’afficher ces témoignages sur la boutique.
Pour ce faire, il faut d’une part autoriser notre module à s’afficher dans la colonne de gauche, mais aussi l’y greffer par défaut lors de son installation.
Modifier donc la fonction install(), de la façon suivante :
public function install(){
if( !parent::install()
|| !$this->registerHook('header')
|| !$this->registerHook('leftColumn')
)
return false;
if( !Configuration::updateValue('TEMOIGNAGE_1', '')
|| !Configuration::updateValue('TEMOIGNAGE_2', '')
|| !Configuration::updateValue('TEMOIGNAGE_3', '')
)
return false;
return true;
}
L’ajout de ces 2 lignes spécifie que lors de son installation, le module va se greffer aux hook header et leftColumn.
La colonne de gauche contiendra notre bloc, et le header, notre script javascript pour animer les témoignages, ainsi que le CSS du module.
Ajouter la fonction suivante à votre classe pour permettre à votre module de se greffer dans le hook header :
public function hookHeader($params){
Tools::addCSS(($this->_path).'css/temoignage.css', 'all');
Tools::addJS(($this->_path).'js/temoignage.js', 'all');
}
L’appel des fichiers JS et CSS de cette manière permet de les intégrer dans le CCC de PrestaShop lorsque celui-ci est actif.
La fonction suivante va se charger de récupérer les témoignages stockés dans la base de données, et de les transmettre au template de notre module :
public function hookLeftColumn($params){
global $smarty;
$smarty->assign('temoignages', array(stripslashes(Configuration::get('TEMOIGNAGE_1')), stripslashes(Configuration::get('TEMOIGNAGE_2')), stripslashes(Configuration::get('TEMOIGNAGE_3'))));
return $this->display(__FILE__,'temoignage.tpl');
}
Template du module
Dès lors, il est possible d’afficher nos témoignages dans un bloc en front.
pour ce faire, éditez le fichier temoignage.tpl (pensez à forcer la compilation Smarty pour cette partie 😉 ) :
{l s=’Témoignages clients’ mod=’temoignage’}
{foreach from=$temoignages item=temoignage name=loop}
{$temoignage}
{/foreach}
Vous devriez voir apparaître, les uns en dessous des autres, les témoignages fraîchement enregistrés.
Une pincée de javascript…
Pour rendre le tout plus attractif, quoi de mieux qu’un petit effet de transition en javascript ?
Votre fichier temoignage.js devrait déjà être chargé dans la page, il suffit d’y rajouter le code suivant :
$(document).ready(function() {
$(".temoignages .block_content p:not(:first)").each(function(){
$(this).hide(); // cache les témoignages
});
$(".temoignages .block_content p:first").addClass("current");
setTimeout("slide()", 3000);
});
function slide(){
var prev = $(".temoignages .block_content p.current");
if($(".temoignages .block_content p.current").next().size()>0){
var next = $(".temoignages .block_content p.current").next();
}else{
var next = $(".temoignages .block_content p:first");
}
prev.removeClass("current");
next.addClass("current");
prev.fadeOut();
next.fadeIn();
setTimeout("slide()", 3000);
}
Et un zeste de CSS
Pour finir, rajouter ces 2 lignes dans votre fichier temoignage.css qui est lui aussi déjà appelé dans votre page :
div.temoignages .block_content{ position:relative; padding:10px;}
div.temoignages .block_content .temoignage{}
Et la traduction ?
Dernier petit détail : traduire votre module dans d’autres langues.
Même si ce module n’a pas été prévu pour gérer les témoignages multilingues, on peut tout de même s’attarder à traduire les textes de configuration et du front non ?
Pour ce faire, passez par la configuration du module, et cliquez sur le drapeau de la langue dans laquelle vous souhaitez traduire votre module. Je ne me suis occupé que de l’anglais et du français.
Si vous rencontrez des difficultés à cette étape, vérifiez bien vos permissions sur les fichiers de langues (de tous vos modules).
Pour aller plus loin
Voilà, vous êtes venu à bout de ce module. Si vous avez compris ce que vous avez fait c’est déjà un grand pas en avant 😉
On peut imaginer une foultitude d’améliorations pour ce module :
- Création d’un nombre illimité de témoignages
- Traductions des témoignages
- Configuration du temps de défilement JS
- etc etc
Je vous laisse découvrir toutes les possibilités que vous ouvre cette nouvelle compétence que vous venez d’acquérir 😉
Et n’hésitez pas à en faire profiter la communauté en nous partageant vos modules développés sur base de ce tutoriel…
Télécharger le module du tutoriel
Vous serez sûrement intéressé par
Alexander
9 janvier 2016
Bonjour,
Merci pour cette explications très utile dans mon apprentissage.
Actuellement tout les témoignages on la même class css, ma question est donc la suivant.
Est-il possible d'assigner une class css différents pour chaque témoignage avec la méthode array proposé ou faut-il assigné une variable smarty pour chacun des témoignages?
Bonne journée à tous !!
Guillaume Heid
11 janvier 2016
Bonjour Alexandre,
Je suis ravi d'apprendre que cet article sert encore à certaines personnes 😉
Il est possible en effet d'attribuer une classe spécifique à chaque témoignage, mais cela se fait dans le fichier "temoignage.tpl".
Dans ce fichier se trouve un {foreach} smarty qui créé un <P> pour chacun des témoignages. Le but serait de rajouter une nouvelle classe différente par témoignage, du type : "tem1", "tem2", "tem3"…
Dans SMARTY il est possible d'afficher l'index ou l'itération de la boucle foreach courante via la variable {$smarty.foreach.foo.index} ou {$smarty.foreach.foo.iteration}, où "foo" est le nom donné à la boucle foreach
La doc ici :
http://www.smarty.net/docsv2/fr/language.function.foreach.tpl#foreach.property.index
En gros, il faudrait rajouter ça dans l'attribut "class" du <P> à la ligne 5 du fichier "temoignage.tpl" :
tem{$smarty.foreach.loop.iteration}
Bonne continuation 😉
création site web
19 juin 2015
bel article, les explications sur comment créer un module prestashop sont très claire merci pour votre aide
Agence web maroc
19 juin 2015
Merci pour ce tuto, il est simple et bien claire
ashuan
4 février 2015
Bonjour,
Merci pour ce tuto, très clair et explicite.
J'ai téléchargé ce dernier et à l'instar des autres tutos que j'ai suivi, il ne semble pas fonctionner.
Cela doit donc venir de ma manière d'intégrer le module à mon prestashop de démo.
Je suis allé dans module, j'ai cliqué sur ajouter un nouveau module, j'ai fait choisir un fichier (et j'ai essayé avec quasi tous les fichiers dispo) puis j'ai fait Charger le module.
Réponse systématique : Type d'archive inconnu
Une idée ?
D'avance, merci.
grandtouffu
19 janvier 2015
bonjour,
beaucoup de retard pour cette réponse. je te remercie de ta réactivité. J'ai finalement réussi a régler mon problème mais je bute sur quelque chose d'autre. Pourrais tu m'indiquer une lien vers un tuto détaillé pour le développement d'un module stp? (autre que la doc)
je cherche a faire un module qui envoie un mail a la validation du formulaire. Mon problème: je n'arrive pas à faire passer les infos du formulaires vers la page php pour pouvoir les traiter…
(faut il que je vous fournisse le tpl du formulaire ou le controlleur php?)
merci d'avance.
Unserscreen
12 janvier 2015
Bonjour et merci pour ce petit tutoriel sympa et très clair.
C'est dans les favoris ! 😉
Ps : j'adore le captcha !!
grandtouffu
27 octobre 2014
bonjour, j'aurais besoin de vos lumières et de votre savoir.
Je suis en train de développer un module qui me permettrait de proposer sur mon site un calcul dynamique d'un produit en fonctions de caractéristiques entrées par l'utilisateur. J'affiche le module dans la colonne de gauche ou l'utilisateur peut cliquer sur un bouton qui lui ouvre un formulaire afin d'entrer les caractéristiques voulues.
Mon probleme actuel est le suivant: au clic sur le lien, qui est censé afficher le formulaire dans la partie centrale du site, soit rien ne se passe, soit je suis redirigé vers une page 404. Je ne sais pas ou j'ai pêché et je suis un peu perdu…. de l'aide a me proposer?
Guillaume Heid
28 octobre 2014
Bonjour grandtouffu,
Il est assez difficile de répondre à ce genre de question sans avoir un aperçu de votre boutique.
Cela peut provenir d'un problème javascript, de votre module ou d'un conflit avec un autre module. Mais ça peut également provenir d'une réelle 404…
Je vous conseil de vous fier à vos outils de débogage tels que firebug, ou la console de votre navigateur pour y voir plus clair.
J’espère vous avoir aider 😉
Declerck
5 septembre 2013
Il y a t il un cours plus approfondi et détaillé sur la conception des modules prestashop?
Guillaume Heid
5 septembre 2013
Bonjour Declerck,
Le web dispose de nombreuses ressources traitant du développement de modules PrestaShop.
Je n’ai pas connaissance, à l’heure actuelle, de l’existence d’un cours appronfondi, en dehors des sessions formation données par PrestaShop eux-même.
Je pense cependant qu’en suivant ce tutoriel vous avez toutes les cartes en main pour comprendre le fonctionnement global des modules. Ensuite, je ne peux que vous suggérer de vous faire votre propre expérience 😀
Cynthia
27 juin 2013
Bonjour,
Je suis en train de réaliser un module en utilisant celui-ci comme modèle. Néanmoins je me demande si la mise à jour des témoignages se feraient de la même façon si on utilisait un input ou un select.
Guillaume Heid
27 juin 2013
Bonjour Cynthia et bienvenue sur notre blog.
Je suis heureux de voir que ce tuto vous est utile 🙂
En effet, je pense que le textarea peut facilement être remplacé par un input. Par contre je n’ai pas très bien compris pour le select ?
Cynthia
27 juin 2013
Merci! Le fait est que je fais un module dans lequel l’administrateur doit sélectionner dans une liste de valeurs celle qui lui convient. Donc je voulais savoir si je pouvais appliquer la même méthode que pour les textarea. En ce qui concerne le ‘input’ quand j’ai essayé, la valeur que rentre l’admin s’enregistre dans la base de données mais ne reste pas affichée pour une prochaine configuration. Je ne sais pas si je me suis bien fait comprendre désolé ^^ »
Guillaume Heid
27 juin 2013
D’accord, je comprend mieux.
Pour que la valeur « reste » sélectionné dans l’admin, il faut faire un test sur la valeur enregistrée dans la base de donnée et celle de l’option courante. Lorque les deux valeur sont égales, il faut ajouter l’attribut selected à l’option de liste. Ainsi elle sera sélectionné par défaut.
Cette fois-ci c’est moi qui espère m’être bien fait comprendre ^^
Cynthia
27 juin 2013
Oui oui j’ai compris, je m’y met de suite! C’est gentil de m’avoir aidé 🙂
Laurent
5 juin 2013
Merci beaucoup, je vais voir 🙂
Laurent
5 juin 2013
Bonjour Guillaume,
Merci pour votre réponse. Avec cette méthode (tableau de valeurs), prestashop affichera automatiquement le bon texte selon la langue choisie par l’utilisateur ?
Merci !
Guillaume Heid
5 juin 2013
Non, ça serait trop facile 😉
Il faudra ensuite récupérer la langue adéquate lorsque l’utilisateur appelle la page.
Vous pouvez lire l’article de Julien Breux au sujet de la Configuration (http://www.julien-breux.com/2010/01/11/tutoriel-prestashop-utiliser-la-configuration/).
Ça devrait vous éclairer 😉
Laurent
5 juin 2013
Bonjour,
merci pour cet article !
Auriez-vous l’idée de comment faire pour par la suite traduire les témoignages en anglais par exemple ?
Merci !
Guillaume Heid
5 juin 2013
Bonjour Laurent, et bienvenue sur notre blog !
Pour rester au plus proche de ce tutoriel, je vous conseillerai d’utiliser les langues de la classe Configuration, et de dupliquer les champs « textarea » pour chaque langue :
// Enregistrement d’une clé en Anglais (1) et en Français (2)
$valeurs = array(
1 => ‘Testimony test in english!’,
2 => ‘Témoignage test en français !’,
);
Configuration::updateValue(‘TEMOIGNAGE_1’, $valeurs);
Cependant, il serait peut-être plus judicieux de créer carrément une table pour stocker les témoignages…
Peut-être que ceci pourra faire partie d’un futur tutoriel ? 😉
maranto
15 avril 2013
Bonjour,
Le zip était corrompu mais je l’ai entré par FTP donc pas de problème.
Une petite question, comment faire si je veux que les champ de témoignage puissent avoir l’éditeur tinymce?
Félicitations pour ce tutoriel simple et complet !
Guillaume Heid
15 avril 2013
Bonjour maranto et bienvenue sur notre blog !
Le problème du zip corrompue semble être lié à l’utilisation d’un MAC. Je reconnais que c’est assez étrange. En tout cas voilà une solution qui devrait en aider plus d’un 😉
Concernant l’éditeur tinyMCE, il faudrait que je me penche un peu plus en détail dessus pour vous apporter une réponse complète. Aussi je vous invite à exploiter le code du module « editorial » (éditeur de la page d’accueil) et de vous en inspirer pour parvenir à vos fins.
Bonne continuation 😉
maranto
15 avril 2013
Re,
Merci de votre réponse rapide. Non je télécharge sous PC pas sous Mac. J’ai déjà regardé d’autres modules qui utilisent l’éditeur mais je ne me sens pas encore assez à l’aise pour mettre en pratique. Alors j’avoue si l’article était complété en montrant comment inclure l’éditeur, hummm j’en salive d’avance …
lavieenarts
18 mars 2013
Bonjour,
Merci pour le Tuto surement très explicite pour qq qui en a deja fait mais pourriez vous developper la partie basique caisse à outils : concretement comment commence t on à faire un module? quel logiciel utiliser où enregistrer les fichier etc. comment le charger sur son presta etc
les bonnes pratique de base pour debutant MERCI
Guillaume Heid
18 mars 2013
Bonjour lavieenarts, et bienvenue sur notre blog !
Il est vrai que cet article s’adresse plutôt à un public qui a déjà une première expérience sur PrestaShop, mais pas focément dans le développement de module.
Les différents points que vous évoqués seront peut-être traités dans une futur article, mais en attendant, je peux vous précisier ceci afin de vous aider un peu :
Comment commence t on à faire un module?
Comme je l’ai indiqué dans l’article 😉 je pense avoir été très explicite la-dessus.
Il faut créer son arborescence de dossiers/fichiers.
Quel logiciel utiliser ?
Celui que vous préférez. Dreamweaver, Notepad++ etc. Je pense que si vous posez ce genre de questions, vous avez d’autres choses à apprendre avant de vous lancer dans la conception de modules PrestaShop 😉
Ou enregistrer les fichiers ?
Pour tester votre module, votre dossier /monmodule, doit se trouver dans le répertoire /modules/ de PrestaShop.
Vous pouvez l’y placer via un client FTP type Filezilla, ou en uploadant un ZIP de votre module via l’outil intégré de PrestaShop.
J’espère vous avoir aidé un peu plus, mais encore une fois, certaines connaissances de PrestaShop et en programmation sont nécessaire au développement de modules 😉
lavieenarts
18 mars 2013
YES un grand Merci je vais m’y atteler avec Notepad++ et Filezilla euh je viens de passer de PC à Mac c pas un soucis ? je peux tj programmer sur pc et tester sur Mac 🙂
Guillaume Heid
27 février 2013
Certains utilisateurs rencontrant des soucis lors de la décompression du fichier ZIP, veuillez nous informer si vous rencontrez certains problèmes, nous ferons en sorte de vous renvoyer l’archive par e-mail.
😉
cachema
9 décembre 2013
Bonjour, félicitation pour ce tuto, bien présenté, agréable à lire et clair. Sauf que quand je télécharge j'ai un message d'erreur. Serait-il possible d'envoyer l'archive par mail ?
merci,
cordialement
Thierry
5 février 2013
Bonjour,
Ce module est téléchargeable… Mais impossible de le décompresser ni sous OSX, ni sous XP ni sous W7.
Il en est de même avec ukoo_cleaner_v1.4 !
Quel logiciel avez-vous utilisé pour être aussi peu compatible ?
Guillaume Heid
5 février 2013
Bonjour Thierry, et bienvenue sur notre blog.
Nous avons utiliser 7zip pour la compression, et jusqu’à présent vous êtes le seul à nous avoir remonté ce problème. Je viens à l’instant de vérifier sous XP, et mon collègue sous W7 est ça fonctionne.
J’en profite aussi pour dire que ce genre de problèmes devraient être signalés à l’adresse modules@ukoo.fr, et non pas sur le blog.
Cordialement, 😉
francois
3 février 2013
Bonjour.
Tout d’abord merci pour ce tutoriel, très clair.
Pour info, le module n’est pas téléchargeable depuis votre boutique. Le message d’erreur qui s’affiche est le suivant : K2_FILE_DOES_NOT_EXIST
Cdlt
Francois
Guillaume Heid
4 février 2013
Bonjour francois, et bienvenue sur notre blog.
Le problème lié au téléchargement du module de démonstration à été corrigé. Vous pouvez à présent le télécharger correctement sur store.ukoo.fr. 😉
Cordialement,