PrestaShop est la référence en site e-commerce, il est très facile à mettre en place, très facilement utilisable, possède des effets avancés … Bref, une référence dans son domaine.
Pour les développeurs ou les curieux, il peut être intéressant de comprendre un peu mieux le Back-end de gros CMS.

PrestaShop possède beaucoup de Helpers (des fonctions pré-faites, ou écriture de pre facilitée) pour vous permettre de créer vos propres modules. Cela n’est en aucun cas réservé aux plus chevronnés !
La plupart demande la langue en cours.
Comment récupérer l’id_lang où donc la langue en cours ? Grâce à : $params['cookie']->id_lang.

Nous allons ici réaliser un Slider (galerie dynamique) utilisant la technologie Flash pour présenter nos produits, et créer un module à partir de tout ça.

Découvrez sur notre Boutique ce module à télécharger gratuitement ici.

Et un autre module très utile aussi ici pour intégrer le paiement par carte bleue sur votre site e-commerce, module gratuit aussi.

Alors revenons au tuto, nous avons un Slider fait en Flash, qui demande un fichier XML de configuration. Ce fichier comporte des paramètres globaux, et notre liste d’image avec une description de chacune, et le lien vers la fiche produit. Nous ne reviendrons pas sur la construction de ce Slider, n’hésitez pas à nous contacter si vous avez des questions.
Ce module sera très bientôt téléchargeable sur notre site Boutique gratuitement.

Notre mission consiste ici à écrire un script permettant de créer un fichier XML à partir des informations de notre boutique. En effet, ce Slider est dynamique, nous voulons qu’il se mette à jour tout seul.

Commençons par créer un dossier sur notre serveur, tous les modules PrestaShop sont contenus dans le dossier ‘modules’, logique …
Ce dossier va contenir nos sources, les fichiers JavaScript nécessaires, notre Slider Flash, le fichier XML.

Premier objectif, réaliser la construction de notre module en PHP. PrestaShop est bien fait, en PHP 5 donc nous allons utiliser les objets, classes …
Nous commençons par créer notre module à proprement parlé, dans un fichier PHP nous allons définir notre constructeur :

class eBuildy_slider extends Module
 {
 function __construct()
 {
 $this->name = 'ebuildy_slider'; parent::__construct();
 $this->tab = 'eBuildy - Prestataire Web 2.0';
 $this->version = '0.0.1';
 $this->displayName = $this->l('Slider Flash - Galerie automatique de produits');
 $this->description = $this->l('Un slider Flash dynamique pour présenter vos produits.');
 }
 }

Nous étendons la classe Module de PrestaShop, car nous construisons un module en effet !
Il y a ensuite certains paramètre à respecter, les 4 présentés sont les plus importants. Ces données apparaitront directement dans la partie Administration de la boutique, donc mettez des noms significatifs !

Une fois notre constructeur créé, continuons avec une méthode _install :

function install()
 {
 if (!parent::install()
 OR !$this->registerHook('leftColumn')
 OR !$this->registerHook('header')

 // Mise a défaut du nombre de produits
 OR !Configuration::updateValue($this->name.'_number', 10))
 return false;
 return true;
 }

En clair ici, nous allons définir l’endroit où installer le module. On définit Header car nous allons insérer un bout de code Javascript dans le Header (décrit plus bas), puis LeftColumn pour indiquer que ce module devra être dans la colonne de gauche de votre thème. Vous pouvez mettre Home par exemple à la place de LeftColumn pour dire que votre module sera insérer dans votre page d’accueil. Puis nous initialisations  une première valeur de configuration, nous allons voir par la suite ce qu’elle représente.

$this->name.’_number’ sera traduit en Php par : “ebuildy_slider_number”. Nous pourrions juste mettre “number” comme nom de variable.
Autre méthode indispensable, celle de la désinstallation, il faut bien penser à utiliser deleteByName pour dissocier  la variable utilisée dans notre module :

public function uninstall()
 {
 Configuration::deleteByName($this->name.'_number');
 parent::uninstall();
 }

Bien, nous voila donc avec un module à Installer, une valeur est configurable depuis la partie administration, il est possible de désinstaller, le module possède une description assez complète dans le panel. Nous allons continuer la partie back-end du module en rendant possible la modification de la valeur de configuration :

private function _postValidation()
 {
 if (!Validate::isUnsignedInt(Tools::getValue('number')))
 $this->_postErrors[] = $this->l('Ce nombre doit être positif et entier.'); }
private function _postProcess()
 {Configuration::updateValue($this->name.'_number', Tools::getValue('number'));
  $this->_html .= '
 <div>'.$this->l('Mis à jour.').'</div>
 ';}

Deux méthodes sont créées, une permettant la validation de la valeur, si celle-ci est bien un Entier, l’autre confirmant la mise à jour et mettant la valeur à jour ! Respectez bien les noms des méthodes.

Ensuite, nous allons expliciter tout ça à PrestaShop, en créant le formulaire de mise à jour de valeur :

public function getContent()
 { $this-&gt;_html .= '<h2>'.$this->displayName.'</h2>';
if (Tools::isSubmit('submit'))
 { $this->_postValidation();
if (!sizeof($this->_postErrors))
 $this->_postProcess();
 else
 {
 foreach ($this->_postErrors AS $err)
 {
 $this->_html .= '
 <div>'.$err.'</div>
 ';
 }
 } }$this-&gt;_displayForm();
return $this->_html;
 }

private function _displayForm()
 {
 $this->_html .= '
 <form action="'.$_SERVER['REQUEST_URI'].'" method="post">
 <fieldset> <legend><img src="../img/admin/cog.gif" alt="" />'.$this->l('Settings').'</legend><label>Maximum de produits</label>
 <div><input name="number" type="text" value="'.Tools::getValue('number', Configuration::get($this->name.'_number')).'" /> <p>'.$this->l('Nombre de produits maximum à afficher').'</p>
 </div>
 <input name="submit" type="submit" value="'.$this->l('Update').'" /></fieldset>
 </form>';
 }

Nous avons ici du HTML assez classique, inspirez-vous directement de celui-ci. Nous avons un formulaire permettant de changer une valeur décimale sur notre module. Il faut le créer donc, et préciser quelques règles.
Voila, nous avons un back-end assez complet, notre module est installable, dés-installable, uptatable via un formulaire. Tous les éléments sont réunis.
Donc, nous allons nous attaquer au coeur du module, ici dans notre cas, à la création d’un fichier XML pour faire vivre notre FLASH.

Ceci est décrit dans la méthode :

public function hookLeftColumn($params)
 { global $smarty;

 $category = new Category(1);
 $nb = intval(Configuration::get($this->name.'_number')); $products = $category->getProducts(intval($params['cookie']->id_lang), 1, ($nb ? $nb : 10), 'date_add', 'DESC');$file= fopen("modules/".$this->name."/slider.xml", "w");
 $_xml ="\r\n";
 $_xml .="\r\n";$_xml .= "\n";

foreach ($products AS $row)
 { $link = new Link();
 $_xml .="\t ";
 $_xml .= "<![CDATA[<font color = '#000000' size = '12'>".$row['name']." | </font><font color = '#604917' size = '12'> ".$row['price']." €</font>]]>";
 $_xml .="</item>\n";
}
$_xml .="</items>";
$_xml .="</slider>";
fwrite($file, $_xml);
fclose($file);

$smarty->assign(array(
 $this->name.'_path' => _MODULE_DIR_.$this->name.'/', ));

return $this->display(__FILE__, 'ebuildy_slider.tpl');
}

Essayons de décortiquer ce pre. Nous commençons par une variable globale SMARTY, qui est le générateur de Templates de PrestaShop. En fait, notre fichier PHP appelle un fichier Template (.tpl). Le PHP est le modèle, le template la view. Les deux communiquent ensemble.

$nb = intval(Configuration::get($this->name.'_number'));
 $products = $category->getProducts(intval($params['cookie']->id_lang), 1, ($nb ? $nb : 10), 'date_add', 'DESC');

Nous récupérons ici la valeur de la configuration de notre module. Soit la valeur a été modifiée, soit il s’agit de celle par défaut (10 ici). Ensuite, nous utilisons un Helper de PrestaShop pour récupérer dans la variable $products les derniers produits, jusqu’à la valeur $nb qui est notre valeur configurable (nombre maximum de produits à afficher).
Notre variable $products contient donc nos produits sous forme d’objet, parfait. Ensuite, créons notre XML :

 $file= fopen("modules/".$this->name."/slider.xml", "w");

On commence par ouvrir le fichier XML par défaut, en récupérant le nom du module et donc du dossier, veillez à respecter le même nom pour vos fichiers.

 $_xml ="\r\n";
 $_xml .="<slider width = '550' height = '90'\n\tbackgroundColor = 'FxFFFFFF'\n\tbackgroundTransparency = '0'\n\tautoStart = 'true'\n\tspeedValue = '10'\n\tdistanceBetweenItems = '0'\n\tarrowsColor='0xffffff'\n\tbackTextColor='0xffffff'\n\tbackTextAlpha='60'\n\toverAlpha = '100'\n\tupAlpha = '30'\n\ttextYPosition = '45'\n\ttextXPosition = '10'\n\tarrowsSize = '10'\n\tshowArrows = 'true'\n\tleftArrowX = '5'\n\trightArrowX = '543'\n\tarrowsY = 'center'>\r\n";
 $_xml .= "<items>\n";

Nous créons ensuite une variable pour stocker ce que nous allons mettre dans notre XML. Les premières lignes correspondent à des valeurs configurables pour notre FLASH, donc statiques. Il serait un bon test pour vous de rendre ces valeurs configurables via le panel administrateur, comme pour $nb.
Ensuite, nous créons notre liste de produits :

foreach ($products AS $row)
{
 $link = new Link();
 $_xml .="\t<item link=\"".$row['link']."\" imagePath=\""._PS_BASE_URL_."/img/p/".__PS_BASE_URI__."".$row['id_image']."-medium.jpg\"> ";
 $_xml .= "<![CDATA[<font color = '#000000' size = '12'>".$row['name']." | </font><font color = '#604917' size = '12'> ".$row['price']." €</font>]]>";
 $_xml .="\n";
}

$_xml .="";

$products contient bien les produits qui nous intéressent, pour le nom des colonnes, vous pouvez utiliser la documentation PrestaShop ou faire des Dump pour le voir directement.
Pour chacun de nos produits, nous créons un élément XML. Nous récupérons le nom, le lien vers la fiche produit ($row['link']), le prix …. Tout est récupérable ! Il y a beaucoup d’informations dans notre $products.
Notre fichier XML est créé, avec les bons éléments, et mis à jour automatiquement. Nous le fermons ensuite, puis attaquons la partie graphique de notre module.

$smarty->assign(array(
 $this->name.'_path' => _MODULE_DIR_.$this->name.'/', ));

return $this->display(__FILE__, 'ebuildy_slider.tpl');

assign nous permet en clair de communiquer avec notre view. Nous allons définir une variable ‘name’ qui contient notre URL vers les fichiers du module. Nous pourrions récupérer les variables configurables depuis le panel par exemple.
Enfin, nous indiquons notre view rattachée, ici elle porte le même nom que tout le reste.

Pas mal tout ça ! Nous avons presque tout ce qu’il faut. Notre fichier FLASH nécessite du Javascript (librairie SwfObject) pour qu’il soit intégré.
Il est possible depuis le module de modifier le Head par exemple de la boutique, pour insérer nos fichiers .js.

public function hookHeader($params)
 {
 $head_content='
 ';
 $head_content.='<script src="'._MODULE_DIR_.$this-" type="text/javascript">// <![CDATA[
 name.'/js/swfobject.js">
 // ]]></script>';
 return $head_content;
 }

Cette fonction modifie le Head, nous rajoutons les 2 lignes nécessaires. _MODULE_DIR_ est une variable globale qui conduit vers votre dossier module. Nous avons exprès laissé un fichier .css pour vous montrer que c’est ici qu’il faut insérer le style.

Bien, attaquons-nous au fichier Template, qui sera lui exposé sur le site. Notre fichier commence par un Script Javascript, pour utiliser notre FLASH.
Petite ‘astuce’, nous utilisons des accolades qui sont interprétées par le moteur SMARTY, du coup attention ! Il faut penser à le mettre comme cela :

<script type="text/javascript">
// <![CDATA[{literal}     
var attributes = {};     
attributes.id = 'Products_slider';     
attributes.name = attributes.id;     
var flashvars = {};         
var params = {}; {/literal}     
flashvars.pathToFiles = "{$content_dir}{$ebuildy_slider_path}";     
flashvars.xmlPath = "slider.xml";     
swfobject.embedSWF("{$content_dir}{$ebuildy_slider_path}preview.swf?t="Products_slider", 500, 200, "9.0.124", "{$content_dir}{$ebuildy_slider_path}js/expressInstall.swf", flashvars, params);
// ]]></script>

La balise : {literal} permet de dire que les lignes après ne seront pas affectées par SMARTY. Voila, notre fichier Template contient le script générateur de notre FLASH. Vous pouvez utiliser des variables SMARTY : {$content_dir} ou celles sorties de notre fichier PHP : {$ebuildy_slider_path}.
Nous finissons notre Template par la div qui va contenir notre FLASH :

<div id="Products_slider">
<a href="http://www.adobe.com/go/getflashplayer">
 <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
</div>

Voila, notre module est fini ! Le fichier PHP génère notre XML automatiquement, notre Template contient le FLASH qui utilise notre XML. PrestaShop est très bien fait dans ce sens, le travail est propre, facile grâce aux Helpers et à Smarty.

A savoir que nous utilisons ensuite un fichier preview.swf contenu dans le dossier du module.
Très bientôt les sources pour exploiter tout au mieux.
Mais cet article vous permet de comprendre le fonctionnement PrestaShop côté pre.

A très bientôt pour de nouveaux articles Presta !