Créer un module

4 Novembre 2021

Préambule

Avant de commencer la lecture de cette documentation assurez-vous d'avoir pris connaissance de la documentation "Débuter avec prestashop". Considérez cette dernière comme un prérequis avant de vous lancer dans ce tutoriel.

Documentation à ne pas négliger pour la compréhension des modules : https://devdocs.prestashop.com/1.7/modules/creation/.

Initialiser un module

Je vous recommande d'utiliser le générateur de module : https://validator.prestashop.com/generator.

Méfiez-vous qu'il ne vous génère pas de code dépécié, car Prestashop évolue plus vite que le générateur ne prend en compte les dernirères bonnes pratiques conseillées dans la documentation développeur.

Ajouter un logo

Mettre à la racine du module une image au format .png carré avec des dimensions minimales de 32px par 32px. Elle doit impérativement s'appeler logo.png

Traduction

Dans la classe principale du module

A partir de la version 1.7.6 de prestashop intègre le moteur de traduction de symfony. Le service de traduction étant injecté dans la classe Module par défaut, vous aurez accès au service de traduction avec la méthode $this->trans(arg1, arg2, arg3) depuis votre classe MonModule, car celui-ci hérite de la classe Module.

Pour traduire une chaine de caractère voici les étapes à faire : Admettons que je veuille traduire le nom de mon module. Je vais dans le constructeur de ma classe MonMondule.

$this->displayName = $this->trans('My Module', [], 'Modules.Mymodule.Mymodule');

Mon argument 1 est la chaine à traduire (A noter qu'il va être interpreté comme un id de chaine à traduire)
Mon argurment 2 de type array() sont les variables qui sont intégrées dans la traduction
Mon argument 3 est le domaine, il assure la rétrocompatibilité des traduction avec l'ancien moteur de traduction. Pour en savoir plus je vous recommande lire cette section : https://devdocs.prestashop.com/1.7/modules/creation/module-translation/new-system/#backward-compatibility
Mon argument 4 qui est facultatif est le code langue si vous souhaitez traduire dans une autre langue que la langue actuelle. Exemple : ("en-US").

Configuer les traductions depuis le backoffice

Une fois que vos chaines de caractères sont prêtes à être traduites, rendez-vous dans votre back-office dans l'onglet International −> Traductions.

Dans la section Modifier les traductions changer le type de traduction pour la valeur "Traductions des modules installés" puis selectionnez votre module, ainsi que la langue dans laquelle traduire. Puis cliquer sur modifier.

A vous de remplir le formulaire proposé par prestashop !

Afficher du contenu sur la boutique

Voici une source d'inspiration très claire et précise pour se servir des hooks de base : https://newslang.ch/blog/guide-complet-creer-module-prestashop-1-7#afficher-contenu-boutique

Via un hook

Exemple si vous souhaitez accrocher des élément sur la page d'accueil utilisez la méthode hookDisplayHome() :

/**
 * Declare what to display on HomePage.
 */
  public function hookDisplayHome()
  {
    $this->context->smarty->assign([
      'paragraph' => '<p>Ceci est un paragraph</p>',
      'title' => "<h2>Ceci est un titre H2</h2>",
    ]);

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

Puis définissez un template /mon_module/views/templates/hook/displayHome.tpl que vous écrirer en HTML + smarty.

A noter que pour le moment l'usage de twig dans un template de hook ne fonctionne pas.

Voici la documentation relative à l'affichage : https://devdocs.prestashop.com/1.7/modules/creation/displaying-content-in-front-office/

Via un controller

Front

Le controller

Ces classes sont accessibles depuis le front-office et ajoutent des fonctionnalités aux clients.

Dans cet exemple nous allons créer un controller qui affiche une nouvelle page en reprenant le thème de la boutique en ligne. Nous admettrons que le module s'appelle mymodule. Nous allons donc créer un fichier display.php dans le répertoire : /mymodule/controllers/front/

<?php

if (!defined('_PS_VERSION_')) {
  exit;
}

class mymoduleDisplayModuleFrontController extends ModuleFrontController
{
  public function __construct()
  {
    parent::__construct();
  }

  /**
   * You can see the front page of this controller here :
   * {domain_url}/module/mymodule/display.
   */
  public function initContent() {
    parent::initContent();
    $this->setTemplate('module:mymodule/views/templates/front/display.tpl');
  }
}

Pour les explications du code veuillez vous référer à la page : https://devdocs.prestashop.com/1.7/modules/concepts/controllers/front-controllers/

Vous constaterez que ce controller retourne un template sans variables attachée.

La vue

Pour créer une vue associée à ce controller il faut créer un nouveau fichier display.tpl dans le répertoire mymodule/views/templates/front. Si vous souhaitez que le template associé hérite du template de base vous pouvez intégrer le code suivant :

{extends file='page.tpl'}

{block name='page_content'}
   <p>Hello world</p>
{/block}

Dorénavant vous pouvez contempler votre vue à l'url suivant : {domain_url}/module/mymodule/display

Et comme l'url n'est pas très optimisé il va falloir créer un alias.

Obtenir un url seo friendly

Pour palier au problème de l'url qui n'est pas très pratique, il faut se rendre dans le back office de Prestashop. Rendez-vous dans l'onglet Paramètre de la boutique -> trafic et SEO. En haut à droite de cette page vous trouverez un bouton "Ajouter une page".

Dans le champ page recherchez le mot "display" (le nom de notre fichier de template) et le résultat devrait s'auto-remplir avec le display de votre module. Remplissez le reste du formulaire selon vos besoins, et rendez vous sur l'url réécrite que vous avez renseignée dans le formulaire.

Admin

Le controlleur

Documentation relative à cette section : https://devdocs.prestashop.com/1.7/modules/concepts/controllers/admin-controllers/ Créer un répertoire src/Controller. Créer un fichier controller, par exemple DisplayController.php (Veuillez à bien respecter le CamelCase, cf normes PSR-4).

<?php
// modules/mymodule/src/Controller/DisplayController.php

namespace PrestaShop\Module\Mymodule\Controller;

use Doctrine\Common\Cache\CacheProvider;
use PrestaShopBundle\Controller\Admin\FrameworkBundleAdminController;

class DisplayController extends FrameworkBundleAdminController
{
    private $cache;
       
    // you can use symfony DI to inject services
    public function __construct(CacheProvider $cache)
    {
        $this->cache = $cache;
    }
    
    public function displayAction()
  	{
    	return $this->render('@Modules/mymodule/views/templates/admin/display.html.twig');
  	}
}

Faites bien attention au namespace, la documentation de prestashop ne préconise pas d'utiliser un namescpace spécifique, nous recommandons qu'il respecte "PrestaShop\Module\{NomDuModule}\Controller"