La sortie de la version 2.3.0 a rapproché l'utilisation de PWA à l'avant des applications Magento de la portée d'un bras. Et si certains changements dans les technologies utilisées sont visibles de face, alors avec le panneau d'administration, tout est beaucoup plus stable - le bon vieux labyrinthe de divers types de fichiers qui doivent être modifiés pour que quelque chose d'utile apparaisse sur l'interface utilisateur n'est pas prévu d'être amélioré. Dans cet article, je décris la création de mon propre moteur de rendu pour la colonne de la grille dans le panneau d'administration - les choses sont assez simples et, en même temps, très utiles si elles sont utilisées correctement. Par exemple, un moteur de rendu pour générer des liens dans une grille de liens vers la carte du client qui a passé la commande:
Composants de rendu de base
Le moteur de rendu natif pour les liens dans Magento se compose de deux fichiers:
Dans le processus de traitement du modèle, les fonctions fournies par le code (objet $col ) sont utilisées. Les données d'entrée pour le traitement sont également la ligne de grille actuelle (objet $row ):
<div class="data-grid-cell-content" if="!$col.isLink($row())" text="$col.getLabel($row())"/> <a class="action-menu-item" if="$col.isLink($row())" text="$col.getLabel($row())" attr="href: $col.getLink($row())"/>
Les données de la grille sont téléchargées via le fournisseur de données. Une requête typique est quelque chose comme ceci: " http: //.../admin/mui/index/render/? Namespace = sales_order_grid ... ". La structure des données peut être vue via la barre d'outils du développeur dans le navigateur. Pour une grille de commandes, c'est quelque chose comme ceci:
{ "items": [ { "id_field_name": "entity_id", "entity_id": "1", "status": "pending", "store_id": "Main Website<br\/> Main Website Store<br\/> Default Store View<br\/>", "store_name": "Main Website\nMain Website Store\n", "customer_id": "1", "base_grand_total": "RUB34.68", "base_total_paid": null, "grand_total": "RUB34.68", "total_paid": null, "increment_id": "000000001", "base_currency_code": "RUB", "order_currency_code": "RUB", "shipping_name": "Alex Gusev", "billing_name": "Alex Gusev", "created_at": "2018-12-22 19:35:19", "updated_at": "2018-12-22 19:35:20", "billing_address": "Street,Riga,R\u012bga,1010", "shipping_address": "Street,Riga,R\u012bga,1010", "shipping_information": "Flat Rate - Fixed", "customer_email": "alex@flancer64.com", "customer_group": "1", "subtotal": "RUB24.68", "shipping_and_handling": "RUB10.00", "customer_name": "Alex Gusev", "payment_method": "checkmo", "total_refunded": "RUB0.00", "signifyd_guarantee_status": null, "orig_data": null, "actions": { "view": { "href": "http:\/\/sample.local.flancer64.com\/admin\/sales\/order\/view\/order_id\/1\/", "label": "View" } } } ], "totalRecords": 1 }
Rendu propre
Ainsi, pour créer notre propre moteur de rendu, nous devons spécifier un composant d'interface utilisateur composé de deux fichiers:
- Code JS du composant;
- Knockout-template du composant;
Ma tâche actuelle consiste à créer un moteur de rendu qui affiche un lien vers le client qui a passé la commande dans la cellule de la grille de commande. Pour créer un lien vers un client, je dois utiliser l'identifiant du client correspondant - customer_id . Vous pouvez écrire votre propre modèle pour le rendu, mais dans ce cas, je suis assez satisfait du modèle existant ( ./module-ui/view/base/web/templates/grid/cells/link.html ). Il suffit de réécrire le code JS qui retournerait le résultat souhaité lors de l'appel des fonctions $col.getLink($row()) et $col.isLink($row()) .
J'ai divisé mon code en deux parties. Le fichier base.js contient la logique de base pour la liaison utilisée dans le modèle et le fichier customer_name.js vous permet de configurer la logique de base pour la liaison conformément aux tâches d'une colonne particulière.
Fonctionnalité de base
Comme base, je prends le composant d'interface utilisateur de column existant:
define([ "Magento_Ui/js/grid/columns/column", "mageUtils" ], function (Column, utils) { ... }
et (re) définir ses attributs, indiquant que le modèle ui/grid/cells/link (du module Magento_Ui ) est utilisé pour le rendu:
return Column.extend({ defaults: { /** * Replace idAttrName & route in children. */ /* name of the identification attribute */ idAttrName: "customer_id", /* route part to the page */ route: "/customer/index/edit/id/", bodyTmpl: "ui/grid/cells/link" } });
puis (re) définir les méthodes utilisées dans le modèle.
isLink (un lien peut être formé si les données d' record contiennent un attribut avec le nom stocké dans this.idAttrName ):
isLink: function (record) { const result = !!utils.nested(record, this.idAttrName); return result; }
getLink :
getLink: function (record) { const id = utils.nested(record, this.idAttrName); const result = ROOT_URL + this.route + id; return result; }
Lien de la carte client
Dans le fichier customer_name.js , la fonctionnalité de base est redéfinie de telle sorte qu'un lien vers la carte du client est formé " http: //.../admin/customer/index/edit/id/ ..." en fonction de l'ID client customer_id :
define([ "Flancer32_GridLink/js/grid/column/link/base" ], function (Column) { "use strict"; return Column.extend({ defaults: { idAttrName: "customer_id", route: "/customer/index/edit/id/" } }); });
Connexion du rendu
Le rendu personnalisé est connecté à la grille dans le fichier avec la définition du composant d'interface utilisateur correspondant. Dans notre cas, il s'agit de ./module-sales/view/adminhtml/ui_component/sales_order_grid.xml . Dans le module natif, le fichier ./view/adminhtml/ui_component/sales_order_grid.xml est créé dans lequel nous remplaçons le rendu de la colonne correspondante:
<listing ...> <columns name="sales_order_columns"> <column name="customer_name" component="Vendor_Module/js/grid/column/link/customer_name"> <settings> <visible>true</visible> </settings> </column> </columns> </listing>
L'option settings/visible est nécessaire pour que la colonne "customer_name" soit visible dans la grille (par défaut elle n'est pas visible).
Ordre de démarrage
Lors de l'assemblage de tous les descripteurs xml des différentes parties d'une application dans Magento (y compris une description des composants de l'interface utilisateur), l'ordre de traitement des descripteurs liés aux mêmes composants, mais situés dans différents modules, est important. Dans notre cas, il s'agit de ./view/adminhtml/ui_component/sales_order_grid.xml . Si la plateforme traite d'abord le descripteur de notre module, puis du module de vente, puis lors de la fusion des descripteurs, la configuration du module de vente remplacera notre configuration aux endroits où les mêmes attributs sont définis (par exemple, les settings/visible paramètre settings/visible seront "faux" ), bien que notre moteur de rendu soit toujours utilisé (le module de vente ne définit pas de moteur de rendu pour la cellule "Nom du client").
L'ordre de chargement est ./etc/module.xml dans ./etc/module.xml :
<config ...> <module name="Vendor_Module" setup_version="0.1.0"> <sequence> <module name="Magento_Sales"/> </sequence> </module> </config>
Dans ce cas, notre module sera chargé après le module Magento_Sales, et nos paramètres, s'ils coïncident avec les paramètres du module de vente, remplaceront les paramètres du module de vente.
Résumé
L'ensemble de rendus fournis par la plate-forme Magento est assez basique (par exemple, il n'a pas trouvé de rendu pour les entiers avec justification à droite), mais la création de vos propres rendus peut raviver l'apparence standard de la grille Magento dans le panneau d'administration.
Le code de cette publication est conçu comme un module " mage2_ext_grid_column_renderer ".