Ajouter des blocs statiques dans Magento

Dans: Magento

23 juin 2009

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. Donc 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 statique 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. Rajouter des blocs dans la sidebar à partir de fichier .phtml sous Magento
  5. Inclure le contenu d’un bloc statique dans un fichier .phtml sans toucher au XML
  6. (extra facultatif) : Listing des blocs statiques sous Magento [Article à part]
  7. Ajouter un bloc statique dans une page statique

Etape 1 : Rajouter un bloc statique 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 (ou créer) le fichier :

app/design/frontend/{/votre_theme/layout/local.xml

 

<?xml version="1.0"?>
<layout version="0.1.0">
	<default></default>
</layout>

C’est votre fichier de layout personnalisé qui surchage tous les autres layout de votre thème.

  • Rajoutez dans <default></default> 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_ » (facultatif, c’est plus une notation pour se retrouver), 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_accueil.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.

Pour aller plus loin : Normalement, il faut créer notre propre module qui hérite de catalog/product_list. Ainsi nous pouvons maitriser la sélection (limiter les résultats, les trier, les rendre aléatoire, les mettre en cache, etc.). Cependant, nous nous arrêtons là par simplicité.

Etape 4 : Rajouter des blocs statiques en formatant l’affichage 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 le modifie pour que cela donne ceci :

<reference name="left">
	 <block type="core/template" name="block_menu_sidebar_left" before="-" template="sidebar/promo.phtml">
		 <block type="cms/block" name="promotion_du_mois" before="-">
		 	<action method="setBlockId"><block_id>promotion_du_mois</block_id></action>
		 </block>
	 </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 id="promotion_du_mois">
	<?php echo $this->getChildHtml() ?>
</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 : 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)

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.

Cette méthode va plus vite, mais est moins joli que l’ajout depuis les layout.

Etape 6 (extra facultatif) : Listing des blocs statiques sous Magento

Etape 7 : Ajouter un bloc statique dans une page statique

Il est possible d’ajouter un bloc statique dans une statique en rajoutant des instructions directement dans le contenu de la page.

{{block type="cms/block" block_id="home-seo"}}

A noter qu’il est possible d’insérer ce code dans un autre bloc statique ou depuis une description d’un produit par exemple.

31 Commentaires pour Ajouter des blocs statiques dans Magento

Avatar

Ccile

juillet 13th, 2009 à 11 h 11 min

Excellent tuto. Merci beaucoup pour ces « astuces ».
Une petite correction toutefois:
Etape 4 => On crée le dossier « sidebar» dans app/design/frontend/votre_interface/votre_theme/template et non On crée le dossier « sidebar» dans app/design/frontend/votre_interface/votre_theme/layout/cms.xml
;-))

Avatar

Fred

juillet 13th, 2009 à 19 h 14 min

En effet, il est assez difficile de créer un dossier dans un fichier..

J’avoue que j’ai pas eu le temps de tout relire. Merci beaucoup pour cette coquille !

Avatar

Hurtaud Camille

juillet 17th, 2009 à 12 h 12 min

Bonjour, le code pour afficher une catégories ne serait pas plutôt :

{{block type= »catalog/product_list » category_id= »9″ template= »catalog/product/list.phtml »}}

Avatar

Fred

juillet 17th, 2009 à 12 h 16 min

WordPress converti automatiquement les quotes «  », sauf quand on entoure le passage avec les balises < code > < / code > (sans espace). Ce que je n’ai pas fais pour ce passage là.

Merci de cette correction.

Cependant, c’est partout pareil, dès que vous voyez des guillemets type Word sur les forums ou les blogs, il faut le remplacer par les doubles apostrophes dans votre éditeur de texte.

Avatar

Zadeo

juillet 24th, 2009 à 15 h 31 min

Super boulot !

Avatar

jose

août 2nd, 2009 à 16 h 45 min

Bonjour,
super ce tuto que je cherchais depuis longtemps.
mais je ne suis pas très doué, ( je vais tenté de le refaire étape par étape car chez moi ça ne marche pas) alors j’aurais une question.
Est ce que si je m’arrête à la fin de l’étape 1-a je dois avoir un block dans la partie gauche avec son contenu  » promotion du mois »?

merci

Avatar

jose

août 4th, 2009 à 12 h 35 min

En fait ça y est j’ai réussi à le suivre ce tuto, génial ça marche.

Juste une question est il possible de faire afficher le titre de la catégorie en haut de cette box?

Merci

Avatar

alfa

décembre 2nd, 2009 à 17 h 54 min

Bonsoir,
Plus difficile !

Comment proceder pour placer un block CMS dans le header ?

Avatar

Frédéric Martinez

décembre 2nd, 2009 à 18 h 18 min

Il y a différentes façons de procéder.

La plus simple est de placer ceci :

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

dans le fichier app/design/frontend/xxx/xxx/template/page/html/header.phtml

(n’oubliez pas de changer « ‘id_bloc_statique » par l’identifiant de votre bloc statique)

Avatar

benjamin

décembre 22nd, 2009 à 19 h 09 min

Bonjour et merci pour ce tuto.
Mon bloc est bien actif dans la colonne gauche, comment lui attribuer un design identique aux autres blocs ?
j’ai oublie qq chose ?
salut

Avatar

oudini

janvier 6th, 2010 à 0 h 51 min

Bon tuto :)

De mon coté tout se passe bien (je me suis arrêté à la fin de l’étape 4) si ce n’est un problème d’affichage : le produit en promo est moins large que le reste de la colonne. Du coup l’affichage n’est pas très bo

Aurais je fait une erreur quelque part ?

Copie d’écran : http://img5.hostingpics.net/pics/737554pb_affichage.jpg

Merci de la réponse

Avatar

Frédéric Martinez

janvier 6th, 2010 à 1 h 44 min

@benjamin & @oudini : à la fin de l’étape 4, j’ai entouré le produit d’une div générique. A vous de mettre la classe qui correspond à vos produits.

exemple : <div class="block">…</div> dans certains templates.

Ensuite, à vous de jouer sur le design avec vos CSS.

Avatar

sebest

février 4th, 2010 à 12 h 00 min

Bonjour et merci.

Je suis surpris de ne pas voir mon problème déjà exposé.
J’ai mis le code dans la page catalog.xml pour avoir mon bloc partout, mon bloc s’affiche bien, au bon endroit sur toutes les pages de mon site.

Le hic est lorsque j’affiche le détail d’un produit, mon bloc fait apparaitre des produits d’une autre catégorie, comme si la recherche influait sur le code de la page list_accueil.phtml

Vous me seriez d’une très grande aide (site en production)

Avatar

maggy

février 16th, 2010 à 10 h 34 min

bonjour frederic,

tout d’abord je tenais a vous dire que je suis completement debutante en magento ( et tout ce qui est creation de site etc…) et que votre site ma deja beaucoup aider! alors MERCI pour tout votre travail!!

comme je vous l’ai expliquer je suis vraiment debutante et je vous en serai tres reconnaissante si vous pouviez m’eclaircir sur 2-3 petites choses s »il vous plait.

j’ai acheté un template sur un site americain et le graphiste a mi le centre de la page ( je crois que ca s’appelle la columns1 mais pas sur) en bas a droite! et une 2e columns a droite avec « mon panier » « comparateur de prix » .

1-comment fait on pour bouger les blocs ( par exemple un bloc collé en haut a droit…)en faite je voudrai essayé de mettre la column1 bien centré et surtout que le menu sois centré et non partant de la gauche.

2- je voudrai avoir un bloc dans le header ou ce trouverai ll’espace client pour se connecté mail et mot de passe ( si possible avec l’option « mot de passe oublié? » et plus bas dans le meme bloc  » vous souhaitez vous enregistrer: » avec une redirection sur la page d’inscription.

excusez moi de vous demandez tant de choses mais je suis tellement perdu que je ne sais plus quoi faire.

je vous remercie pour toute l’aide que vous pourrez m’apporter.

bonne journée :)

Avatar

maggy

février 16th, 2010 à 10 h 38 min

ca sera peut etre plus facile a comprendre si je vous montre le template :)

http://cms.template-help.com/magento_26144/

encore merci

Avatar

BERTHE

août 5th, 2010 à 10 h 44 min

Bonjour sebest,
Vous avez pu avoir une solution au problème d’autres catégories qui s’affichent dans le détails du produits?
Merci

Avatar

Frédéric Martinez

août 5th, 2010 à 14 h 05 min

Bonjour,

L’identifiant de la catégorie doit sûrement être modifié au passage sur la fiche produit.

Remplacez la 1ère ligne de votre fichier list_accueil.phtml :
$_productCollection=$this->getLoadedProductCollection();

et chargez manuellement votre catégorie :


$_cat = Mage::getModel("catalog/category")->load(12);
$_productCollection = $_cat->getProductCollection()->addAttributeToSort('name', 'asc');

Avatar

Thomas

janvier 18th, 2011 à 16 h 18 min

Bonjour,

Et bravo pour ce blog très interessant.

J’aurai voulu savoir s’il éxistait un moyen d’exploiter l’étape « Etape 2 : Faire en sorte que cela soit un bloc « dynamique » » avec un ID de catégorie dynamique ?

Autrement-dit, dans mon template, j’ai une catégorie dynamique… et je veux en afficher les produits simplement, avec le grid de base de Mangeto.

J’espère que j’ai été clair :D

Merci,
Thomas.

Avatar

Frédéric Martinez

février 2nd, 2011 à 1 h 45 min

C’est plus complexe, il n’y a pas que le block des affichages des listes, mais les toolbars.

Avatar

xavier

juin 20th, 2011 à 20 h 05 min

Bonjour,

je te remercie d’abord pour tes tutoriels.

je crée mon premier site sous magento.
je veux afficher 2 blocs (un bloc « nouveautés » et un bloc « promo ») dans ma colonne de droite en utilisant la méthode 4.
J’arrive à en afficher un mais quand je veux afficher le deuxième bloc, le premier disparait et le 2ème ne s’affiche pas.
je voulais savoir s’il fallait rajouter quelquechose dans la fonction getchildhtml ?

merci
xavier

Avatar

Franck

avril 24th, 2012 à 15 h 50 min

Bonjour et merci pour vos tutos très bien faits.
J’ai souhaité utiliser votre méthode pour afficher un bloc dans la colonne de droite faisant apparaître les produits d’une catégorie de façon aléatoire. Tout fonctionne très bien sauf que le bloc n’affiche rien lorsque je suis sur n’importe quelle fiche produit du site. En revanche sur toutes les autres pages c’est parfait. Pouvez-vous me dire pourquoi?
Merci.
Franck

Avatar

Frédéric Martinez

avril 24th, 2012 à 16 h 19 min

@Franck : Votre appel du bloc est bien dans ? Votre fiche produit a bien la sidebar voulue ? y a-t-il un remove quelque part ? Essayez avec un autre bloc, changez le nom du bloc.

Avatar

Franck

avril 24th, 2012 à 16 h 41 min

Je vais vérifier tout cela. Merci
Franck

Avatar

Allande

mai 12th, 2013 à 13 h 00 min

Bonjour

Comment afficher le contenu html d’un attribut (zone texte) dans un bloc statique ?

Ce contenu étant différent selon les articles

Avatar

Frédéric Martinez

juin 17th, 2013 à 15 h 03 min

@Allande : Il faut pour cela appeler un bloc/template depuis votre bloc statique (voir étape 2, mais avec notre bloc custom, non expliqué dans cet article), ou bien créer un widget qui effectue le traitement.

Votre bloc étant surement sur la page produit, je vous conseille de le faire surcharger la block de la page produit.
Ainsi, il est facile de récupérer le produit en cours.

Dans le template, il se restera plus qu’à afficher l’attribut.

Avatar

Ccile

juillet 15th, 2013 à 16 h 50 min

Je fête ici un anniversaire ! 4 ans déjà que je suis venue poster (cf 1er post) ! Woaw ! Faut croire que je ne me lasse pas de cet article. Encore merci !

Avatar

Frédéric Martinez

juillet 15th, 2013 à 17 h 36 min

@Ccile : Enorme ! Merci pour cette petite anecdote, 4 ans déjà …
Maintenant, il est plus rare d’utiliser les blocs statiques en administration, mais l’article sert toujours !

Venant d’une toulousaine, la bougie d’anniversaire me fait super plaisir ;-)

Avatar

Xavier

avril 10th, 2014 à 19 h 30 min

Bonjour
et merci pour ce tuto ( et tous les autres !)

et oui je suis moi aussi toulousain !

je viens d appliquer tes conseils, pour une categorie « nouveaux produits » sur la colonne de gauche de ma home page

j ai donc , par exemple , 2 produits, mais qui s affichent l un a coté de l autre
comment les afficher l un en dessous de l autre ?

(j avais essayé avec le widget nouveaux produits, mais il m affiche l image, avec a sa droite les infos et boutons qui depassent , et empietent sur le body ! alors qu avec ta methode j ai l image, et les infos en dessous)

Avatar

Frédéric Martinez

avril 14th, 2014 à 9 h 57 min

@Xavier : Hum, tout est histoire de CSS ici.
Si dans le flux HTML les 2 produits sont bien dans la sidebar, alors tu peux tout gérer en CSS pour éviter que des blocs reviennent à la ligne, rien à voir avec Magento ici.

Avatar

Jordan

août 19th, 2014 à 16 h 04 min

Merci pour la tuto…. J’ai passé plus d’une heure a chercher comment ajouter une image sur la partie droite de magento…

Avatar

Vincent MARMIESSE

septembre 14th, 2016 à 17 h 13 min

Bonjour,

Attention depuis Magento 1.9.2.0, les blocs CMS sont en cache !
Cela ne pose pas de problème dans la plupart des cas, mais si les blocs sont dynamiques (en fonction de la catégorie en cours par exemple), le contenu va être identique sur toute la boutique.

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. [...]