संस्करण 2.3.0 की रिलीज़ ने हाथ की लंबाई के करीब Magento के अनुप्रयोगों के सामने PWA का उपयोग लाया है। और अगर इस्तेमाल की जाने वाली प्रौद्योगिकियों में कुछ बदलाव सामने दिखाई देते हैं, तो व्यवस्थापक पैनल के साथ सब कुछ बहुत अधिक स्थिर है - विभिन्न फ़ाइल प्रकारों के अच्छे पुराने भूलभुलैया को संपादित करने की आवश्यकता है ताकि यूआई पर उपयोगी कुछ दिखाई देने वाले को बेहतर बनाने की योजना न हो। इस लेख में, मैं व्यवस्थापक पैनल में ग्रिड कॉलम के लिए अपने स्वयं के रेंडरर के निर्माण का वर्णन करता हूं - चीजें काफी सरल हैं और, एक ही समय में, काफी उपयोगी हैं अगर सही तरीके से उपयोग किया जाता है। उदाहरण के लिए, ऑर्डर देने वाले ग्राहक के कार्ड के लिंक के ग्रिड में लिंक बनाने के लिए एक रेंडरर:

मूल रेंडरर घटक

Magento में लिंक के लिए मूल रेंडरर में दो फाइलें होती हैं:

• ./module-ui/view/base/web/js/grid/columns/link.js - घटक कोड;
• ./module-ui/view/base/web/templates/grid/cells/link.html - घटक UI-टेम्पलेट ( नॉकआउट );

टेम्प्लेट को संसाधित करने की प्रक्रिया में, कोड (ऑब्जेक्ट $col ) द्वारा प्रदान किए गए कार्यों का उपयोग किया जाता है। प्रसंस्करण के लिए इनपुट डेटा भी वर्तमान ग्रिड लाइन (ऑब्जेक्ट $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())"/> 

ग्रिड के लिए डेटा डेटा प्रदाता के माध्यम से डाउनलोड किया जाता है। एक विशिष्ट क्वेरी कुछ इस प्रकार है: " http: //../admin/mui/index/render? - Namespace = sales_order_grid ... "। ब्राउज़र में डेटा संरचना को डेवलपर के टूलबार के माध्यम से देखा जा सकता है। आदेशों की एक ग्रिड के लिए, यह कुछ इस तरह है:

 { "items": [ { "id_field_name": "entity_id", "entity_id": "1", "status": "pending", "store_id": "Main Website<br\/>&nbsp;&nbsp;&nbsp;Main Website Store<br\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 } 

खुद का रेंडर

इस प्रकार, अपने स्वयं के रेंडरर बनाने के लिए, हमें दो फ़ाइलों से मिलकर एक यूआई घटक निर्दिष्ट करना होगा:

• जेएस कोड का घटक;
• घटक के नॉकआउट-टेम्पलेट;

मेरा वर्तमान कार्य एक रेंडरर बनाना है जो क्लाइंट को एक ऑर्डर प्रदर्शित करता है जिसने ऑर्डर को ग्रिड सेल में रखा था। एक ग्राहक के लिए एक लिंक बनाने के लिए, मुझे संबंधित क्लाइंट - customer_id के पहचानकर्ता का उपयोग करने की आवश्यकता है। आप रेंडरिंग के लिए अपना टेम्प्लेट लिख सकते हैं, लेकिन इस मामले में, मैं मौजूदा टेम्प्लेट (( ./module-ui/view/base/web/templates/grid/cells/link.html ) से काफी खुश हूं। यह JS कोड को फिर से लिखने के लिए पर्याप्त है जो $col.getLink($row()) और $col.isLink($row()) फ़ंक्शन को कॉल करते समय वांछित परिणाम $col.isLink($row()) ।

मैंने अपने कोड को दो भागों में विभाजित किया है। आधार.जेएस फ़ाइल में टेम्प्लेट में प्रयुक्त लिंक को जोड़ने के लिए मूल तर्क है, और customer_name.js फ़ाइल आपको किसी विशेष स्तंभ के कार्यों के अनुसार लिंक करने के लिए मूल तर्क को कॉन्फ़िगर करने की अनुमति देती है।

बुनियादी कार्यक्षमता

आधार के रूप में, मैं मौजूदा column UI घटक को लेता हूं:

 define([ "Magento_Ui/js/grid/columns/column", "mageUtils" ], function (Column, utils) { ... } 

और (पुनः) इसकी विशेषताओं को परिभाषित करते हैं, यह दर्शाता है कि ui/grid/cells/link टेम्पलेट ( Magento_Ui मॉड्यूल से) का उपयोग प्रतिपादन के लिए किया जाता है:

  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" } }); 

और फिर (री) टेम्पलेट में उपयोग की जाने वाली विधियों को परिभाषित करें।

isLink (एक लिंक बनाया जा सकता है अगर record डेटा में इस नाम में संग्रहीत नाम के साथ एक विशेषता हो।

  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; } 

ग्राहक कार्ड लिंक

Customer_name.js फ़ाइल में, बुनियादी कार्यक्षमता को इस तरह से पुनर्परिभाषित किया जाता है कि ग्राहक के कार्ड का लिंक " http: //..//min/customer/index/edit/id/ ..." customer_id 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/" } }); }); 

रेंडरर कनेक्शन

कस्टम रेंडरर फ़ाइल में ग्रिड से संबंधित यूआई घटक की परिभाषा के साथ जुड़ा हुआ है। हमारे मामले में, यह है ./module-sales/view/adminhtml/ui_component/sales_order_grid.xml । मूल मॉड्यूल में, फ़ाइल ./view/adminhtml/ui_component/sales_order_grid.xml बनाया जाता है जिसमें हम संबंधित कॉलम के लिए रेंडरर को ओवरराइड करते हैं:

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

settings/visible विकल्प की जरूरत है ताकि ग्रिड में "customer_name" कॉलम दिखाई दे (डिफ़ॉल्ट रूप से यह दिखाई नहीं देता है)।

बूट क्रम

मैगेंटो (यूआई घटकों के विवरण सहित) में एक आवेदन के विभिन्न भागों के सभी एक्सएमएल विवरणकों को इकट्ठा करते समय, एक ही घटकों से संबंधित वर्णनकर्ताओं के प्रसंस्करण का क्रम, लेकिन विभिन्न मॉड्यूलों में स्थित है, महत्वपूर्ण है। हमारे मामले में, यह ./view/adminhtml/ui_component/sales_order_grid.xml । यदि प्लेटफ़ॉर्म पहले हमारे मॉड्यूल से डिस्क्रिप्टर को प्रोसेस करता है, और फिर सेल्स मॉड्यूल से, तो जब डिस्क्रिप्टर को मर्ज करते हैं, तो सेल्स मॉड्यूल कॉन्फिगरेशन हमारे कॉन्फ़िगरेशन को उन जगहों पर बदल देगा जहाँ समान विशेषताओं को परिभाषित किया गया है (उदाहरण के लिए, settings/visible पैरामीटर "गलत" होगा ), हालांकि हमारे रेंडरर का उपयोग अभी भी किया जाएगा (बिक्री मॉड्यूल "ग्राहक नाम" सेल के लिए रेंडरर को परिभाषित नहीं करता है)।

लोड ऑर्डर में ./etc/module.xml है ./etc/module.xml :

 <config ...> <module name="Vendor_Module" setup_version="0.1.0"> <sequence> <module name="Magento_Sales"/> </sequence> </module> </config> 

इस मामले में, हमारे मॉड्यूल को Magento_Sales मॉड्यूल के बाद लोड किया जाएगा, और हमारी सेटिंग्स, यदि वे बिक्री मॉड्यूल में सेटिंग्स के साथ मेल खाते हैं, तो बिक्री मॉड्यूल की सेटिंग्स को ओवरराइड करेगा।

सारांश

मैगेंटो प्लेटफ़ॉर्म द्वारा प्रदान किए गए रेंडरर्स का सेट काफी बुनियादी है (उदाहरण के लिए, यह सही-औचित्य के साथ पूर्णांक के लिए रेंडरर नहीं मिला), लेकिन अपने खुद के रेंडरर्स बनाने से व्यवस्थापक पैनल में मैगेंटो ग्रिड के मानक स्वरूप को पुनर्जीवित किया जा सकता है।

इस प्रकाशन का कोड एक मॉड्यूल " mage2_ext_grid_column_renderer " के रूप में डिज़ाइन किया गया है।