• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
e-Commerce

Les widgets dans Magento

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 :

create new widget block 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 :
widget block reference

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 »
widget block option

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.

29/01/2014 35 MIN READ BY: Arnaud HOURS 0 COMMENT
SHARE
LIRE LA SUITE

Arnaud HOURS

La guerre des OS mobile

Wordpress E-commerce ? avec woocommerce c'est possible !

VOUS POURRIEZ AIMER

e-Commerce Création d’un module magento (Part 2)

e-Commerce Importer des données e-commerce avec l’ETL Talend Open Studio

e-Commerce Créer un script shell dans Magento

e-Commerce L'actualité AdFab Magento Fuse

Développement e-Commerce Framework Sylius, une vraie alternative à Prestashop ou Magento ?

e-Commerce Votre premier module Prestashop

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect