Read More
Read More
Menu Close

    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.

    image-8
    KPI row

    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:

    PropertyDescription
    idThe ID of the KPI block
    iconAn icon that you want to display for the KPI (ie: icon-users)
    chartIt accepts a boolean value. Make true if you want to display a chart for the KPI
    colorColor class for the KPI (available classes: color1, color2, color3, and color4)
    titleTitle of the KPI
    subtitleThe subtitle of the KPI
    valueInitial value of the KPI
    dataRequired to display the chart, chart data will be in JSON format
    sourceSource URL from where KPI value is fetched through AJAX
    refreshIt accepts a boolean value. If true, it refreshes the KPI value initially
    hrefLink if you want to redirect the user by clicking on KPI
    tooltipTooltip for the KPI
    HelperKpi class properties

    For example:

    Searching for an experienced
    Prestashop Company ?
    Read More
    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:

    PropertyDescription
    kpisAn array of KPIs that you have generated through HelperKpi class
    refreshIt accepts a boolean value. If true, a refresh button will appear on the KPI block
    HelperKpiRow class property

    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:

    image-10
    KPI block

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

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top