Publié le 3 juillet 2020

Comment personnaliser la couleur du dashboard pour les commandes récentes ?

Voici ma réponse complète que j'édite sur mon site pour éviter de perdre ce tutoriel au fond du forum dans quelques jours.

Situation originale

Voici l'affichage que vous retrouvez sur votre tableau de bord

Comme le fait remarquer @idjy sur le forum, l'usage d'une simple couleur verte lorsque la commande est valide ne permet pas vraiment de suivre l'état des commandes même si on a le statut de la commande en mode texte sur la colonne de droite.

Utilisons les couleurs des statuts

Le plus simple est donc de forcer la couleur définie pour chaque statut.

Tout se passe dans le module dashproducts.

Ouvrez le fichier dashproducts.php.

Trouvez la fonction getTableRecentOrders().

Voici le code d'origine :

public function getTableRecentOrders()
{
    $header = array(
        array('title' => $this->trans('Customer Name', array(), 'Modules.Dashproducts.Admin'), 'class' => 'text-left'),
        array('title' => $this->trans('Products', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => $this->trans('Total', array(), 'Admin.Global').' '.$this->trans('Tax excl.', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => $this->trans('Date', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => $this->trans('Status', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => '', 'class' => 'text-right'),
    );

    $limit = (int)Configuration::get('DASHPRODUCT_NBR_SHOW_LAST_ORDER') ? (int)Configuration::get('DASHPRODUCT_NBR_SHOW_LAST_ORDER') : 10;
    $orders = Order::getOrdersWithInformations($limit);

    $body = array();
    foreach ($orders as $order) {
        $currency = Currency::getCurrency((int)$order['id_currency']);
        $tr = array();
        $tr[] = array(
            'id' => 'firstname_lastname',
            'value' => '<a href="'.$this->context->link->getAdminLink('AdminCustomers', true).'&id_customer='.$order['id_customer'].'&viewcustomer">'.Tools::htmlentitiesUTF8($order['firstname']).' '.Tools::htmlentitiesUTF8($order['lastname']).'</a>',
            'class' => 'text-left',
        );
        $tr[] = array(
            'id' => 'total_products',
            'value' => count(OrderDetail::getList((int)$order['id_order'])),
            'class' => 'text-center',
        );
        $tr[] = array(
            'id' => 'total_paid',
            'value' => Tools::displayPrice((float)$order['total_paid_tax_excl'], $currency),
            'class' => 'text-center',
            'wrapper_start' => $order['valid'] ? '<span class="badge badge-success">' : '',
            'wrapper_end' => '<span>',
        );
        $tr[] = array(
            'id' => 'date_add',
            'value' => Tools::displayDate($order['date_add']),
            'class' => 'text-center',
        );
        $tr[] = array(
            'id' => 'status',
            'value' => Tools::htmlentitiesUTF8($order['state_name']),
            'class' => 'text-center',
        );
        $tr[] = array(
            'id' => 'details',
            'value' => '',
            'class' => 'text-right',
            'wrapper_start' => '<a class="btn btn-default" href="index.php?tab=AdminOrders&id_order='.(int)$order['id_order'].'&vieworder&token='.Tools::getAdminTokenLite('AdminOrders').'" title="'.$this->trans('Details', array(), 'Modules.Dashproducts.Admin').'"><i class="icon-search"></i>',
            'wrapper_end' => '</a>'
        );

        $body[] = $tr;
    }

    return array('header' => $header, 'body' => $body);
}

Nous allons travailler dans la boucle des commandes en récupérant les informations sur le statut de la commande traité dans la boucle.

$state = new OrderState($order['current_state']);

Puis nous allons modifier la couleur sur la colonne total_paid.

'wrapper_start' => '<span class="badge badge-success" style="background-color:'.$state->color.';">',

Nous obtenons le résultat suivant :

Le résultat est tout à fait acceptable ainsi mais en regardant l'affichage des statuts dans le backoffice de PrestaShop on remarque que la couleur du texte est différente en fonction du statut.

Intégrons cette option qui apportera un plus certain sur les commandes dont la couleur du statut est très claire et donc où il sera difficile de lire un texte blanc.

Je vais aussi en profiter pour rajouter le title rappelant le nom du statut pour faciliter les choses et afficher l'étiquette si on place la souris sur le badge.

'wrapper_start' => '<span class="badge badge-success" style="background-color:'.$state->color.';color:'.((Tools::getBrightness($state->color) < 128) ? 'white' : '#383838').'" title="'.$state->name[$this->context->language->id].'">',

Je vous laisserais étudier la fonction getBrightness() pour vous amuser à faire varier la valeur de 128 qui est la moitié de 255, valeur maximale que peut prendre la valeur testée. Comme cela vous pouvez affiner en fonction de vos goûts et de la configuration des couleurs de vos statuts.

Vous pourrez aussi choisir une autre couleur que #383838 et partir sur un gris plus sombre et plus profond.

Le résultat sera donc :

Et voici le code complet de la fonction qui sera bien entendu écrasé si vous mettez à jour le module, donc à conserver dans un coin pour s'en souvenir ou travailler sur une solution de surcharge par un autre moyen, mais au regard du module je ne sais pas si cela peut être nécessaire.

public function getTableRecentOrders()
{
    $header = array(
        array('title' => $this->trans('Customer Name', array(), 'Modules.Dashproducts.Admin'), 'class' => 'text-left'),
        array('title' => $this->trans('Products', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => $this->trans('Total', array(), 'Admin.Global').' '.$this->trans('Tax excl.', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => $this->trans('Date', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => $this->trans('Status', array(), 'Admin.Global'), 'class' => 'text-center'),
        array('title' => '', 'class' => 'text-right'),
    );

    $limit = (int)Configuration::get('DASHPRODUCT_NBR_SHOW_LAST_ORDER') ? (int)Configuration::get('DASHPRODUCT_NBR_SHOW_LAST_ORDER') : 10;
    $orders = Order::getOrdersWithInformations($limit);

    $body = array();
    foreach ($orders as $order) {
        $state = new OrderState($order['current_state']);
        $currency = Currency::getCurrency((int)$order['id_currency']);
        $tr = array();
        $tr[] = array(
            'id' => 'firstname_lastname',
            'value' => '<a href="'.$this->context->link->getAdminLink('AdminCustomers', true).'&id_customer='.$order['id_customer'].'&viewcustomer">'.Tools::htmlentitiesUTF8($order['firstname']).' '.Tools::htmlentitiesUTF8($order['lastname']).'</a>',
            'class' => 'text-left',
        );
        $tr[] = array(
            'id' => 'total_products',
            'value' => count(OrderDetail::getList((int)$order['id_order'])),
            'class' => 'text-center',
        );
        $tr[] = array(
            'id' => 'total_paid',
            'value' => Tools::displayPrice((float)$order['total_paid_tax_excl'], $currency),
            'class' => 'text-center',
            'wrapper_start' => '<span class="badge badge-success" style="background-color:'.$state->color.';color:'.((Tools::getBrightness($state->color) < 128) ? 'white' : '#383838').'" title="'.$state->name[$this->context->language->id].'">',
            'wrapper_end' => '<span>',
        );
        $tr[] = array(
            'id' => 'date_add',
            'value' => Tools::displayDate($order['date_add']),
            'class' => 'text-center',
        );
        $tr[] = array(
            'id' => 'status',
            'value' => Tools::htmlentitiesUTF8($order['state_name']),
            'class' => 'text-center',
        );
        $tr[] = array(
            'id' => 'details',
            'value' => '',
            'class' => 'text-right',
            'wrapper_start' => '<a class="btn btn-default" href="index.php?tab=AdminOrders&id_order='.(int)$order['id_order'].'&vieworder&token='.Tools::getAdminTokenLite('AdminOrders').'" title="'.$this->trans('Details', array(), 'Modules.Dashproducts.Admin').'"><i class="icon-search"></i>',
            'wrapper_end' => '</a>'
        );

        $body[] = $tr;
    }

    return array('header' => $header, 'body' => $body);
}

Situation originale

Utilisons les couleurs des statuts

Discussions