Webdesign des categories

Magento : Afficher les sous-catégories sous forme de grille

Magento le Mercredi 27 avril 2011 2 commentaires

Aspirer une Page via PHP et cURL pour Éviter les IFrames

Magento ne permet pas standard défaut d'afficher les sous catégories dans une page catégorie. Nous allons voir ici remark afficher les sous catégories sous forme de grille, avec vignette, titre de la catégorie et portrayal courte. Pour cela nous allons créer un coalition statique ce qui nous permettra d'afficher les sous-catégories du index Magento dans la catégorie de notre choix.

La control suivante a été testé sur Magento v1.5.

Magento permettant d'afficher des coalitions dans des catégories nous allons utiliser cette fonctionnalité pour un most extreme de souplesse. Nous allons ainsi créer un alliance, un gabarit pour ce coalition, un style pour mettre en forme le posting et l'intégrer au webdesign de votre webpage, et enfin afficher ce coalition dans la catégorie.

Préparer un bloc statique

Dans l’administration de Magento aller dans CMS > Blocs Statiques. Cliquer sur le bouton Ajouter un Nouveau Bloc. Remplissez les champs de la façon suivante :

  • Block Tittle : [sourcecode language="plain" toolbar="false"]Liste des sous-catégories[/sourcecode]
  • Identifier : [sourcecode language="plain" toolbar="false"]liste_sous_categories[/sourcecode]
  • Status : Enable
  • Content :  [sourcecode language="plain" toolbar="false"]{{block type="catalog/navigation" template="catalog/navigation/subcategory_listing.phtml"}}[/sourcecode]

Créer le gabarit pour l’affichage des sous-catégories

Dans le sous dossier : /app/design/frontend/base/Nom_De_Mon_Gabarit/template/catalog/navigation. Créer le fichier subcategory_listing.phtml

[sourcecode language="php" toolbar="false"]
<?php
$_categories=$this->getCurrentChildCategories();
foreach ($_categories as $_category):
$cur_category=Mage::getModel(‘catalog/category’)->load($_category->getId());
?>
<div class="categorylisting">
<?php if($cur_category->getIsActive()): ?>
<div class="product-image">
<a href="<?php echo $cur_category->getURL() ?>" title="<?php echo $this->htmlEscape($cur_category->getName()) ?>">
<img src="<?php echo $cur_category->getImageUrl() ?>" width="140" alt="<?php echo $this->htmlEscape($cur_category->getName()) ?>" />
</a>
</div>
<h4>
<a href="<?php echo $cur_category->getURL() ?>" title="<?php echo $this->htmlEscape($cur_category->getName()) ?>">
<?php echo $this->htmlEscape($cur_category->getName()) ?>
</a>
</h4>
<?php echo $cur_category->getDescription() ?>
<?php endif; ?>
</div>
<?php endforeach;
[/sourcecode]

Mettre en forme la liste des sous-catégories

Éditez la feuille de style et ajoutez les lignes suivantes :
[sourcecode language="css" toolbar="false"]
.categorylisting {float:left;width:140px;height:170px;padding:10px;border:1px solid #ccc;margin:10px;text-align:left;}
.textcat {width:129px;padding:3px;padding-top:5px;height:30px;border:1px solid #ccc;margin-top:10px;background-color:#eeeeee;background-image:url(images/headcat.gif);background-repeat:repeat-x;}
.button { margin: 10px auto; font-size:1.2em; font-weight:bold; }
.catimg { margin:0 auto; }
[/sourcecode]

Afficher la liste des sous-catégories

Dans l’administration de Magento aller dans Catalogue > Gestion des Catégories et éditez la catégorie dans laquelle vous voulez afficher les sous-catégories. Cliquez sur l’onglet des paramètres d’affichage.

  • Display Mode : choisissez « Bloc Statique Seul » ou « Bloc statique et produits »
  • CMS Block : sélectionnez le nom du bloc codant le listing des sous-catégories, si vous avez suivi les instructions depuis le début ce sera « Liste des sous-catégories »

Enregistrez les modifications effectués de la catégorie.

La liste de vos sous catégories s’affiche maintenant dans les catégories de votre choix. Modifiez le style CSS en fonction du webdesign de votre e-commerce Magento.

 

Article(s) sur le même sujet :

  1. Magento: afficher une sélection de produits sur la page d’accueil
  2. Ajouter un bloc statique dans Magento multilingue
  3. Magento: supprimer des blocs et des fonctionnalités
  4. Configurer Magento en multilingue: français et anglais
  5. Magento : modifier les emails automatiques


Tags : , ,

2 commentaires pour “Magento : Afficher les sous-catégories sous forme de grille”

  1. NalvinNo Gravatar dit :

    Merci pour ce tutoriel et les autres aussi qui sont très très pratique.

    Mais j’ai un petit problème qui doit être en relation avec mon thème.
    Le bloc statique créé s’affiche constamment sur les pages de produits (seul) même lorsque celui-ci est désactivé.

    J’utilise ce thème : http://www.magentomagik.com/magento-themes/free-magento-themes/magik-jewellery-magento-theme/

    J’ai essayé beaucoup de choses mais sans succès.

  2. cnahonNo Gravatar dit :

    Bonjour,

    Merci pour ce tuto, j’ai eu du mal à en trouver un complet et en français !
    par contre j’ai un petit soucis avec les images, le code :
    <img src="getImageUrl() ?> » width= »140″ alt= »htmlEscape($cur_category->getName()) ?> » />

    me retourne :

    Pourtant j’ai bien mis une image à ma sous catégorie donc je ne comprend pas =/

    EDIT: le code ne passait pas

Laissez un commentaire