Créer un module Prestashop

Dans ce tutoriel, nous allons vous expliquer comment créer un module Prestashop.

Nous allons construire un module qui affiche un nombre configurable de produits sur la page d'accueil, un module très simple. Ainsi, vous allez être en capacité de construire le module selon vos besoins.

Créer un dossier de module et définir la classe de module

Tout d'abord, nous allons créer un dossier dans le répertoire des modules. Puis, créer un fichier PHP dans le dossier avec le même nom que le nom du dossier.

Ouvrez le dossier des modules, vous verrez une convention de nommage, où tous les modules affichent le contenu commençant par le mot "block". C'est la norme, donc nous devrions suivre la règle. Je nommerai mon dossier bblockproducts , puis je créerai le fichier PHP avec le même nom.

Ouvrez le fichier PHP et définissez la classe de modules, voici un exemple:

name = 'blockproducts';
$this->tab = 'front_office_features';
$this->version = 1.0;
$this->author = 'Gabriel Manricks';
$this->need_instance = 0;

parent::__construct();

$this->displayName = $this->l('Products List Module');
$this->description = $this->l('Displays number of products in the home page.');
}
}

Les modules Prestashop sont orientés objet, vous devez donc créer une classe pour votre module.Le nom de la classe doit être identique au nom de votre dossier.

La toute première déclaration dans le fichier est l'instruction if. L'instruction consiste à rendre le fichier non chargé directement via le navigateur.

Ensuite, votre classe doit directement sous-classer la classe Module ou la sous-classe décadente de la classe Module. Dans le côté du constructeur, nous configurons les propriétés du module.

Prestashop utilise ces informations pour afficher dans le back-end :

name: "nom de code" unique, mais ce n'est pas le nom affiché dans le backend du module.
tab: indique à Prestashop la catégorie du module, la liste de toutes les catégories stockées dans le fichier Controllers Admin AdminModuleController.php.author , name et version : auteur, nom et version du module.
needs_instance: indique à Prestashop de créer une instance de votre variable lors de l'accès à la page des modules. Cela n'est généralement pas nécessaire, mais si votre module doit afficher un message ou enregistrer quelque chose lorsque la page des modules est active, vous devez changer cela en 1.

Les deux dernières lignes servent à configurer le vrai nom et la description du module. Elles utilisent la même méthode de localisation pour permettre de les traduire dans différentes langues. Ces deux lignes doivent aller après l'initialisation du parent selon l'ordre préféré de Prestashop utilisé par leurs modules officiels.

Remplacer la méthode d'installation

L'étape consiste à vous aider à spécifier les hooks dont vous avez besoin, ainsi que les options par défaut du module.

Ce but du module est utilisé pour la page d'accueil, donc nous allons l'assigner au Home Hook. Nous voulons ajouter un fichier CSS à l'en-tête, nous aurons donc besoin d'ajouter le hook d'en-tête.

Nous utilisons le nom technique des hooks pour le spécifier ici, vous pouvez voir la liste dans la partie Modules.

Après la fonction __construct() , ajoutez le php suivant:

public function install()
{
if (parent::install() == false || $this->registerHook('displayHome') == false || $this->registerHook('displayHeader') == false || Configuration::updateValue('DP_Number_of_Products', 4) == false)
return false;
return true;
}

Le code ajoutera les deux hooks et définira le nombre de produits par défaut (quatre).La propriété doit être unique afin que les autres modules n'interfèrent pas avec les valeurs. Une approche simple ajoute le nom ou les initiales de votre module au début du nom.

Le module est maintenant prêt à être installé sur votre site Prestashop. Aller à la page des modules, et il sera affiché comme enregistré sous les deux hooks.

La mise en place de hooks est assez simple. Créez une fonction public avec le mot "hook" suivi du nom du hook. Commençons par le hook d'en-tête. Nous voulons juste qu'il ajoute un fichier CSS à notre thème.

Voici la fonction complète:

public function hookdisplayHeader($params)
{
$this->context->controller->addCSS(($this->_path).'blockproducts.css', 'all');
}

Créez ce fichier CSS dans votre répertoire de thèmes, et votre modèle devrait le charger dans l'en-tête.

Faites de même pour le prochain hook, mais cela pourrait être un peu plus complexe. Le hook récupère un certain nombre de produits de la base de données et les charge dans un fichier template.

La fonction de récupération des produits ne renvoie pas les images ou les liens des produits, nous devons donc appeler quelques fonctions différentes et «construire» une gamme de produits.

Voici la fonction pour mettre en œuvre de telles choses :

public function hookdisplayHome($params)
{
$languageId = (int)($params['cookie']->id_lang);
$numberOfProducts = (int)(Configuration::get("DP_Number_of_Products"));
$productsData = Product::getProducts($languageId, 0, $numberOfProducts, "id_product", "ASC");
if (!$productsData)
return "error";



$products = array();
$link = new Link(null, "http://");


foreach($productsData as $product){
$tmp = Product::getCover($product['id_product']);
array_push($products, array(
'name' => $product['name'],
'author' => $product['manufacturer_name'],
'desc' => $product['description_short'],
'price' => $product['price'],
'link' => $link->getProductLink(new Product($product['id_product'])),
'image' => $link->getImageLink($product['link_rewrite'], $tmp['id_image'])
));



}
$this->smarty->assign(array(
'products' => $products
));



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

Le code ci-dessus commence par obtenir le nombre de produits à afficher et l'identifiant de la langue de l'utilisateur. Nous faisons ensuite un appel pour obtenir le nombre de produits assignés à partir du premier produit enregistré.

Après cela, nous nous assurons qu'il n'y ait pas de problèmes pour sortir les produits s'il y en avait.

Le bloc suivant construit un tableau avec toutes les propriétés dont nous aurons besoin lors de l'affichage de l'élément. Cela inclut l'image et le lien qui n'ont pas été retournés avec le reste des données du produit.

La dernière section est d'ajouter le tableau de produits à Smarty et charge le fichier de modèle. Le nom du fichier modèle et le nom du fichier CSS doivent être les mêmes que le nom du module.

Si vous ouvrez votre site en ce moment, vous verrez seulement un message, indiquant "Aucun modèle trouvé pour le module blockproducts". Créons donc le fichier modèle dans le répertoire du module en le nommant comme vous venez de le spécifier dans la fonction hook.

Cette partie dépend vraiment de la disposition de votre thème, mais voici mon fichier de modèle:

{if $products !== false}

<div id="home_products_title"><h1>{l s='OUR BOOKS' mod='blockproducts'}</h1></div>
{foreach from=$products item=product name=productLoop}
<div class="home_products_book">
<div class="home_products_picture"><img src="https://monsite.s3.amazonaws.com/2169_prestashop/{$product.image}" alt="{$product.name|strip_tags|escape:html:'UTF-8'}" /></div>
<div class="home_products_author">{$product.author|upper|strip_tags|escape:html:'UTF-8'}</div>
<div class="home_products_info">
<div class="home_products_title">{$product.name|strip_tags|escape:html:'UTF-8'}</div>
<div class="home_products_description">{$product.desc}</div>
<div class="home_products_price">${$product.price|string_format:"%.2f"}</div>
<div class="home_products_openButton"><a href="{$product.link}" class="btn btn-inverse">{l s='View' mod='blockproducts'}</a></div>
</div>
</div>
{/foreach}

{/if}

Prestashop utilise des modèles Smarty, il y a donc un certain nombre de fonctions auxiliaires à utiliser lors de l'affichage des données.

Nous commençons avec une fonction if pour nous assurer que le tableau des produits est correct. Si c'est le cas, nous entrons dans une boucle for, générant le code HTML spécifié pour chacun d'eux.

Nous utilisons les fonctions d'aide intégrées de Smarty pour supprimer les balises HTML et convertir le nom des auteurs en majuscules, et nous utilisons une autre méthode pour mettre en forme le prix au nombre de décimales souhaité.

Notez également que lorsque vous traduisez des chaînes ici, vous devez entrer le nom de votre module. C'est parce que la traduction n'est pas liée à un thème, mais au module lui-même. D'un autre côté, la fonction l’est spécifique au modèle. Donc, pour qu'il trouve votre fichier de traduction, il nécessite le nom du module.

Vous pouvez maintenant voir votre site dans le navigateur. Si vous avez ajouté des produits, ils devraient être affichés sur la page d'accueil maintenant.

Le module est entièrement fonctionnel maintenant, mais il n'y a aucun moyen d'ajuster le nombre de produits retournés. Pour ce faire, nous devons ajouter une fonction, appelée getContents.

Si votre module a cette fonction, Prestashop ajoutera automatiquement un bouton de configuration sur la page des modules . Tout ce qui est retourné par cette fonction sera affiché sur la page de configuration.

Pour ce faire, ajoutez la fonction à la classe du module et remplissez-la avec ce qui suit:

public function getContent(){



$html = '<div style="width:400px; margin:auto">';
$html .= ' <h2>' . $this->displayName . ' Settings</h2>';
$html .= ' <form action="'. Tools::safeOutput($_SERVER['REQUEST_URI']). '" method="post"><fieldset>';
$html .= ' ' . $this->l('Number of Products to Display') . ': <input type="number" name="numProds" value="' . (int)(Configuration::get('DP_Number_of_Products')) . '" />';
$html .= ' <input type="submit" value="' . $this->l('Save') . '" />';
$html .= ' </fieldset></form>';
$html .= '</div>';

return $html;
}

Cette fonction construit le code HTML pour afficher un formulaire avec une boîte numérique et unbouton de sauvegarde.

Encore une fois, j'utilise la méthode $this->l() pour que vous puissiez traduire le module dans d'autres langues à l'avenir, si vous avez besoin de le faire.

Nous avons utilisé utilisé un champ numérique dans le formulaire HTML, mais faites attention, si vous faites un module commercial. Ce n'est toujours pas pris en charge par tous les navigateurs. Cela dit, si c'est pour votre usage personnel, alors n'hésitez pas!

La seule autre chose qui peut sembler mystérieux est la fonction Tools::safeOutput() que nous appelons sur l'URL.

Ensuite, allez à la page des modules et cliquez sur le bouton de configuration de votre module. Vous serez accueillis avec la forme que nous venons de faire.

Il suffit d'ajouter le nombre d'éléments que vous souhaitez afficher dans le module puis enregistrer.

La valeur remplacera celle par défaut.

De retour dans la fonction, ajoutez le code suivant au début de la fonction:

if (Tools::isSubmit('numProds')){
Configuration::updateValue('DP_Number_of_Products', (int)(Tools::getValue('numProds')));
}

Cette fonction est de voir si la valeur a été soumise. Par exemple, si la valeur numProds existe en tant que variable $_GET ou $_POST.

Nous mettons ensuite à jour la propriété où nous avons stocké la valeur. La méthode Tools::getValue accepte le nom d'un champ de formulaire et éventuellement une deuxième chaîne de ce qui doit être retourné si le champ de formulaire n'a pas été trouvé; il renvoie ensuite une chaîne formatée avec la valeur qui lui a été soumise.

Il est important de mettre cela avant de générer le formulaire HTML. Sinon, le formulaire contiendra les anciennes valeurs par opposition aux nouvelles.

Avec ce dernier morceau de code, nous avons terminé le module. La seule autre chose que vous devriez faire est d'ajouter une icône GIF 16 × 16 dans votre dossier de modules.

Créer un module Prestashop