yassineBHS
commented
7 years ago I - Introduction:
On va apprendre ensemble à créer un rapport graphique dans le backoffice magento , en se basant sur la biblothèque jQuery dédié "Highcharts" , on va prendre l'exemple de la page : Reports ->Sales ->Orders et on va y créer une Charte graphique pour réprésenter l'évolution de total et le nombre des commandes passés en terme de temps.
Le rendu doit etre semblable à l'image suivante :
II - Prérequis :
pour pouvoir exécuter ce Tutorial il faut :
- Magento 1.9 : avoir les notions de base de créer , surcharger et modifier selon les bonnes pratiques un Module Magento e-commerce.
- Highcharts : maitriser la bibliothèque "Highcharts" , savoir jouer sur ses paramètres pour changer l'affichage et les représentation . (je vous invite à jetter un coups d'oeil vous aurez la capacité à y manupuler rapidement) : http://www.highcharts.com/demo
III - Les étapes de création :
Vous commencez donc par créer votre module :
- Créer le dossier dans /app/code/local/Yassinos/Customreports/ Vous créez ainsi votre namespace Yassinos et votre module Customreports.
- Activez le module dans magento : Ajoutez un fichier Yassinos_Customreports.xml dans /app/etc/module/ Et insérez dedans le code suivant :
<?xml version="1.0"?>
<config>
<modules>
<Yassinos_Customreports>
<active>true</active>
<codePool>local</codePool>
<version>1.0.0</version>
</Yassinos_Customreports>
</modules>
</config>Yassinos_Customreports vous permet de déclarer le module Customreports de votre namespace Yassinos. active : true = le module est active false = le module n’est pas activé codePool : Le module se trouvera dans le dossier local car c’est un module que nous avons créé nous même (pas un module communautaire). Magento trouvera donc les fichiers de ce module dans le dossier /app/code/local/Yassinos/Customreports/
Config.xml, le fichier pour configurer votre module :
De la même manière que vous avez déclaré votre module pour que magento le prenne en compte dans Yassinos_Customreports.xml , il faut que dans le fichier config.xml de votre module, vous déclariez aussi votre controller . Mangento va ainsi trouver votre fichier Yassinos_Customreports.xml, il va aller dans votre dossier /app/code/local/Yassinos/Customreports/etc/ et va lire le fichier config.xml pour savoir ou aller chercher vos Observers , Blocks , Templates .. et comment fonctionne votre module. Créez donc dans votre dossier Customreports, un dossier etc/ avec dedans config.xml.
config.xml contiendra :
<config>
<modules>
<Yassinos_Customreports>
<version>1.0.0</version>
</Yassinos_Customreports>
</modules>
<global>
<helpers>
<customreports>
<class>Yassinos_Customreports_Helper</class>
</customreports>
</helpers>
<blocks>
<customreports>
<class>Yassinos_Customreports_Block</class>
</customreports>
</blocks>
<models>
<customreports>
<class>Yassinos_Customreports_Model</class>
</customreports>
</models>
</global>
<adminhtml>
<events>
<core_block_abstract_to_html_after>
<observers>
<Event_Append_Chart_Reports>
<type>model</type>
<class>customreports/observer</class>
<method>appendReportChart</method>
</Event_Append_Chart_Reports>
</observers>
</core_block_abstract_to_html_after>
</events>
<layout>
<updates>
<customreports>
<file>customreports.xml</file>
</customreports>
</updates>
</layout>
</adminhtml>
</config> Explication :
<modules>
<Yassinos_Customreports>
<version>1.0.0</version>
</Yassinos_Customreports>
</modules>Dans cette partie, on déclare l’identité du module, pour que magento puisse vérifié que le module que vous avez déclaré (dans votre fichier Yassinos_Customreports.xml) est bien celui là et le numéro de version vous permet les mises a jour de votre module.
<layout>
<updates>
<customreports>
<file>customreports.xml</file>
</customreports>
</updates>
</layout>Ce petit bout de code en xml vous permettra de déclarer votre fichier customreports.xml comme étant le layout de votre module Customreports .
Maintenant, déclarons le dossier ou vont se trouver les Blocks : Dans
<blocks>
<customreports>
<class>Yassinos_Customreports_Block</class>
</customreports>
</blocks>De la meme manière on a déclaré le dossier ou on va trouver les Helpers et les Models :
<helpers>
<customreports>
<class>Yassinos_Customreports_Helper</class>
</customreports>
</helpers>
<models>
<customreports>
<class>Yassinos_Customreports_Model</class>
</customreports>
</models>On intercepte l'évenement "core_block_abstract_to_html_after" responsable pour rendre un block html pour faire appel à notre fonction de l'observer "appendReportChart" ou on va faire les tests nécessaires pour s'assurer qu'on est dans le block qu'oncherche et le calcul nécessaire pour changer le html rendu :
<core_block_abstract_to_html_after>
<observers>
<Event_Append_Chart_Reports>
<type>model</type>
<class>customreports/observer</class>
<method>appendReportChart</method>
</Event_Append_Chart_Reports>
</observers>
</core_block_abstract_to_html_after>Créer un observeur :
Un observeur sous magento se met dans le repertoire Model de votre module et étend la classe Varien_Event_Observer (classe qui je pense est explicite…), allez donc dans /app/code/local/Yassinos/Customreports/Model/ et créez votre fichier Observer.php :
<?php
class Yassinos_Customreports_Model_Observer {
/**
* Append custom Chart on the top of the grid
*
* @param Varien_Object $observer
* @return Mage_Adminhtml_Block_Widget_Grid
*/
public function appendReportChart(Varien_Event_Observer $observer)
{
$block = $observer->getBlock();
$gridHTML = $observer->getTransport()->getHtml();
if ($block instanceof Mage_Adminhtml_Block_Report_Sales_Sales_Grid)
{
$html = ' test change html '. $gridHTML;
$observer->getTransport()->setHtml($html);
}
}
}On fait une concaténation d'un text de test : ' test change html ' et le html initial , maintenant quand vous ouvrez la page backoffice Reports ->Sales ->Orders , vous trouvez nécessairement un rendu semblable à cela :
Comme vous avez compris que cet observer est crée just pour injecter un bout de code html au dessus de la grid , on va procéder par la suite pour afficher une charte semblable à l'imprime écran si dessous à la place de text : ' test change html '.
Créer un block :
On va remplacer la ligne $html = ' test change html '. $gridHTML; par le contenue
$html = Mage::app()->getLayout()
->createBlock('customreports/adminhtml_charts')
->setTemplate('customreports/charts.phtml')
->toHtml()
. $gridHTML;Evidemment depuis la ligne ajouté on a besoin d'une classe block et d'un template html , on crée alors la class block dans le dossier /app/code/local/Yassinos/Customreports/Block/Adminhtml , on la nomme Charts.php tels qu'il est indiqué dans l'instanciation de l'objet et on met le contenu suivant d'une classe encore vide :
<?php
class Yassinos_Customreports_Block_Adminhtml_Charts extends Mage_Adminhtml_Block_Template
{
}il est aussi évident qu'on doit créer un template phtml sous app/design/adminhtml/default/default/template/customreports , on la nomme charts.phtml , et on mets dedans ce petit bout de code :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
</script>Par rafraichissement de la page backoffice Reports ->Sales ->Orders , on obtient notre nouvelle charte au dessus de la grid .
La résultat doit etre semblable à ceci :
Pas de présentation de donnés significative dans le graphe , c'est just des données de testes temporairement , on va avancer pour que le graphe représente l'historique de commandes passé sur le site.
Déclaration des fichiers.js
On doit changer l'initiaion de deux fichiers js "highcharts.js" et "exporting.js" dans le layout.xml de module tel quel est l'habitude dans les modules magento. Donc on télécharge ces 2 fichiers , on les place dans un dossier local dans le site , dans notre cas de préférence /js/customreports/ et on fait le lien depuis notre fichier customreports.xml qu'on doit la placer dans app/design/adminhtml/default/default/layout/customreports.xml :
<?xml version="1.0"?>
<adminhtml_report_sales_sales>
<reference name="head">
<action method="addJs">
<script>customreports/highcharts.js</script>
</action>
<action method="addJs">
<script>customreports/exporting.js</script>
</action>
</reference>
</adminhtml_report_sales_sales>
</layout>La rafraichissement de la page aprés le changement fait doit donner la meme résultat.
Représenter les commandes passés dans le site :
On passe à notre block la $collection représenté dans la grid de la page , pourcela on va changer la ligne de déclaration de block dans notre Observer de nouveau :
$html = Mage::app()->getLayout()
->createBlock('customreports/adminhtml_charts')
->setData('collection', $block->getCollection())
->setTemplate('customreports/charts.phtml')
->toHtml()
. $gridHTML;On remplace le contenue de charts.phtml par ce code qui suit :
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
function getLineChart(containerId,title,xAxis,data) {
Highcharts.chart(containerId, {
chart: {
type: 'line',
zoomType: 'xy'
},
title: {
text: title
},
xAxis: {
categories: xAxis
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}'
}
}, { // Secondary yAxis
opposite : true
}],
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: data
});
}
<?php if($this->getCollection()->getSize() > 0) : ?>
<?php $salesStatistics = $this->getSalesStatistics($this->getCollection()); ?>
getLineChart('container',
"<?php echo $this->__('Total Ordered Chart Report') ?>",
<?php echo $salesStatistics['xAxis'] ?>,
<?php echo $salesStatistics['data'] ?>
);
<?php endif; ?>
</script>Il est bien évident maintenant que le code Js précedement mis statique est devenue maintenant paramétrable , on a besoin d'une fonction php dans la classe block getSalesStatistics , pour le calcul et le rendu du données utilisable par le code js : array pour les axes des abscisses , array qui contient les données à représenter .. cette fonction prends en paramètre la collection de la grid en question ,
Notre classe block devient donc :
<?php
class Yassinos_Customreports_Block_Adminhtml_Charts extends Mage_Adminhtml_Block_Template
{
/**
* Provides Sales Statistics : Total Amouns & number orders
*
* @param Mage_Core_Model_Resource_Db_Collection_Abstract
* @return Array
*/
function getSalesStatistics($collection)
{
$xAxis = array();
$salesTotals = array();
$numberOrders = array();
foreach ($collection as $key => $item)
{
$xAxis[] = $item->getPeriod();
$salesTotals[] = $item->getTotalRevenueAmount();
$numberOrders[] = $item->getOrdersCount();
}
$data = array();
$data[] = array('name' => 'total revenue amount' ,'yAxis' => 1 , 'data' => array_map('intval',$salesTotals));
$data[] = array('name' => 'number orders' , 'data' => array_map('intval',$numberOrders));
return (array('xAxis' => json_encode($xAxis),
'data' => json_encode($data)
)
);
}
}Il est bien évident que la table multidimentionnel $data contient l'évolution de total revenue amount, et du nombre de commandes passés , $xAxis contient les dates comme données des axes des abscisses.
la résultat attendu doit etre semblable à cet affichage :
Et voilà on a arrivé à la fin de notre tuto , un peut long vu la complexité de besoin , vous trouvez le code de ce tuto dans le .zip qui suit.
à la prochaine.
Dans ce tutoriel vous apprendrez à créer un rapport graphique avec Highcharts sous Magento. Si vous n'avez pas vu le module de reporting crée en se basant sur cette bibliothèque, je vous invite fortement de le faire. via l’url : https://github.com/yassineBHS/magento1-custom-reports-plugin