Agencer la page d'accueil du site

Difficulté :++--

Agencer la page d'accueil du siteComment 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 !

Commentez cet article Agencer la page d'accueil du site

Richard le 20/06/2010 à 23:29:29
bonjour,
je n'ai pas réussi à afficher les categories les unes à côté des autres. Si quelqu'un peut m'orienter, je le remercie.
François
Magentix le 20/06/2010 à 23:30:01
Il doit simplement s'agir d'un problème de positionnement de l'objet. Ajoute par exemple un float left sur l'élément .category-list-view dans le CSS de ton template.
Richard le 20/06/2010 à 23:30:20
Merci pour la réponse,
mais je n'ai pas dans les fichiers css de mon template la div .category-list-view
où mettre float left?
Magentix le 20/06/2010 à 23:30:38
Non... Il faut l'ajouter :
.category-list .category-list-view {float:left;margin:0 5px}
Richard le 20/06/2010 à 23:31:10
merci, mais dans quel fichier reset.css ou boxes.css ou styles.css
Richard le 20/06/2010 à 23:31:31
Merci pour la réponse,
J'ai réussi à mettre le code ou il fallait. Mais le titre; Nouveaux produits vient se mettre à côté des categorie et non pas en dessous et ce n'est pas en h2 mais en h3
merci encore
achraf le 20/06/2010 à 23:31:57
l'emplacement de home.phtml ou se trouve ???
fouk le 20/06/2010 à 23:32:14
ca ne fonctionne pas avec la 1.4 ou alors le tuto est mal expliqué pour les debutants....
Magentix le 20/06/2010 à 23:32:32
@achraf : Le fichier home.phtml n'existe pas, il faut l'ajouter dans le template.
@fouk : Il n'y a pas de raison pour que cela ne fonctionne pas en 1.4, le problème doit venir d'ailleurs (cache ?). Pour le tuto il peut être utilisé comme piste, après il faut aussi chercher un peu par soit même...
Guillaume le 18/08/2010 à 12:24:17
Bonjour, Merci pour ce bon tutoriel!
J'ai cependant une question:
Est-il possible de n'afficher que 2 des 3 catégories de produits présentes sur mon site?

Merci d'avance
Magentix le 18/08/2010 à 12:41:30
Oui dans ce cas il faut remplacer le "$this->getStoreCategories()" par un "Mage::getModel('catalog/category')->getCollection()" avec des filtres.

Cela donnerait :

/* ... */

$exclude_ids = array(1); // ID des catégories à exclure.

$categories = Mage::getModel('catalog/category')->getCollection()->addAttributeToFilter('entity_id',array('nin'=>$exclude_ids));

foreach ($categories as $_category):

/* ... */

Tu peux également filtrer sur le niveau (level) des catégories par exemple :

$categories = Mage::getModel('catalog/category')->getCollection()
->addAttributeToFilter('level',2);

Ou encore ajouter un attribut de catégorie dédié à l'affichage en page d'accueil puis filtrer ensuite dessus... (plus dynamique que de filtrer sur les ID ;) )
http://www.magentix.fr/modules-magento/ajouter-categorie-attributs-champs-personnalises.html

Ajouter un commentaire

Cliquez pour générer un nouveau code

* champs obligatoires