Ajouter des blocs statiques dans Magento

Magento

Rajouter des blocs sous Magento est assez simple… Si on sait où chercher.

Ces blocs vont permettre d’afficher des publicités, ou des promotions. Dans notre exemple, on veut afficher le produit en promotion du mois. Le principe est de créer un catégorie et de lier le produit voulu à cette catégorie.

  1. Rajouter un bloc simple dans la sidebar de gauche
  2. Faire en sorte que cela soit un bloc « dynamique »
  3. Supprimer les options de tri dans l’affichage du produit
  4. (facultatif) : Rajouter des blocs dans la sidebar à partir de fichier .phtml sous Magento
  5. (facultatif) : Inclure le contenu d’un bloc statique dans un fichier .phtml sans toucher au XML
  6. (extra facultatif) : Listing des blocs statiques sous Magento

Etape 1 : Rajouter un bloc simple dans la sidebar de gauche

Commençons par créer un bloc statique simple

  • Admin > CMS > Blocs statiques > Ajouter un nouveau bloc
  • Remplissez les champs. Ex : Promotion du mois / promotion_du_mois / Activé / Voici le contenu du block « Promotion du mois ». Enregistrez.

a) Ajouter le bloc dans la sidebar dans TOUTES les pages du site ayant la sidebar

  • Ouvrez le fichier app/design/frontend/votre_interface/votre_theme/layout/cms.xml. (blank/default normalement si vous n’avez pas créer un nouveau theme).
  • Rajoutez dans <default></default> en haut du fichier ceci :

<reference name= »left »>
<block type= »cms/block » name= »cms_promotion_du_mois » before= »-« >
<action method= »setBlockId »><block_id>promotion_du_mois</block_id></action>
</block>
</reference>

On a rajoute le bloc à gauche « left » ( »content » pour le milieu, header, footer, right, selon les cas) qui est de type cms/block.
On le note en préfixant par « cms_ », et on le place tout en haut, before="-"(after="-" pour tout en bas).

b) Ajouter le bloc uniquement pour la page d’accueil (ou une page en particulier)

Nous reprenons le même code que précédemment :

<reference name= »left »>
<block type= »cms/block » name= »cms_promotion_du_mois » before= »-« >
<action method= »setBlockId »><block_id>promotion_du_mois</block_id></action>
</block>
</reference>

Que nous ajoutons cette fois-ci dans :

  • Admin > CMS > Gestions des pages > Home (votre page à modifier) > Design Personnalisé > XML de mise à jour d’agencement

Etape 2 : Faire en sorte que cela soit un bloc « dynamique »

Pour lier le bloc à la catégorie « Promotion du mois », il faut savoir l’identifiant de la catégorie :

  • Admin > Catalogue > Gérer les catégories > Choisissez votre catégorie, et notez l’ID en haut de la page (ici par exemple : ID = 50)

Liez votre produit à votre catégorie.

Modifier votre bloc statique :

  • Admin > CMS > Blocs statiques > Choisissez votre bloc
  • Dans le contenu, mettez :  {{block type= »catalog/product_list » category_id= »50″ template= »catalog/product/list.phtml »}}

Votre produit est affiché à gauche dans la sidebar

Etape 3 : Supprimer les options de tri dans l’affichage du produit

Le produit étant seul, les options d’affichage et de tri (9 par page, etc) sont inutiles. Cela se joue dans le fichier : app/design/frontend/{interface}/{theme}/template/catalog/product/list.phtml.

Cependant, si nous modifions ce fichier, tous les affichages des produits perdront eux aussi leur système de navigation.

  • Faire une copie de list.phtml en list_accueil.phtml.
  • Modifiez le bloc statique :  {{block type= »catalog/product_list » category_id= »50″ template= »catalog/product/list<span style= »color: #800000; »><strong>_accueil</strong></span>.phtml »}}
  • Ouvrez le fichier list_accueil.phtml
  • Supprimer en haut et en bas du fichier :  <?php echo $this->getToolbarHtml() ?>

Votre produit en promotion du mois est affiché simplement dans la sidebar de gauche.

Etape 4 (facultatif) : Rajouter des blocs dans la sidebar à partir de fichier .phtml sous Magento

Les blocs statiques sont ajoutés tel quel dans le code source de la page. Or si vous activez le débugger :

  • Admin > Système > Configuration
  • Dans la liste en haut à gauche de vos vues (Portée de la configuration courante  , ne prennez pas la configuration par défaut, mais celle juste en dessous, de votre magasin. Votre page se recharge.
  • Onglet Avancé > Développeur
  • Mettez « Astuce chemin des gabarits » et « Ajouter les noms des blocs aux astuces » à « Oui ».
  • Sauvegardez. Rafraîchissez votre front-office (Ctrl + F5 sous Firefox)

Tous les blocs « template » sont entourés de rouge avec le nom du fichier .phtml correspondant. Or notre solution ici n’est pas entouré d’un bloc.

On reprend donc l’étape 1. L’insertion dans le fichier layout/cms.xml dans <default> de :

<reference name= »left »>
<block type= »cms/block » name= »cms_promotion_du_mois » before= »-« >
<action method= »setBlockId »><block_id>promotion_du_mois</block_id></action>
</block>
</reference>

  • On crée le dossier « sidebar » dans app/design/frontend/votre_interface/votre_theme/template
  • On crée à l’intérieur de ce dossier le fichier promo.phtml, avec à l’intérieur

<div>
<?php echo $this->getChildHtml(‘promotion_du_mois’); ?>
</div>

Vous pouvez personnaliser votre fichier .phtml pour mettre en avant un titre, la police, etc. grâce à votre <div>, contrairement à l’étape 1 qui ne permettait que d’afficher le contenu du bloc statique.

Etape 5 (facultatif) : Inclure le contenu d’un bloc statique dans un fichier .phtml sans toucher au XML

Quand on veut rendre administrable un paragraphe texte, on crée un bloc statique avec juste la ligne de texte en question. Pour l’afficher, on n’a pas besoin de créer un bloc dans les fichiers de layout (*.xml) et le positionner, vu que le bloc dans lequel on veut inclure notre texte est déjà défini (et positionné).

Ajoutez donc ceci dans le fichier *.phtml de votre choix (checkout/cart/sidebar.phtml par exemple)

<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘id_bloc_statique’)->toHtml() ?>

N’oubliez pas de changer l’identifiant par celui du bloc créé précédemment.

Cédric
co-fondateur de l'agence
Voir les articles de Cédric