In this blog, we will learn how to add KPI (Key performance indicators) block in our PrestaShop module. Key performance indicators are a set of data that reflect the performance of an organization/company against a targeted goal. These indicators help you in taking the necessary steps to improve the performance of the e-commerce business.
KPIs are already available on many pages in the PrestaShop back office like customers, orders, customer service, etc.

To create the KPI block, we need to add the renderKpis()
method in our module admin controller:
public function renderKpis()
{
}
Now, we will create an object of HelperKpi
class and assign its property:
Property | Description |
id | The ID of the KPI block |
icon | An icon that you want to display for the KPI (ie: icon-users) |
chart | It accepts a boolean value. Make true if you want to display a chart for the KPI |
color | Color class for the KPI (available classes: color1, color2, color3, and color4) |
title | Title of the KPI |
subtitle | The subtitle of the KPI |
value | Initial value of the KPI |
data | Required to display the chart, chart data will be in JSON format |
source | Source URL from where KPI value is fetched through AJAX |
refresh | It accepts a boolean value. If true, it refreshes the KPI value initially |
href | Link if you want to redirect the user by clicking on KPI |
tooltip | Tooltip for the KPI |
For example:
public function renderKpis()
{
$kpis = array();
$helper = new HelperKpi();
$helper->id = 'box-total-user';
$helper->icon = 'icon-users';
$helper->color = 'color1';
$helper->title = $this->l('Total users');
$helper->subtitle = $this->l('30 days');
$helper->source = $this->context->link->getAdminLink('AdminWkUserList').'&ajax=1&action=getKpi&kpi=total_users';
$helper->refresh = true;
$kpis[] = $helper->generate();
}
We have generated a single KPI and assigned it in a $kpis
array. Now, we need to render it in our admin controller. To render this, we have to create another object of the class HelperKpiRow
and assign its properties:
Property | Description |
kpis | An array of KPIs that you have generated through HelperKpi class |
refresh | It accepts a boolean value. If true, a refresh button will appear on the KPI block |
For example:
public function renderKpis()
{
$kpis = array();
$helper = new HelperKpi();
$helper->id = 'box-total-user';
$helper->icon = 'icon-users';
$helper->color = 'color1';
$helper->title = $this->l('Total users', null, null, false);
$helper->subtitle = $this->l('30 days', null, null, false);
$helper->source = $this->context->link->getAdminLink('AdminWkUserList').'&ajax=1&action=getKpi&kpi=total_users';
$helper->refresh = true;
$kpis[] = $helper->generate();
$helper = new HelperKpiRow();
$helper->kpis = $kpis;
$helper->refresh = true;
return $helper->generate();
}
In the final step, we will write the AJAX code to return the KPI data. AJAX response must be in the below JSON format:
{
"value": "KPI_VALUE"
"tooltip": "TOOLTIP_TITLE_IF_ANY"
}
For example:
public function ajaxProcessGetKpi()
{
if (Tools::getValue('kpi') == 'total_users') {
die(Tools::jsonEncode(array(
'value' => 20 // Fetch user count from the database
)));
}
}
Now, the KPI block will appear on the admin controller:

That’s all.
If any issue or doubt in the above process, please feel free to let us know in the comment section.
I would be happy to help.
Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.
For any doubt contact us at [email protected].
Be the first to comment.