How to add KPI block in the PrestaShop module

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();

    <strong>$helper = new HelperKpiRow();
    $helper->kpis = $kpis;
    $helper->refresh = true;
    return $helper->generate();</strong>
}

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].