PrestaShop 1.5
Child pages
  • Créer un module PrestaShop

Versions Compared

Old Version 12

changes.mady.by.user Fabien Gardahaut

Saved on

compared with

New Version Current

changes.mady.by.user Xavier Borderie

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Un dossier racine, portant le même nom que le module, qui contient tous les fichiers du module et se trouve dans le dossier /modules de PrestaShop.
  • Un fichier PHP principal, portant le nom du module, placé à la racine de ce dossier. Ce fichier PHP doit avoir le même nom que le dossier du module.
  • Deux fichiers icônes, afin de représenter le module dans le back-office :
    • Un fichier pour PrestaShop 1.4 (si besoin) : logo.gif, 16*16 pixels.
    • Un fichier pour PrestaShop 1.5 : logo.png, 32*32 pixels.
  • Facultatif : un fichier template .tpl, contenant le thème du module.
  • Facultatif : un fichier de langue, si le module ou son thème affichent des chaînes de texte (qui doivent, de fait, être traduites).
  • Facultatif : dans un dossier /themes/modules, un dossier avec le même nom que le module, contenant les fichiers .tpl et de traduction si nécessaire. Ce dernier dossier est essentiel pendant les modifications d'un module existant, afin que vous puissiez l'adapter sans jamais toucher à toucher ses fichiers originaux. Notamment, il vous permet de gérer l'affichage d'un module de différentes manières en fonction du thème actuel.

...

  • Le fichier de démarrage : nom_du_module.php
  • Le fichier de configuration du cache : config.xml
  • Les contrôleurs spécifiques au module, stockés dans le dossier /controllers
  • Les classes de surcharge, stockées dans le dossier /override (installation et désinstallation automatique par copie ou par fusion du code)
  • Les fichiers de vue (templates, JavaScript, CSS, etc.). Ils peuvent être placés dans ces dossiers du module :
    • dossier /views/css pour les fichiers CSS. Si le module doit être compatible avec PrestaShop 1.4, les fichiers CSS doivent être placés à la racine du module, dans un dossier /css.
    • dossier /views/img pour les fichiers image. Si le module doit être compatible avec PrestaShop 1.4, les fichiers image doivent être placés à la racine du module, dans un dossier /img.
    • dossier /views/js pour les fichiers JavaScript. Si le module doit être compatible avec PrestaShop 1.4, les fichiers JS doivent être placés à la racine du module, dans un dossier /js.
    • dossier /views/templates/admin  pour les fichiers utilisés par les contrôleurs admin du module.
    • dossier /views/templates/front pour les fichiers utilisés par les contrôleurs front du module.
    • dossier /views/templates/hook pour les fichiers utilisés par les hooks du module.
    À partir de la v1.5, les fichiers JavaScript et CSS peuvent être placés dans ces sous-dossiers :
    • dossier /views/css pour les fichiers CSS.

    • dossier /views/js pour les fichiers JavaScript.v  

      Info

      Vous pouvez placer vos fichiers CSS, JavaScript et images dans n'importe lequel des dossiers autorisés. Efforcez-vous surtout d'être cohérent, et en cas d'overload, de toujours utiliser le même chemin que le code original.

  • Logo du module en 16x16 : nom_du_modulelogo.jpg (format JPG ou GIF)
  • Logo du module en 32x32 : name_om_du_modulelogo.png (format PNG)
  • Fichiers de traduction : fr.php, en.php, es.php, etc. À partir de la v1.5, tous ces fichiers peuvent être placés dans le dossier /translations.

...

Note
titleDésactiver le cache

Si vous avez suivi ce tutoriel à la lettre et que vous ne voyez toujours rien s'afficher dans la colonne de gauche de votre thème, cela peut être dû au cache de PrestaShop, qui conserve les versions précédentes de vos templates et continue de vous les servir telles quelles. C'est pourquoi vous voyez toujours la version originale du thème, sans vos changements.

Smarty met en cache une version compilée de votre page d'accueil, pour des questions de performance. C'est extrêmement utile pour les sites en production, mais gênant pour les sites en phase de test, où vous êtes amené à rechargé recharger très régulièrement la page d'accueil afin de voir l'impact de vos modifications.

Lorsque vous modifiez ou déboguez le thème d'un site de test, vous devriez toujours désactiver le cache, afin de forcer Smarty à recompiler les templates à chaque chargement.
Pour ce faire, rendez-vous dans le menu "Paramètres avancés", ouvrez la page "Performances", et dans la section "Smarty" :

  • Cache des templates. Choisissez "Forcer la compilation à chaque appel".
  • Cache. Désactivez-le.
  • Console de débogage. Vous pouvez également faire s'ouvrir la console si vous voulez en apprendre plus sur le fonctionnement interne de Smarty.

Ne désactivez jamais le cache sur un site en production, ni n'activez la console de déboguagedébogage, car cela ralentirait tout !
Vous devriez toujours réaliser vos tests sur un site à part, idéalement installé sur votre propre ordinateur plutôt qu'en ligne.

...

Tip

Vous devriez vous assurer de donner des noms explicites à vos fichiers templates, afin de pouvoir les retrouver facilement dans votre back-office – ce qui est indispensable une fois que vous devez utiliser l'outil de traduction.

Voici nos deux fichiers :

...

La méthode setTemplate() s'occupera d'intégrer notre template ne contenant qu'une ligne, et d'en faire un une page complète, avec en-tête, pied de page et colonnes.

...

Enregistrez les deux fichiers dans leurs dossiers respectifs, et rechargez la page d'accueil, puis cliquez sur le lien "Click me!", et vous pouvez voir que vote votre lien fonctionne comme attendu. Avec juste quelques lignes, le résultat final est déjà beaucoup mieux, la ligne "Welcome" étant maintenant placée au milieu de l'interface.

...

  1. Tools::isSubmit() est une méthode propre à PrestaShop, qui vérifie si le formulaire indiqué a bien été validé.
    Dans ce cas, si le formulaire de configuration, le bloc if() entier est sauté et PrestaShop ne lit que la dernière ligne, qui affiche le formulaire de configuration avec les valeurs actuelles, tel que généré par la méthode displayForm().
  2. Tools:getValue() est une méthode propre à PrestaShop, qui récupère le contenu du tableau POST ou GET pour en tirer la valeur de la variable indiquée.
    Dans ce cas, nous récupérons la valeur de MYMODULE_NAME du formulaire, transformons sa valeur en une chaîne à l'aide de la méthode strval(), et la stockons dans la variable PHP $my_module_name.
  3. Nous vérifions ensuite l'existence de véritable contenu dans $my_module_name, notamment en utilisant Validate::isGenericName().
    L'objet Validate contient de nombreuses méthodes de validation, parmi lesquelles se trouve isGenericName(), une méthode qui vous aide à vérifier qu'une chaîne est bien un nom de variable PrestaShop valide – c'est-à-dire qu'elle ne contient pas de caractères spéciaux, pour simplifier.
  4. Si ces tests échouent, le formulaire de configuration s'ouvre avec un message d'erreur, indiquant que la validation du formulaire a échoué.
    La variable $output, qui contient le rendu final du code HTML qui compose la page de configuration, affiche en premier lieu un message d'erreur, créé à l'aide de la méthode displayError(). Cette méthode renvoie le code HTML nécessaire à nos besoins, et étant qu'il est le premier inséré dans $output, cela signifie que la page s'ouvrira avec ce message.
  5. Si ces tests réussissent, cela signifie que nous pouvons stocker la valeur dans la base de données.
    Comme nous l'avons vu plus tôt dans ce tutoriel, l'objet Configuration a exactement la méthode dont nous avons besoin : updateValue() stockera la nouvelle valeur pour MYMODULE_NAME dans la table de configuration.
    Pour cela, nous ajoutons une notification à l'utilisateur, indiquant que la valeur a bien été mise à jour : nous utilisons la méthode displayConfirmation() de PrestaShop, qui place le message en premier dans la variable $output – et donc, en haut de la page.
  6. Enfin, nous utilisons la méthode displayForm() (que nous allons créer et expliquer dans la section suivante) pour ajouter du contenu à $output (que le formulaire a ait été validé ou non), et renvoyons ce contenu dans la page.
    Notez que que nous aurions pu inclure le code de displayForm() directement dans getContent(), mais que nous avons choisi de séparer les deux pour des questions de lisibilité et de séparation des intérêts.

...

Voici le rendu du formulaire tel qu'actuellement écrit – comme vous pouvez le voir vous-mêmes même en cliquant sur le lien "configurer" du module dans le back-office :

...

Les chaînes du module sont écrites en anglais, vous pourriez vouloir que vos les propriétaires de boutiques français, espagnols ou polonais puissent également utiliser le module. Vous devez donc traduire ces chaînes dans ces différentes langues, que ce soit pour les chaînes du back-office comme celles du front-office. Idéalement, vous devriez traduire votre module dans l'ensemble des langues disponibles sur votre boutique. Cela peut s'avérer être une tâche laborieuse, mais Smarty et l'outil de traduction de PrestaShop vous simplifient au maximum la tâche.

...

Info
titleTraduire du code complexe

Comme vous pouvez le voir, la base de la traduction d'un fichier template consiste à placer ses chaînes dans le bon appel Smarty : {l s='The string' mod='name_of_the_module'}. Les modifications des textes pour les titres et liens des fichiers display.tpl et in mymodule.tpl sont donc faciles à comprendre. Mais nous avons ajouté un bloc de code plus conséquent pour la chaîne "Hello World" : une condition if/else/then, et une variable de texte. Explorons ce code.

Voici le code original :

Code Block
Hello, 
  {if isset($my_module_name) && $my_module_name}
    {$my_module_name}
  {else}
    World
  {/if}
!

Comme vous pouvez le voir, nous devons rendre la chaîne "Hello World!" traduisible, mais également prendre en compte le fait qu'il y a une variable. Comme expliqué dans le chapitre "Les traductions dans PrestaShop 1.5", les variables doivent être marquées à l'aide de marqueurs sprintf(), tels que %s ou %1$s.

Il est facile de rendre "Hello %s!" traduisible : nous devons simplement mettre ce code en place :

Code Block
{l s='Hello %s!' sprintf=$my_module_name mod='mymodule'}

Mais dans notre cas, nous devons également faire en sorte que %s soit remplacé par "World" dans le cas où "my_module_name" n'existe pas... et nous devons rendre "World" également traduisible. Cela peut se faire en utilisant la fonction {capture} de Smarty, qui récupère la valeur de sortie au lieu de l'afficher, afin de l'utiliser plus tard. Nous l'utiliserons pour remplacer la variable avec le mot "World" s'il se trouvait que cette même variable était vide ou absente, à l'aide d'une variable temporaire. Voici le code final :

Code Block
{if !isset($my_module_name) || !$my_module_name}
  {capture name='my_module_tempvar'}{l s='World' mod='mymodule'}{/capture}
  {assign var='my_module_name' value=$smarty.capture.my_module_tempvar}
{/if}
{l s='Hello %s!' sprintf=$my_module_name mod='mymodule'}

...

La page qui se charge alors affiche les chaînes de tous les modules actuellement installés. Les modules qui ont déjà leurs chaînes traduites ont leurs sections fermées, tandis que ceux qui ont au moins une chaîne non traduite ont leur section ouverte.
Pour traduire les chaînes de votre module (celles que vous avez marqué avec la méthode l()), trouvez simplement votre module dans la liste (utiliser utilisez la recherche de votre navigateur) et remplissez les champs vides.

...

Rejoignez nos forums à l'adresse http://www.prestashop.com/forums/, et cherchez-y une réponse à votre question en tapant les mots-clefs. Si vous ne trouvez rien, utilisez le formulaire de recherche avancé. Et si ici encore la recherche ne donne rien, créez une nouvelle discussion, dans laquelle vous pourrez donner autant de détails que nécessaires nécessaire en écrivant votre question. Notez que vous devrez être enregistré pour créer une discussion.

...