Design magento, structure d’une page

octobre 28, 2009 17 Commentaires

Une fois magento installé vous aimeriez apporter quelques modifications graphiques, modifier votre design. Magento offre une très grande souplesse à ce niveau. Avant tout il vous est nécessaire de connaître quels fichiers de votre theme sont utilisés pour structurer une page. Lorsque que l’on débute sur magento on est souvent perdu devant le nombre d’éléments nouveaux à assimiler, les blocs, blocks, template, layout, skins, thème, interface. Nous allons voir dans ce tutoriel quels sont les fichiers consacrés au design et à la mise en page.

Les fichiers d’un thème

Les fichiers qui gèrent le design de votre site sont séparés en deux parties. Ils se trouvent dans votre interface et votre thème. Comprendre la notion de thème et interface.

1/ Les templates et les layout se trouvent dans = >app\design\frontend\default\default\
On compte 3 dossiers (template, layout, locale)

2/ Les fichiers images et CSS et js spécifiques aux pages se trouvent dans => skin\frontend\default\default\

Il y a 3 dossiers(css, images,js) plus le favicon.ico du frontent de votre site. Comment changer les favicon de magento

Voici deux tutoriels pour mieux comprendre les layout et templates

Comprendre comment magento structure les pages et les blocs

Les blocs structures sont des templates.

Les Blocs de structure comme leur nom l’indique vont structurer votre page en les découpant en blocs (header, content, footer, left righ). Ce sont des templates, fichiers PHTML. Ils se trouvent dans :

app\design\frontend\default\default\template\page\
Les blocs de structure

Les blocs de structure

Les blocs de contenu sont des templates

Les blocs de contenu sont des blocs que magento place à l’intérieur des blocs de structure grâce au layout pour former une page. Un bloc de contenu est un template, mélange de code html, php et CSS.

Les blocs de contenu sont placés dans les blocs de stuctures

Ls blocs de contenu sont placés dans les blocs de structures

Hiérarchie de construction d’une page

Maintenant que vous connaissez la différence entre les blocs de structure et de contenu, vous vous demandez sûrement comment sont chargés et agencés ces blocks ? La réponse est grâce au layout.
Les layouts un des premiers éléments lus par magento (en dehors du noyaux, avant il y a les controlers qui dirigent magento vers les layouts) pour structurer une page. Pour faire simple, c’est le layout qui charge les blocs de structure et qui place à l’intérieur les blocs de contenu.

Un bloc de contenu est un template fichier PHTML mélange de html CSS et php (parfois aussi javascrip). Le code php correspond aux méthodes (fonction) du noyau de magento. Comment les templates ont accès au code du noyau ? Comment le code du noyau est lié au template grâce au layout dans la définition de block. Exemple dans la définition de block ci-dessous :

<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">

magento déclare le « block catalog/category_view » est associe le template « catalog/category/view.phtml »

block type="catalog/category_view" correspond à => app\code\core\Mage\Catalog\Block\Category\view.php
template="catalog/category/view.phtml   correspond à  => \app\design\frontend\default\default\template\catalog\category\view.phtml

Le template view.phtml aura accès aux méthodes de la classe view.php et au classes étendues par view.php. Ce template aura aussi accès au CSS (CSS et magento) de votre thème.

Ne pas confondre bloc et block

Les blocs correspondent aux templates, un bloc est un mélange de code html CSS (php simple appel de méthode).

Les blocks correspondent au code des classes php du noyau contenu dans le dossier block d’un module.

Pour comprendre ce qui se passe en amont des layouts => introduction au systeme view controler MVC

Design
17 commentaires : “Design magento, structure d’une page”
  1. Marc dit :

    salut, dans quel fichier je doit tape mon code pour qu’il apparaisse à l’écran ? dans les layout ?

    merci pour le blog j’apprends beaucoup sur magento mais sa semble difficile.

  2. admin dit :

    Bonjour Marc,
    Dans les layout non il faut que tu codes dans les fichiers template .phtml tu as un tutoriel sur les templates et d’autres sur les layouts. Les layout sont là pour structurer les pages.

  3. Regis dit :

    bonjour je suis débutant sur magento ton blog m’aide mais trop d’information je sais pas trop par quoi commmencer
    que doit je lire ne premier d’apres toi merci

  4. admin dit :

    Salut Regis
    Magento est un sacré morceau.
    Commence par lire le tutoriel sur les thèmes et interface ensuite les layout et template. Ensuite les autres tuto consacré aux design et graphisme tout en faisant des test
    bon courage

  5. jem dit :

    lut
    Le design sous magento me semble bien compliqué, beaucoup de notions nouvelles que je connais pas. Existe’il des designers spécialisés magento, faire le graphisme d’un site e-commerce c’est une chose, mais l’intégrer dans magento c’est compliqué. Le blog m’aide merci.
    Est-ce que je peux me passer des layout ?

  6. admin dit :

    Salut
    les layout indispensables et surtout très puissant un peut difficile à comprendre quand on débute, mais c’est indispensable, tu pourras plus t’en passer bientôt.
    Spécialiste j’ai pas cette prétention, mais je peux intégrer une maquette sans problème. Si tu ne maitrises pas cette partie sous traite là, tu as un formulaire de contact sur le blog :) .
    Bon courage.

  7. Dimitri dit :

    Salut, merci pour ce tuto hyper enrichissant !

  8. Gacoin dit :

    Bonjour,

    Ma question est bete mais je cherche à acceder à ce genre d’adresse par exemple et ne sait pas où rentrer ceci
    app\design\frontend\default\default\

    Merci de votre aide

  9. looks to me Magento is a complicated structure, but extremely efficient…

  10. ulrich dit :

    bonjour, j’aimerais changer le logo d’origine comment faire merci

  11. cédric rousset dit :

    Bonjour
    le Logo de magento se change dans le back office regarde ici logo magento

  12. Xavier dit :

    bonjour
    debutant en magento
    j apprend beaucoup avec vos tutos, merci

    « Ce sont des templates, fichiers PHTML. Ils se trouvent dans :
    app\design\frontend\default\default\template\page\ »
    je n ai pas de dossier template dans default
    serait ce a cause des nouvelles versions de magento ? architecture differente ?

    j en ai trouvé dans /frontend/base
    mais il est recommandé de ne pas les modifier en vue d une MAJ de magento …
    pouvez vous m aider ?

  13. cédric rousset dit :

    Bonjour,
    Pour le thème modern il sont dans default/modern
    pour blank ils sont dans default/blank
    si tu veux créer le tiens tu le rajouter defautl/tontheme
    l’important c’est que tu comprennes le système de fallback quand magento ne trouves pas un template dans default/modern il va le chercher dans default/default ou base default

  14. Xavier dit :

    Merci !
    j avance doucement
    j ai maintenant compris ce systeme
    j ai créé mon interface :
    default/default -> mon_inter/default
    dans app et dans skin

    par contre j ai plus les 2 « pages originales »
    « home page » et « about us »
    (je les ai écrasées avec mes modifs avant de comprendre qu il fallait les copier dans mon theme)
    Comment les recupérer ? j ai lu qu c etait important de ne pas les toucher , en vue d une mise a jour de magento par exemple
    version magento 1.8.1.0

    autre chose , j ai declaré mon package ( mon_inter) dans le backoffice mais , par exemple
    contact.xml ( copié dans mon theme) ne s affiche pas avec mon theme mais avec le theme original magento, c est normal ?
    merci pour ton aide, et encore bravo pour ton blog !

  15. Xavier dit :

    1 ere question -> pas trouvé
    2 eme -> je pense que c est parce qu ils ont pas la meme structure : 2columns right et 2columnsleft
    j ai raison ?

    j utilise  » Template Path Hints  » et  » Add Block Names to Hints « , vraiment utile pour s y retrouver

    de nouveau embourbé …
    theme choisi ‘default » et pas « modern »
    j ai rien dans le topmenu ! ( j ai regardé dans modern, ya rien non plus
    je serai bien parti d un deja fait pour l adapter, (au moins m en inspirer) mais la, c est le neant !!!

  16. nissrin dit :

    salut je peut ajouter lien au headrer .comment fait .merci d’avance

  17. cédric rousset dit :

    Il faut que tu localise ton fichier header et tu le rajoute. Si tu veux le rajouter dans les liens top.links, sert toi de cette référence

Poster un commentaire

(obligatoire)

(obligatoire)