Ajouter un block et un template sur la home ?


dรฉveloppement web

Nous allons aujourd’hui รฉtablir un block sur la home de magento. Imaginons que votre affichage soit intemporelle et surtout global. Comme une landing page en javascript par exemple ร  l’aide d’une lightbox. (Nous ne verrons pas cette partie lightbox ici).

Comme toujours pour รฉtablir ce tutoriel j’ai analysรฉ le code source de magento. Je vous ai prรฉparรฉ un ensemble de code rempli de truc, tata, plop plopiplop j’en passe et des meilleurs! Pourquoi ? Comme toujours, pour vous permettre de rรฉellement faire un lien entre les diffรฉrents points du code.

Affichage des indications d’emplacement des blocks et templates hints

Tout d’abord affichons les templates hints et les blocks hints sur le frontend. Pour ce faire direction le back office:

System-> configuration -> advanced ->developper ->Puis changer le scope ร  (main website), et enfin passer dans Debug ร  yes:

  • Template Path Hints
  • Add Block Names to Hints

Une petite sauvegarde et purge des caches et le tour est jouรฉ !

Crรฉons le Module support du block

Nous allons crรฉer un module qui va nous servir ร  utiliser un block au sens MVC du terme. Pour ce faire, il faut d’abord activer le module:

Dans le fichier ร  crรฉer: app/etc/modules/Valibus_Plopiplop.xml

<?xml version="1.0" ?>
<config>
	<modules>
		<Valibus_Plopiplop>
			<active>True</active>
			<codePool>local</codePool>
		</Valibus_Plopiplop>
	</modules>
</config>

Crรฉons ensuite le fichier block dans app/code/local/Valibus/Plopiplop/Block/Flip.php Comme vous le voyez on se contente d’รฉtendre mage_core_block_template et de mettre en place une mรฉthode d’affichage dans le cadre de tutoriel.

<?php
class Valibus_Plopiplop_Block_Flip extends Mage_Core_Block_Template {
	public function affichageBlockHome(){
		return "Le block sur la home s'affiche";
	}
}

Plaรงons ensuite app/code/local/Valibus/Plopiplop/etc/config.xml pour dรฉclarer notre block et la version du module. Comme vous le constatez nous n’avons pas besoin dans ce cas prรฉcis de dรฉclarer de layout propre ร  ce module.

<config>
	<modules>
		<Valibus_Plopiplop>
			<version>0.0.1</version>
		</Valibus_Plopiplop>
	</modules>
	<global>
		<blocks>
			<plopiplop>
				<class>Valibus_Plopiplop_Block</class>
			</plopiplop>
		</blocks>
	</global>
</config>

Notre module crรฉรฉ, nous n’avons plus qu’ร  crรฉer son template app/design/frontend/base/default/template/tata/truc.phtml Oui je sais pour l’instant tout รงa est un peu dรฉcousu mais je vous retranscris รงa pรจle-mรชle aussi … (citรฉ de la peur quand tu nous tiens)

<?php
	echo $this->affichageBlockHome();
?>

Modification des layouts et template de base

 C’est en principe ici que tout s’articule pour votre comprรฉhensions. (Ou alors que vous รชtes perdu …) Bref comme vous avez pu le remarquer il y a en gรฉnรฉral selon les pages 2 templates qui selon les cas englobent les autres, j’ai nommรฉ:

  • frontend/base/default/template/page/2columns-right.phtml
  • frontend/base/default/template/page/3columns.phtml

Nous allons donc dans chacun d’entre eux, ajouter une ligne en dessous de l’appel de global notice

<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <?php echo $this->getChildHtml('plop') ?>

Et le meilleur pour la fin : รฉditons le fichier app/design/frontend/base/default/layout/page.xml et aprรจs la ligne (environ 67) sur les global_notices, rajoutons ceci qui fait tout s’articuler:

<block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" />
<block type="plopiplop/flip" name="plop" as="plop" template="tata/truc.phtml" />

La ligne qui fait donc le lien entre le nom de notre block flip l’appel rรฉfรฉrence plop et le template truc. Elle est pas belle la vie? Allรฉ demain je vous fait la mรชme pour l’affichage sur une page produit en plus propre, parce que lร  oui, c’est un peu bourrin quand mรชme ! Mais faut pas le dire…Votre rendu devrait donc ressembler ร  un patchwork multicolor, mais au moins vous arriverez ร  savoir ce qui est quoi et qui va oรน !