Modifier l’agencement des pages sous Magento

Dans: Magento

23 juin 2009

La modification du design d’un site sous Magento n’est pas aussi aisée qu’un CMS WordPress. Il y a des dossiers un peu partout, des fichiers XML, des templates, etc.

On se propose ici de :

  1. Modifier la page d’accueil pour qu’elle n’ait que 3 colonnes
  2. Modifier l’affichage des catégories pour qu’il n’y ait que 2 colonnes
  3. Modifier l’affichage de n’importe quelle autre page

Si vous voulez plus de détails, vous pouvez consulter le guide du designer Magento en français.

Etape 1 : Modifier la page d’accueil pour qu’elle est 3 colonnes

Voilà comment rajouter une sidebar à gauche sur la page d’accueil

  • Admin > CMS > Gestion des pages > Home > Design Personnalisé > Agencement
  • Choisissez « 3 columns »

Etape 2 : Modifier l’affichage des catégories pour qu’il n’y ait que 2 colonnes

  • Modifier le fichier (ou le créer) : app/design/frontend/nom_interface/nom_theme/layout/local.xml
<?xml version="1.0"?>
<layout version="0.1.0">
<!-- Pour les catégories normales (isAnchor = 0) -->
<catalog_category_default>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>
</catalog_category_default>
<!-- Pour les catégories avec filtres (isAnchor = 1) -->
<catalog_category_layered>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>
</catalog_category_layered>
</layout>

Etape 2 : Modifier l’affichage de n’importe quelle autre page

Les agencements de pages (template) sous Magento se présentent ainsi : 1 colonnes, 2 colonnes (gauche et droite), et 3 colonnes. Vous pouvez trouver les templates dans app/design/frontend/votre_interface/votre_theme/page/

Vous pouvez décider que tel page de Magento soit avec tel template en fonction des handles, que vous pouvez retrouver dans les fichiers *.xml. Ceux de Magento sont dans app/design/frontend/base/default/layout. (Ne jamais modifier les fichiers de « base »).

Exemple pour la page produit, il faut aller chercher dans catalog.xml puis dans, vous trouverez le noeud :

Si on veut qu’il soit en 3 colonnes, il faut donc rajouter dans notre fichier local.xml qui se trouve dans notre thème :

<catalog_product_view><reference name="root">
<action method="setTemplate"><template>page/3columns.phtml</template></action>
</reference></catalog_product_view>

Formulaire pour Commenter

Si vous en avez besoin, entourez votre code :

PHP : [php]echo $variable[/php]
XML : [xml]<default></default>[/xml]

Je m'appelle Frédéric Martinez.

Je suis Freelance Magento, fondateur de l'agence web e-commerce PH2M et anciennement étudiant en Master MIAGE à Toulouse.

Ce site présente mes réalisations professionnelles, personnelles et universitaires.

Magento Certified Developer Plus

rss_32 twitter_32 Magento

  • Vincent MARMIESSE: Bonjour, Attention depuis Magento 1.9.2.0, les blocs CMS sont en cache ! Cela ne pose pas de pro [...]
  • Java2dev: Bonjour, pour l'Etape 1 a quel niveau on met les codes? dans quel folder et c'est un fichier a edit [...]
  • manuel: Bonjour Frédéric, j'aimerais savoir comment enlever l'option de ( signature obligatoire ) de mon m [...]
  • Arsene: Bonjour a tous, j'aimerais savoir comment créer un module qui propose des options d'assurance su [...]
  • Frédéric Martinez: @Thomas : Il y aura toujours de la perte sur les personnes ne retournant pas sur la page de success. [...]