Design magento, structure d’une page
octobre 28, 2009 17 CommentairesUne 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 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.
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
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.
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.
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
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
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 ?
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.
Salut, merci pour ce tuto hyper enrichissant !
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
looks to me Magento is a complicated structure, but extremely efficient…
bonjour, j’aimerais changer le logo d’origine comment faire merci
Bonjour
le Logo de magento se change dans le back office regarde ici logo magento
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 ?
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
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 !
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 !!!
salut je peut ajouter lien au headrer .comment fait .merci d’avance
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