Dans ce tutoriel, nous allons apprendre à créer votre widget personnalisé.
Pour rappel, un widget est un outil Magento qui permet de placer des blocs à peu près partout sur les pages Magento.
Intro
Les widgets de Magento sont un peu l’équivalent des widgets de WordPress : Ils vous permettent de créer des blocs de contenu dynamiques que les administrateurs du site pourront utiliser à loisir au prix de quelques clics de configuration.
Le Tuto
Nous voulons créer notre nouveau type de bloc utilisable par les widgets, ce bloc sera comme un autre, mais pour qu’il puisse être utilisé par un widget, il doit implémenter l’interface Mage_Widget_Block_Interface
Cette interface demande d’implémenter 3 méthodes, dont les signatures sont :
public function toHtml(); public function addData(array $arr); public function setData($key, $value = null);
Celles-ci sont présentes afin d’affecter les données, s’il y en a, à votre bloc, et de rendre le bloc en html.
Je vous rassure, vous n’avez rien à faire de ce coté là, lorsque votre bloc hérite de la classe Mage_Core_Block_Abstract, et donc également de la classe Varien_Object, les méthodes sont déjà présentes et implémentées.
Notre classe ressemblera donc à ceci.
class Namespace_YourModule_Block_Widget_MyWidget extends Mage_Core_Block_Template implements Mage_Widget_Block_Interface { }
Il va maintenant falloir informer Magento que votre bloc existe : ça se passe dans le fichier widget.xml, dans le dossier « etc » de votre module.
Il contiendra au minimum :
<?xml version="1.0"?> <widgets> <namespace_yourmodule type="yourModule/widget_myWidget"> <name>Your Module Name</name> <description type="desc">Votre description</description> </namespace_yourmodule> </widgets>
Videz le cache si besoin, votre bloc apparait dans le champ Type :
J’ajoute maintenant ma mise à jour du layout, je m’aperçois que le bloc référence où j’aimerais placer mon bloc, n’existe pas dans la liste.
Il va falloir ajouter le notre. Pour ça, créez votre fichier de layout, idéalement dans base/default pour que votre module fonctionne sur un Magento de base.
Pour rappel, il faut indiquer l’emplacement de votre fichier de layout à Magento dans le config.xml et entre les nodes global comme ceci :
<frontend> <layout> <updates> <yourModule> <file>yourModule.xml</file> </yourModule> </updates> </layout> </frontend>
Votre fichier de layout contiendra alors :
<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <reference name="content"> <block type="core/text_list" name="namespace_yourmodule" as="namespace_yourmodule" translate="label" before="-"> <label>Your Module</label> </block> </reference> </default> </layout>
Vous devez donc faire référence à un bloc (ici « content »), et créer le votre à l’intérieur.
Ici, je me place entre les nodes default, ce qui veut dire que mon bloc pourra s’afficher dans toutes les pages.
Celui-ci sera de type core/text_list.
Pour rappel, ce type de bloc sans template rend tout ses enfants dans l’ordre, sans avoir à faire d’appel à la méthode getChildHtml(), au même titre que le bloc content, left ou encore right.
Son nom devra bien sur être unique, tous modules confondus.
Il devra aussi contenir le node <label> qui permettra alors de s’afficher dans la liste déroulante « bloc référence ».
Vous devriez donc le voir apparaître dans l’admin :
Nous allons maintenant voir comment paramétrer notre widget.
J’aimerais y ajouter un champ de type select, dont les données sont dynamiques.
Pour cela, retournez dans votre fichier widget.xml, et ajoutez-y ceci, entre les nodes namespace_yourmodule :
<parameters> <your_parameter translate="label"> <required>1</required> <visible>1</visible> <label>Option de mon bloc</label> <type>select</type> <source_model>yourModule/source_yourWidget</source_model> </your_parameter> </parameters>
Créons maintenant la classe présente dans le node source_model:
class Namespace_YourModule_Model_Source_YourWidget { /** * @return array */ public function toOptionArray() { $array = array(); $array['option_1_id'] = 'Option 1 label'; $array['option_2_id'] = 'Option 2 label'; return $array; } }
Les options du widget apparaissent alors dans l’onglet « Option du Widget »
Vous pourrez alors, en front, lors de l’instanciation de votre bloc, récupérer cette donnée avec un getData(‘your_parameter_1’)
Conclusion
Vous le voyez, la création d’un widget est simple. L’utilisation des widgets avec ingéniosité vous permettra de proposer des outils à portée de clic des administrateurs de Magento : Un bloc d’affichage des 5 produits les plus vendus, une gestion de push media… autant de widgets qui deviendront vite essentiels aux admins du site.