Les fondamentaux de l'outil de Personnalisation de l'interface PRO

L'outil de personnalisation de l'interface PRO vous permet d’ajouter des champs non natifs à PrestaShop dans votre outil Store Commander (interface, import, export etc…). Cet outil extraordinaire est inclus dans nos offres d’abonnements supérieures (SOLO+ et MULTISTORE+).

C’est un véritable “game changer” lorsque vous avez des champs personnalisés sur votre boutique PrestaShop ou si vous souhaitez afficher rapidement des statistiques de ventes par exemple.

Comment y accéder

Pour accéder à la partie PRO :

• rendez-vous dans le menu Outils > Personnalisation de l’interface

• cliquez sur l'icône de la colonne de droite intitulée 'Champs Disponibles' :

Ajouter un champ

Pour ajouter un champ :

• sélectionnez tout d'abord l'endroit où ajouter ce champ, à partir du menu déroulant de la colonne de gauche.

• Puis cliquez sur l'icône pour nommer le nom du champ, la table et le type :

• Pour configurer le nouveau champ, sélectionnez le panneau correspondant dans lequel les requêtes SQL seront saisies

Si vous n'avez pas les connaissances nécessaires, vous pouvez faire appel à notre équipe de développeurs. Contactez-nous pour une demande de devis.

 Code index

 Select Options

Pour utiliser cet outil, le cell type de votre champ doit être 'multiple choice'. Cette section vous permet de configurer les options du menu de sélection lorsque l'utilisateur clique pour éditer la cellule.

Pour mettre en place les options, vous devez utiliser return a PHP array:

return array(1=>'Yes' , 0=>'No');

Vous pouvez utiliser un code plus complexe pour récupérer les options de la table :

$sql = 'SELECT id_logistician,name_logistician FROM ps_logistician ORDER BY name_logistician';
$res = Db::getInstance()->ExecuteS($sql);
$tmparray = array(0 => 'NA');
foreach ($res AS $row) {
    $tmparray[$row['id_logistician']] = $row['name_logistician'];
}
return $tmparray;SQL Select

Ici vous devez récupérer le nom du champ qui sera affiché dans les grilles. Cela sera utilisé dans la requête principale pour obtenir les informations produits/commandes.

Vous pouvez utiliser ces variables :

$view - name of the current grid view
$cols - array of columns of the grid
$id_lang - language used in the interface

Exemple:

return ' ,myTableAlias.myTableFieldName AS myFieldName';

Vous pouvez utiliser un code plus complexe pour obtenir la valeur de fonctionnalité du produit:

return ' , (SELECT fvl.value FROM `ps_feature_product` fp 
                LEFT JOIN `ps_feature_value_lang` fvl 
                ON (fp.id_feature_value=fvl.id_feature_value and fvl.id_lang=2)
                WHERE fp.id_feature = 3 
                AND fp.id_product = p.id_product) as myFeature ';

Un autre exemple pour ajouter le nom des produits commandés dans la grille des commandes (exemple complet disponible sur notre base de connaissances) :

return ' , (SELECT GROUP_CONCAT(product_name SEPARATOR '') 
                FROM `'._DB_PREFIX_.'order_detail` od 
                WHERE od.id_order = o.id_order) as orderProductsNames ';

SQL Left Join

Vous ne devez pas utiliser les alias qui correspondent aux tables classiques de Prestashop pour les champs de tables externes (ne pas utiliser "p.", "a.", etc.)

Vous pouvez utiliser ces variables :

$view - name of the current grid view
$cols - array of columns of the grid
$id_lang - language used in the interface

Exemples:

return " LEFT JOIN "._DB_PREFIX_."myTable myTableAlias ON (myTableAlias.id_product= p.id_product) ";

Attention : si vous utilisez plusieurs champs d'une table externe (myTable), vous devez insérer cette information une seule fois pour tous les champs.

Grid JS onBeforeUpdate

Work in progress...

Grid JS onEditCell

This event is triggered when a cell is edited by the user in the interface.

// onEditCell(stage,rId,cInd,nValue,oValue)
// rId is the row ID
// cInd is the column INDEX
// nValue is the new value
// oValue is the old value

if (nValue != oValue) {
    idxDeliveryInfo = cat_grid.getColIndexById('DeliveryInfo');
    if (cInd == idxDeliveryInfo) {
// here we truncate the data entered by the user
        cat_grid.cells(rId, idxDeliveryInfo).setValue(cat_grid . cells(rId, idxDeliveryInfo).getValue().substr(0, 100));
    }
}

Grid JS onAfterUpdate

Work in progress...

PHP definition

When you add a field to the combinations grid, you need to declare it in this section.

$combArray[$combinaison['id_product_attribute']]['myFieldName'] = $combinaison['myFieldName'];

PHP onBeforeUpdateSQL

Work in progress...

PHP onAfterUpdateSQL

This event is triggered when the user's browser sends the data to the server.
In this section we need to store the new value in the database.

Vous pouvez utiliser ces variables :

$id_product
$id_lang

Exemple :

$sql = "SELECT * FROM "._DB_PREFIX_."myTable WHERE id_product=".(int)$id_product;
$res = Db::getInstance()->ExecuteS($sql);
$myFieldName = Tools::getValue('myFieldName', -1);
if (count($res)) {
    if (in_array($myFieldName, array('North', 'East'))) // we check if the new value is in the expected range of values
    {
        $sql = "UPDATE "._DB_PREFIX_."myTable SET myFieldName=".psql($myFieldName)." WHERE id_product=".(int)$id_product;
        Db::getInstance()->Execute($sql);
    } else {
        $sql = "DELETE FROM "._DB_PREFIX_."myTable WHERE id_product=".(int)$id_product;
        Db::getInstance()->Execute($sql);
    }
} else {
    $sql = "INSERT INTO "._DB_PREFIX_."myTable (id_product,myFieldName) VALUES (".(int)$id_product.",'".psql($myFieldName)."')";
    Db::getInstance()->Execute($sql);
}

Tables utilisées dans les requêtes

 Les champs que vous ajoutez sont utilisés dans des requêtes qui font déjà appel à certaines tables de base de données.

Voici la liste des tables utilisées en fonction de la grille, vous pouvez vous servir des alias indiqués :

p

pl

i

ps

sa

ss

prs

p

pa

pac

a

ag

al

agl

p_shop

pa_shop

ps

sa

pa

pas

o

oh

m

od

c

ad

adi

c

a

Modifier la valeur saisie dans une grille - Grid JS onEditCell

Pré-requis

Suivre le guide Grille produits : Ajouter un champ depuis la table ps_product_lang pour créer le champ "Infos livraison"

Objectif

Nous souhaitons modifier la valeur du champ "Infos livraison" saisi pour le tronquer s'il dépasse 100 caractères et ensuite envoyer cette valeur au serveur pour l'enregistrer dans la base de données.

Mise en place

Dans le panneau des Propriétés Avancées à droite :

Sélectionner le menu Grid JS onEditCell et renseignez :

// onEditCell(stage,rId,cInd,nValue,oValue) // rId is the row ID // cInd is the column INDEX // nValue is the new value // oValue is the old value if (nValue != oValue) { idxDeliveryInfo = cat_grid.getColIndexById('infos_livraison'); if (cInd == idxDeliveryInfo) { cat_grid.cells(rId, idxDeliveryInfo).setValue(cat_grid.cells(rId, idxDeliveryInfo).getValue().substr(0, 100)); } }

Relancez complètement la page de Store Commander pour tester les nouvelles modifications.

Pour adapter ce champ à la grille des déclinaisons, le code suivant est à utiliser :

// onEditCell(stage,rId,cInd,nValue,oValue) // rId is the row ID // cInd is the column INDEX // nValue is the new value // oValue is the old value if (nValue != oValue) { idxDeliveryInfo = prop_tb._combinationsGrid.getColIndexById('infos_livraison'); if (cInd == idxDeliveryInfo) { prop_tb._combinationsGrid.cells(rId, idxDeliveryInfo).setValue(prop_tb._combinationsGrid.cells(rId, idxDeliveryInfo).getValue().substr(0, 100)); } }