Agencer la page d'accueil du site

  • De le 04 octobre 2009
  • Difficulté : 2/4

Agencer la page d'accueil du site Comment agencer la page d'accueil sur un site e-commerce Magento ? Cet article explique comment y insérer des éléments : images, textes, produits ou encore catégories.

La page d'accueil sous Magento est une page de type CMS. Son contenu se gère donc depuis l'administration, rubrique CMS > Gestion des pages.

Imaginons que nous voulions obtenir une page de ce type :

Page d'accueil

Cette page est composée de 3 éléments distincts : une bannière et deux blocs, le premier se charge d'afficher les catégories principales, le second les nouveaux produits :

Page d'accueil blocs

Le bloc chargé d'afficher les noms des catégories accompagnés de l'image associée n'existe pas. Il nous faut le créer :

catalog/navigation/home.phml

<div class="category-list">
<h2>Nos produits</h2>
<?php
        foreach ($this->getStoreCategories() as $_category):
                if($_category->getIsActive()):
                        $_category = Mage::getModel('catalog/category')->load($_category->getId());
                        $layer = Mage::getSingleton('catalog/layer')->setCurrentCategory($_category);
                        ?>        
                             <div class="category-list-view">
                                    <a href="<?php echo $this->getCategoryUrl($_category)?>" title="<?php echo $_category->getName()?>">
                                           <img src="<?php echo $this->getCurrentCategory()->getImageUrl(); ?>" alt="<?php echo $_category->getName() ?>" />
                                    </a>
                                    <h3><a href="<?php echo $this->getCategoryUrl($_category)?>" class="name" title="<?php echo $_category->getName()?>"><?php echo $_category->getName()?></a></h3>
                             </div>
                        <?php
                endif;
        endforeach;
?> 
</div>

Il ne reste plus qu'à éditer la page d'accueil. La bannière est ici une simple image. Dans la partie Informations générales de la page home nous allons insérer notre balise img :

Informations générales

Nous pouvons enfin déclarer les 2 blocs sous l'onglet Design personnalisée, XML de mise à jour d'agencement. C'est à cette endroit que l'on définie l'ensemble des blocs spécifiques à ajouter ou supprimer sur la page. Les 2 blocs sont à afficher dans le corps de la page, ils seront donc enfants de la référence content :

XML de mise à jour d'agencement

<reference name="content">

      <block type="catalog/navigation" name="home.catalog.categories.list" alias="home_categories" template="catalog/navigation/home.phtml" after="cms_page" />

      <block type="catalog/product_new" name="home.catalog.product.new" alias="product_new" template="catalog/product/new.phtml" after="home_categories" />

</reference>

Si l'agencement de notre page d'accueil est de type 2 columns with right bar et que nous ne souhaitons pas faire figurer dans la colonne de droite le comparateur de produits défini et affiché par défaut pour les pages CMS depuis les fichiers xml, nous pouvons le supprimer :

XML de mise à jour d'agencement

<reference name="right">

      <action method="unsetChild"><alias>right.reports.product.compared</alias></action>

</reference>

Il est de cette manière possible de personnaliser indépendamment chacune des pages CMS du site !

commentaires

Commentez cet article : Agencer la page d'accueil du site