Die Veröffentlichung von Version 2.3.0 brachte die Verwendung von PWA an der Vorderseite von Magento-Anwendungen näher an die Reichweite eines Arms. Und wenn einige Verschiebungen der verwendeten Technologien nach vorne sichtbar sind, ist mit dem Admin-Bereich alles viel stabiler - das gute alte Labyrinth verschiedener Dateitypen, die bearbeitet werden müssen, damit auf der Benutzeroberfläche etwas Nützliches angezeigt wird, soll nicht verbessert werden. In diesem Artikel beschreibe ich die Erstellung meines eigenen Renderers für die Rasterspalte im Admin-Bereich - die Dinge sind recht einfach und bei rechter Verwendung sehr nützlich. Ein Renderer zum Generieren von Links in einem Raster von Links zur Karte des Kunden, der die Bestellung aufgegeben hat:
Grundlegende Renderer-Komponenten
Der native Renderer für Links in Magento besteht aus zwei Dateien:
Bei der Verarbeitung der Vorlage werden die vom Code (Objekt $col ) bereitgestellten Funktionen verwendet. Die Eingabedaten für die Verarbeitung sind auch die aktuelle Gitterlinie (Objekt $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())"/>
Daten für das Grid werden über den Datenprovider heruntergeladen. Eine typische Anfrage lautet ungefähr so: " http: //.../admin/mui/index/render/? Namespace = sales_order_grid ... ". Die Datenstruktur kann über die Symbolleiste des Entwicklers im Browser angezeigt werden. Für ein Auftragsraster ist es ungefähr so:
{ "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 }
Eigener Renderer
Um unseren eigenen Renderer zu erstellen, müssen wir eine UI-Komponente angeben, die aus zwei Dateien besteht:
- JS-Code der Komponente;
- Knockout-Vorlage der Komponente;
Meine aktuelle Aufgabe besteht darin, einen Renderer zu erstellen, der einen Link zu dem Kunden anzeigt, der die Bestellung in der Auftragsrasterzelle aufgegeben hat. Um einen Link zu einem Client zu erstellen, muss ich die Kennung des entsprechenden Clients verwenden - customer_id . Sie können Ihre eigene Vorlage zum Rendern schreiben, aber in diesem Fall bin ich mit der vorhandenen Vorlage ( ./module-ui/view/base/web/templates/grid/cells/link.html ) sehr ./module-ui/view/base/web/templates/grid/cells/link.html . Es reicht aus, den JS-Code neu zu schreiben, der beim Aufrufen der Funktionen $col.getLink($row()) und $col.isLink($row()) das gewünschte Ergebnis $col.getLink($row()) .
Ich habe meinen Code in zwei Teile geteilt. Die Datei base.js enthält die grundlegende Logik zum Generieren des in der Vorlage verwendeten Links. In der Datei customer_name.js können Sie die grundlegende Logik zum Generieren des Links gemäß den Aufgaben einer bestimmten Spalte konfigurieren.
Grundfunktionalität
Als Basis nehme ich die vorhandene column UI-Komponente:
define([ "Magento_Ui/js/grid/columns/column", "mageUtils" ], function (Column, utils) { ... }
und (erneutes) Definieren seiner Attribute, um Magento_Ui , dass die Vorlage ui/grid/cells/link (aus dem Magento_Ui Modul) zum Rendern verwendet wird:
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" } });
und definieren Sie dann die in der Vorlage verwendeten Methoden (neu).
isLink (eine Verknüpfung kann hergestellt werden, wenn die Datensatzdaten ein Attribut mit dem in this.idAttrName gespeicherten Namen 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; }
Client Card Link
In der Datei customer_name.js wird die Grundfunktionalität so neu definiert, dass basierend auf der customer_id ID customer_id ein Link zur Kundenkarte " http: //.../admin/customer/index/edit/id/ ..." erstellt wird:
define([ "Flancer32_GridLink/js/grid/column/link/base" ], function (Column) { "use strict"; return Column.extend({ defaults: { idAttrName: "customer_id", route: "/customer/index/edit/id/" } }); });
Renderer-Verbindung
Der benutzerdefinierte Renderer ist mit der Definition der entsprechenden UI-Komponente mit dem Raster in der Datei verbunden. In unserem Fall ist dies ./module-sales/view/adminhtml/ui_component/sales_order_grid.xml . Im nativen Modul wird die Datei ./view/adminhtml/ui_component/sales_order_grid.xml erstellt, in der der Renderer für die entsprechende Spalte überschrieben wird:
<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>
Die Option settings/visible wird benötigt, damit die Spalte "Kundenname" im Raster sichtbar ist (standardmäßig nicht sichtbar).
Startreihenfolge
Beim Zusammenstellen aller XML-Deskriptoren verschiedener Teile einer Anwendung in Magento (einschließlich einer Beschreibung der UI-Komponenten) ist die Reihenfolge der Verarbeitungsdeskriptoren wichtig, die sich auf dieselben Komponenten beziehen, sich jedoch in verschiedenen Modulen befinden. In unserem Fall ist dies ./view/adminhtml/ui_component/sales_order_grid.xml . Wenn die Plattform zuerst den Deskriptor aus unserem Modul und dann aus dem Verkaufsmodul verarbeitet, ersetzt die Konfiguration des Verkaufsmoduls beim Zusammenführen von Deskriptoren unsere Konfiguration an den Stellen, an denen dieselben Attribute definiert sind (z. B. ist der Parameter settings/visible "false". ), obwohl unser Renderer weiterhin verwendet wird (das Verkaufsmodul definiert keinen Renderer für die Zelle "Kundenname").
Die ./etc/module.xml ist in ./etc/module.xml :
<config ...> <module name="Vendor_Module" setup_version="0.1.0"> <sequence> <module name="Magento_Sales"/> </sequence> </module> </config>
In diesem Fall wird unser Modul nach dem Magento_Sales-Modul geladen und unsere Einstellungen überschreiben die Einstellungen des Verkaufsmoduls, wenn sie mit den Einstellungen im Verkaufsmodul übereinstimmen.
Zusammenfassung
Die von der Magento-Plattform bereitgestellten Renderer sind recht einfach (z. B. wurde kein Renderer für Ganzzahlen mit Rechtfertigung gefunden). Durch das Erstellen eigener Renderer kann jedoch das Standard-Erscheinungsbild des Magento-Rasters im Admin-Bereich wiederbelebt werden.
Der Code für diese Veröffentlichung ist als Modul " mage2_ext_grid_column_renderer " konzipiert.