Créer votre premier module sur Magento

newmodule

Nous allons voir ensemble comment créer un premier module sur Magento. Il s’agit d’un module assez simple, nous voulons proposer aux clients du site un formulaire de contact. Ce tutoriel a été réalisé sur la version 1.7 de Magento, mais rassurez-vous compte tenu de la simplicité du module il sera compatible sur toutes les versions.

Fonctionnalités de notre module

Notre module servira à générer un formulaire de contact, il faudra donc prévoir d’intervenir sur deux parties distinctes :
– Une partie visuel : affichage du formulaire avec ses champs (nom, email et message).
– Une partie code : envoi du mail et redirection vers une page de confirmation.

Développement du code

Tout d’abord il nous faut choisir deux choses :
– Un nom
– Un namespace (c’est un nom de groupe où sera placé le module)

Nous choisirons « Sample » pour le namespace, et « Contact » pour le nom du module.
Vous pouvez choisir ce que vous voulez, rien n’est imposé.

Le nom complet de notre module sera alors Sample_Contact (nom du namespace suivi du nom du module), vous retrouverez ce nom un peu partout dans les fichiers que nous allons créer ensemble.

Création du fichier « Sample_Contact.xml »

Il faut maintenant se rendre dans le répertoire app/etc/modules :
sample_2
Et y créer un nouveau fichier portant le nom « Sample_Contact.xml », qui contiendra ceci :

<?xml version="1.0"?>
<config>
<modules>
<Sample_Contact>
<active>true</active>
<codePool>local</codePool>
</Sample_Contact>
</modules>
</config>

Cette étape est systématique lorsque vous voulez créer un nouveau module.
Il est indispensable de le créer sinon votre module sera entièrement ignoré.

Notez que nous avons placé le nom complet de notre module (Sample_Contact) dans ce fichier ainsi que deux paramètres :
<active> qui sert à gérer l’état du module (on/off).
<codePool> qui sert à préciser que notre module est « fait main », ce n’est ni un module natif magento, ni un module communautaire téléchargé sur le web. Dans notre cas il faut mettre local.

Création de l’arborescence pour le code du module

Rendons nous à présent dans le répertoire app/code afin d’y créer le dossier « local » si il n’existe pas déjà.

A l’intérieur de ce dossier « local » ajouter un nouveau répertoire « Sample » (qui est notre namespace).
Dans ce dossier Sample ajouter un répertoire « Contact » (qui est le nom de notre module).
Ce qui donnera au final : « app/code/local/Sample/Contact » comme suit :
sample_1

Vous venez de créer l’arborescence de votre nouveau module, c’est ici que sera placé votre code pour récupérer les informations de notre utilisateur.
Une autre arborescence sera à créer plus tard pour s’occuper du rendu graphique du module (notre formulaire en html). Mais focalisons nous d’abord sur app/code/local/Sample/Contact.

Contenu de notre module Sample_Contact

Nous allons devoir respecter une nomenclature précise pour développer notre module, soyez très attentif au nom et à la casse des dossiers et des fichiers que vous allez créer. Vous pourriez très bien vous retrouver à chercher bêtement pourquoi le module ne marche pas à cause d’une majuscule oublié!

Le contenu de notre module se composera de 2 répertoires :
– etc
– controllers

Il peut y avoir d’autres dossiers comme « Block », « Model » et « Helper » mais nous n’en avons pas l’utilité. Ces répertoires seront expliqués dans un autre article.
sample_3

Le répertoire « etc »

Il contiendra uniquement des fichier de type xml, qui serviront à la configuration de votre module. Dans notre cas seul un fichier « config.xml » sera nécessaire. Voici son contenu :

<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
<Sample_Contact>
<version>0.1.0</version>
</Sample_Contact>
</modules>
<frontend>
<routers>
<Sample_Contact>
<use>standard</use>
<args>
<module>Sample_Contact</module>
<frontName>contact</frontName>
</args>
</Sample_Contact>
</routers>
</frontend>
</config>

Emplacement : app/code/local/Sample/Contact/etc/config.xml

On notera deux informations dans ce fichier :
– La version de notre module :0.1.0, mais vous pouvez mettre ce que vous voulez.
– Le router : nous définissons ici le chemin d’accès au module. Exemple avec « contact » où le module sera accessible via l’adresse : monsite.com/contact

Le répertoire « controllers »

Si vous êtes familier avec le pattern MVC le nom « controller » ne devrait pas vous faire peur.
Dans notre cas un simple controller portant le nom ‘index’ suffira : IndexController.php

Dans cet IndexController, nous allons créer deux pages (actions) :
– Une page pour notre formulaire de contact.
– Une autre page pour la confirmation ou remerciement.

/* app/code/local/Sample/Contact/controllers/IndexController.php */
class Sample_Contact_IndexController extends Mage_Core_Controller_Front_Action
{
public function indexAction()
{
$this->loadLayout();
if ($this->getRequest()->isPost()) {
$postData = $this->getRequest()->getParams();
$email = $postData['email'];
$message = $postData['message'];
$subject = "Nouveau message de la part de $email !";
$to = 'nicolas.verhoye@gmail.com';
if (mail($to, $subject, $message)) {
$this->_redirectUrl('contact/index/confirm');
}
}
$this->renderLayout();
}
public function confirmAction()
{
$this->loadLayout();
$this->renderLayout();
}
}

Développement du template

Maintenant que la partie « code » de notre module est terminé nous allons nous occuper du template du module. Pour ce faire, rendez-vous dans le répertoire :

app/design/frontend/base/default/template/

A l’intérieur, créez un répertoire « contact » qui contiendra deux fichiers :

1) Le formulaire de contact : form.phtml

<!-- app/design/frontend/base/default/template/contact/form.phtml -->
<form action="" method="post" id="contact-form">
<div class="content">
<h2>Formulaire de contact</h2>
<p>Veuillez remplir le formulaire suivant :</p>
<ul class="form-list">
<li>
<label for="email" class="required"><em>*</em>Adresse email</label>
<div class="input-box">
<input type="text" name="email" id="email" class="input-text required-entry validate-email" />
</div>
</li>
<li>
<label for="message" class="required"><em>*</em>Message</label>
<div class="input-box">
<textarea name="message" class="input-text required-entry"></textarea>
</div>
</li>
</ul>
<div class="actions">
<button type="submit" class="button"><span><span>Valider</span></span></button>
</div>
<p class="required">* Required Fields</p>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var contactForm = new VarienForm('contact-form');
//]]>   
</script>

2) La message de confirmation ou remerciement : confirm.phtml

<!-- app/design/frontend/base/default/template/contact/confirm.phtml -->
<div class="confirm">
Merci, votre message a bien été envoyé !
</div>

En image cela donne :
samle_4

Maintenant que nos deux fichiers html sont crées il faut les rattacher à nos deux pages.
Pour ce faire nous allons ajouter un nouveau fichier dans le répertoire : app/design/frontend/base/default/layout qui s’appellera : sample_contact.xml :

<?xml version="1.0"?>
<layout version="0.1.0">
<sample_contact_index_index>
<reference name="content">
<block type="core/template" name="contact_form" template="contact/form.phtml" />
</reference>
</sample_contact_index_index>
<sample_contact_index_confirm>
<reference name="content">
<block type="core/template" name="contact_success" template="contact/confirm.phtml" />
</reference>
</sample_contact_index_confirm>
</layout>

Emplacement : app/design/frontend/base/default/layout/sample_contact.xml

Vous noterez qu’il y a deux nœuds :

<sample_contact_index_index></sample_contact_index_index>
<sample_contact_index_confirm></sample_contact_index_confirm>

Chacun des nœuds correspond à une action/page de notre controller.
Attention à bien respecter la nomenclature pour le nom de ces noeuds, c’est à dire :

<{namespace}_{module}_{controller}_{action}>

Dans chaque nœud nous appelons la référence « content » qui correspond au contenu de notre page.
Dans cette référence « content », nous précisons que nous voulons placer notre fichier html (form.phtml ou confirm.phtml).

C’est presque terminé, il nous reste juste à relier le fichier que nous venons de créer (layout/sample_contact.xml) à notre module.
Pour ça éditez le fichier app/code/local/Sample/Contact/etc/config.xml comme suit :

<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
<Sample_Contact>
<version>0.1.0</version>
</Sample_Contact>
</modules>
<frontend>
<routers>
<Sample_Contact>
<use>standard</use>
<args>
<module>Sample_Contact</module>
<frontName>contact</frontName>
</args>
</Sample_Contact>
</routers>
<layout>
<updates>
<sample_contact>
<file>sample_contact.xml</file>
</sample_contact>                
</updates>
</layout>
</frontend>
</config>

Cette modification sert juste à préciser le l’existence de notre fichier template « sample_contact.xml » à Magento, sans quoi il ne sera pas prit en compte.

Notre module est terminé

Si vous vous rendez sur la page monsite.com/contact vous devrez y trouver ceci :
module
Bien sûr ce n’est pas grand chose, mais cela vous permettra de découvrir les bases d’un module sur Magento. Si vous le souhaitez les sources de ce module sont disponible en téléchargement.

Nicolas Verhoye

Développeur Magento, Freelance

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *