Module magento, création d’un module simple 2/3 : Attacher un layout au controllers

novembre 6, 2009 17 Commentaires

Suite au précédent tutoriel sur la création d’un module magento « simple », qui affichait un texte sans aucune mise en page, nous allons voir comment améliorer le module. Il comprenait un dossier controllers et un dossier etc (configuration du module). Dans ce nouveau tutoriel, nous allons rattacher un layout à notre controller et le charger. Pour une meilleure compréhension, vous pouvez lire : introduction au model view controller MVC.

Attacher un layout à notre module

Vous devez déclarer le layout dans le fichier config.xml du module

magento\app\code\local\Magentocreation\Module\etc\config.xml

En rajoutant le noeud layout au code crée dans le premier tutoriel. Voici le code complet :

<?xml version="1.0"?>
 
<config>
    <modules>
        <Magentocreation_Module>
            <version>1.0</version>
        </Magentocreation_Module>
    </modules>  
    <frontend>
        <routers>
            <monrouteur>
                <use>standard</use>
                <args>
                    <module>Magentocreation_Module</module>
                    <frontName>Magentocreation-Module</frontName>
                </args>
            </monrouteur>
        </routers>
		<layout>
                  <updates>
                     <monrouteur>
                        <file>aveclayout.xml</file>
                     </monrouteur>
                </updates>
              </layout>
    </frontend>   
</config>

Explication du noeud layout

Magento chargera le fichier aveclayout.xml qui se trouve dans le dossier layout de votre thème. Le code est facile à comprendre, c’est un layout de mise à jours « update », on donne le nom du fichier suivi de l’extension.
Vous devez renseigner le controller pour qu’il charge le layout.

Le controller charge le layout

Rajoutez ce morceau de code dans le fichier IndexController.php. Créez une deuxième méthode aveclayoutAction()

 public function aveclayoutAction()
    {
       	$this->loadLayout();
	$this->renderLayout();
    }

Cette méthode charge le layout et l’affiche, le nom du layout est défini a l’étape 1 dans le fichier config.xml.

Création du layout

Nous allons créer un layout avec un noeud spécifique à notre vue

<?xml version="1.0"?>
<layout>
   <monrouteur_index_aveclayout> 
        <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>					
 
	<reference name="content">
	<block type="core/template"  name="montemplate"  template="magentomodule/montemplate.phtml"> </block>
	</reference>
 
   </monrouteur_index_aveclayout>
</layout>

Explication code du layout

<monrouteur_index_aveclayout> 
monrouteur=>nom du routeur 
index=> nom du controller 
aveclayout =>nom de la methode du controller

Le layout chargera un nouveau agencement de page 2colums-left et chargera dans la partie contenu de la page un template « montemplate.phtml », ce template sera rattaché au block « core/template ».

Création du template

Dans le dossier template de votre thème créez un dossier magentomodule qui contient le fichier montemplate.phtml

A l’intérieur placez ce code :

<?php
 echo "je viens de charger un template par l'intermédiaire de mon module, ce template est appelé via le layout contrôlé par mon controller";
?>
 <h1>super promotion  </h1>
 <strong> Pour l'achat d'un site magento une friteuse* offerte ! </strong>
 <p>blablabalbalbal beaucoup de texte pour cacher la petite étoile
 <h6>* capacité de la friteuse 4 à 6 frites</h6>

Vous pouvez tester le résultat sur cette URL :

 http://localhost/magento/Magentocreation-Module/index/aveclayout

Le layout renverra une structure de page 2colum-left, avec le contenu du template « montemplate.phtml » dans la partie content de la page.

Le module charge le layout qui est definie dans l'action du controller

Le module charge le layout qui est défini dans la méthode du controller

Notre module a toujours la même structure un dossier controllers et un dossier etc. Bien que nous utilisons un block dans le layout ce n’est pas un block spécifique a notre module. Dans le prochain tutoriel consacré au module, nous allons ajouter un dossier block et utiliser la méthode getChildHtml() pour structurer notre page.

Code
17 commentaires : “Module magento, création d’un module simple 2/3 : Attacher un layout au controllers”
  1. fred dit :

    Salut
    je comprends mieux le fonctionnement des modules. je veux la friteuse ;)
    Les autres éléments d’un module model, sql , helper quels sont leurs rôles ?

  2. admin dit :

    Bonjour fred
    je prépare un autre tutoriel sur les modules, qui explique l’architecture d’un module, le dossier controller, Block, helper, model et sql. tu aura toutes les réponses, je pense le poster cette semaine.

  3. vankeith dit :

    je cherche les élements de compréhension d’un module, model, sql, helper.
    je veux savoir leurs rôles.
    Merci d’avance pour les explications, si possible un exemple d’étude de cas .

  4. Aure dit :

    Je ne suis pas sûr de l’endroit ou mettre la définition de mon layout ? Merci d’avance …

    page/1column.phtml

  5. Elodie dit :

    Bonjour,
    J’ai suivi ce tutoriel mais lorsque je rentre l’url type « index.php/frontName/moncontroleur/mamethode » je tombe sur la page d’erreur « There has been an error processing your request » j’ai vérifié les noms maintes fois mais rien à faire.

    Quand j’appelle le controleur sans spécifier la méthode, je tombe sur la page de la première partie du tuto (toute blanche avec mon echo)

    J’ai l’impression qu’il trouve quelque chose tout de même sinon j’aurais une erreur 404. Est-ce que la méthode de rattachement du layout diffère avec la version 1.4 ?

    Voici le contenu de mon controleur :
    class Wsf_OffresSpeciales_IndexController extends Mage_Core_Controller_Front_Action
    {
    public function indexAction()
    {
    echo « Salut c’est le controller des offres speciales :-) !!! »;
    }

    public function offresspecialesAction()
    {
    $this->loadLayout();
    $this->renderLayout();
    }
    }

    Si je rajoute $this->offresspecialesAction(); dans la fonction principale j’ai bien le layout qui s’affiche avec l’echo mais à ce moment là pas moyen de rattacher le .phtml qui je voudrais appeler.

    Merci

  6. cédric rousset dit :

    Bonjour,
    Je n’ai pas testé avec magento 1.4
    Essaye de faire des copier coller de mon code tu verra si ça marche.

  7. Elodie dit :

    Effectivement ça fonctionne avec la version 1.4, il doit y avoir un petit soucis dans 2column-left.phtml car ça fonctionne avec les autres agencements.

    Merci de votre réponse :)

  8. Elodie dit :

    Rectification : Il n’y a que la page 1column qui fonctionne. Je n’utilise que 2column-left pour mon site. Réglé comme agencement par défaut bien entendu, bref c’est étrange tout ça.

  9. Adrien dit :

    Salut,
    J’ai fait ton tuto, cependant je n’arrive pas à afficher le contenu de mon template: « montemplate.phthml ». Tout le reste fonctionne sauf cela. De quoi cela pourrait il venir?

    J’utilise le theme par défaut magento, donc mes layout et template sont dans design/frontend/base/default… Cela peut-il venir de là? Ou alors il y a t il quelque chose à modifier dans les paramètres de Magento?

    Merci d’avance

  10. cédric rousset dit :

    Bonjour,
    Donne moi le chemin complet vers ton template svp

  11. Adrien dit :

    Je n’avais pas désactiver le cache… Au temps pour moi…
    Tes tutoriels sont très bons!

  12. cédric rousset dit :

    On se fait toujours avoir par le cache :)

  13. Boris dit :

    Où sommes-nous censé créer le fichier aveclayout.xml?
    Je l’ai créé dans:
    /nomdemonprojet/app/design/frontend/base/default/layout/aveclayout.xml

    Le template (montemplate.phtml), je l’ai mis dans:
    /nomdemonprojet/app/design/frontend/base/default/template/magentomodule/montemplate.phtml

    Ca ne fonctionne pas, j’ai bien la sidebar, mais je n’ai pas le contenu de mon template.

  14. Boris dit :

    Bonjour,

    J’ai réussit à faire fonctionner l’ensemble…problème de cache.

    La gestion du cache est pénible :)

  15. cédric rousset dit :

    Tu vois quand tu veux ^^ :)
    Je me fais encore (rarement )avoir par le cache…

  16. Bilel dit :

    Merci sympa comme tuto,
    Seul default normalement il faudrait pas codé directement sur le dossier, community ou enterprise car si vous faite les mise à jours, tous votre travail sera supprimé et vous serai très mal, dans ces cas la je vous propose d’ajouter votre code dans le dossier Apps-code->local puis ensuite vous crée votre projet, de plus vous devez faire de même sur le dossier design->frontend->création d’un dossier ->default->layout && template && … et de même dans le dossier skyn

    Mais bravo pour le tuto !

Poster un commentaire

(obligatoire)

(obligatoire)