Bagaimana Cara Menambahkan Kolom dengan Filter ke Kotak Pesanan Magento 2?

Seringkali, administrator toko Magento 2 memerlukan opsi tambahan saat menggunakan dan menyesuaikan kisi pesanan pemfilteran berdasarkan parameter out-of-the-box tertentu dapat menjadi tantangan nyata.

Baru-baru ini, Pengembang Magento menghubungi saya dengan sebuah pertanyaan. Dia mencoba memperluas kisi pesanan di Magento 2.3.1. Posting lama yang tersedia di web tidak membantu tentu saja, banyak yang telah berubah di Magento sejak dua tahun terakhir.

Berdasarkan pertanyaannya, saya menawarkan Anda untuk melihat solusi untuk kasus tertentu:

Kita perlu menambahkan kolom dengan beberapa kode regional pelanggan yang menyelesaikan pembelian ke kisi pesanan. Selain itu, administrator toko harus memiliki kemungkinan untuk memfilter pesanan menurut kolom yang baru ditambahkan ini.

Ini mungkin tampak mudah, tetapi ada beberapa hal yang perlu diperhatikan. Misalnya, pembeli yang melakukan pembelian mungkin tidak memiliki alamat pengiriman dalam hal pesanan virtual. Atau, bagaimana kita akan membuat daftar daerah? Semua ini harus dipertimbangkan ketika turun ke pembangunan. Berdasarkan pertanyaan yang disebutkan sebelumnya, mari kita asumsikan:

• produk virtual tidak akan memiliki wilayah pengiriman ('null'). Ini akan membantu Anda memilihnya berdasarkan parameter ini,
• wilayah akan terdaftar dan melihat kode tanpa mengubahnya menjadi label, sama seperti di Magento 2 default.

*Harap diperhatikan bahwa di akhir artikel ini akan ada tautan ke modul dengan akses terbuka di GitHub. Padahal, saya menyertakan tautan dalam paragraf ini jika Anda tidak berhasil menyelesaikan artikel ini: https://github.com/mageworx/articles-extended-orders-grid.

Namun, terlepas dari kurangnya waktu, saya mendorong Anda untuk terus membaca.?

Jadi, untuk menambahkan kolom baru ke kisi pesanan, Anda perlu:

1. Buat modul baru

Pertama, mari kita putuskan modul dan nama vendornya. Yah, saya tidak perlu memilih nama vendor itu MageWorx (seolah-olah saya punya pilihan, bercanda). Saya masih bisa memilih nama modul. Biarlah ExtendedOrdersGrid (btw kami memiliki ekstensi nama yang sama untuk Magento 2). Faktanya, menggunakan MageWorx sebagai nama vendor di namespace tidak memberi Anda hak untuk meminta dukungan gratis. Bagaimanapun, jika anggota tim pendukung kami memiliki akhir pekan yang baik, Anda masih dapat mencobanya pada hari Senin.?

Mari buat direktori berikut: `app/code/MageWorx/ExtendedOrdersGrid`. Untuk mendaftarkan modul, kita memerlukan beberapa file standar:

 > registration.php php <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'MageWorx_ExtendedOrdersGrid', __DIR__ ); > composer.json json { "name": "mageworx/module-extended-orders-grid", "description": "Extended Orders Grid Extension", "require": { "magento/module-ui" : ">=100.1.0 < 102", "magento/module-sales" : ">=100.0.0 <103" }, "type": "magento2-module", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ], "psr-4": { "MageWorx\\ExtendedOrdersGrid\\": "" } } } > etc/module.xml xml <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="MageWorx_ExtendedOrdersGrid" setup_version="1.0.0"> <sequence> <module name="Magento_Sales"/> <module name="Magento_Ui"/> </sequence> </module> </config>

Penting untuk dicatat bahwa saya telah memotong hak cipta yang ditambahkan di IDE saya secara otomatis. Dengan demikian, Anda dapat menggunakan kode ini tanpa kesulitan. ?

Kemudian, jalankan beberapa perintah:

 > sudo -u www-data php bin/magento module:enable MageWorx_ExtendedOrdersGrid > sudo -u www-data php bin/magento setup:upgrade

Dan voila! Sekarang, modul kita bisa dilihat di Magento 2! Oh, jika Anda bekerja di server jauh, jangan lupa untuk mentransfer file sebelum pengujian.

2. Tambahkan kolom ke kisi

Kemudian, menggunakan UI Magento 2, mari tambahkan kolom baru ke kisi standar. Untuk itu, buat file:

 > view/adminhtml/ui_component/sales_order_grid.xml

dengan isi sebagai berikut (artinya akan kita bahas lebih lanjut):

 xml <?xml version="1.0" encoding="UTF-8"?> <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <columns name="sales_order_columns"> <column name="code"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item> <item name="label" xsi:type="string" translate="true">Region Code</item> <item name="sortOrder" xsi:type="number">60</item> <item name="align" xsi:type="string">left</item> <item name="dataType" xsi:type="string">text</item> <item name="visible" xsi:type="boolean">true</item> <item name="filter" xsi:type="string">text</item> </item> </argument> </column> </columns> </listing>

Di sini, Anda perlu menentukan bahwa nama tersebut tidak diambil dari mana pun. Bagi developer berpengalaman, ini jelas, tetapi bagi yang baru mengenal Magento 2, saya akan menambahkan beberapa penjelasan di akhir paragraf ini.

Kami menggunakan simpul `kolom` standar untuk menambahkan kolom ke kisi, di mana kolom baru di bawah nama 'kode' akan ditambahkan juga. Selanjutnya, mari kita tulis atribut kolom kita di grid:

1) Komponen . Ini adalah kelas JS yang bertanggung jawab untuk pembuatan dan pemrosesan kolom ini. Itu terletak di modul Magento_Ui di alamat berikut:

`vendor/magento/module-ui/view/base/web/js/grid/columns/column.js`

Bahkan, jika Anda seorang pengembang yang penasaran, lihat juga realisasi lainnya. Ada banyak hal menarik di luar sana.

2) Label. Ini adalah baris dengan nama kolom, yang akan ditampilkan kepada pengguna akhir. Jangan lupa untuk menambahkannya ke file lokalisasi i18n, jika properti `translate` telah dibuat. ?

3) Urutkan Urutan. Ini adalah posisi kolom di grid. Jika modul telah diinstal pada Magento 2 yang belum pernah dikelola oleh administrator toko, itu akan berpengaruh. Jika tidak, pada Magento 2 yang sedang digunakan, kolom kita akan ditambahkan ke akhir daftar apa pun yang kita lakukan.

4) Sejajarkan. Ini berarti menyelaraskan konten kolom. Saya kira itu jelas.

5) Tipe Data. Ini adalah tipe data yang akan kita manipulasi. Dalam kasus kami, itu hanyalah sebaris teks. Namun, itu bisa berupa daftar atau nilai Boolean, serta angka jika kita berbicara tentang kuantitas produk, misalnya.

6) Terlihat. Ini tidak lain adalah visibilitas kolom meskipun banyak tergantung pada apakah grid sebelumnya digunakan atau tidak.

Semua data tentang kisi disimpan di database Magento, di tabel `ui_bookmark`. Jadi, jika tidak ada catatan tentang kolom kami untuk grid yang dimodifikasi pada saat instalasi modul kami, jangan mengharapkan keajaiban.

7) Saring . Ini adalah jenis filter. Di sini, kami menetapkan bahwa pemfilteran harus dilakukan seperti teks biasa. Saat menjalankan kode, itu akan berubah menjadi kondisi MySQL `LIKE %value%`.

penjelasan

Untuk mempersingkat cerita, nama komponen UI yang diperluas harus sesuai dengan nama aslinya. Dalam kasus kami, ini adalah `vendor/magento/module-sales/view/adminhtml/ui_component/sales_order_grid.xml`, dan dihitung dari root modul `view/adminhtml/ui_component/sales_order_grid.xml`.

Kisi UI itu sendiri ditambahkan ke pengontrol yang diperlukan menggunakan tata letak `vendor/magento/module-sales/view/adminhtml/layout/sales_order_index.xml` seperti berikut:

 xml <?xml version="1.0"?> <!-- /** * Copyright Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <update handle="styles"/> <body> <referenceContainer name="content"> <uiComponent name="sales_order_grid"/> </referenceContainer> </body> </page>

Ini berarti *tambahkan komponen UI ini di bawah nama `sales_order_grid` ke konten halaman* seperti halnya pemblokiran. Namun, alih-alih blok, kami memiliki `uiComponent` dengan atribut dan batasannya.

Sekarang, bersihkan cache Magento 2 menggunakan perintah berikut:

 > sudo -u www-data php bin/magento cache:clean config

dan periksa hasilnya di kisi pesanan:

3. Tambahkan data ke kolom

Anda mungkin telah memperhatikan bahwa kolom telah muncul, tetapi isinya tidak seperti yang diharapkan ... tidak ada data yang ditampilkan di sana sama sekali. Cukup adil, kami tidak menambahkan apa pun, jadi tidak ada konten di sana.

Mari kita mulai menulis plugin sederhana yang akan membantu Anda mengisi kolom kami. Untuk itu, mari kita tangkap kueri kumpulan kisi, buat gabungan di dalam tabel dan kisi yang diperlukan. Plugin akan terlihat seperti berikut:

 > app/code/MageWorx/ExtendedOrdersGrid/Plugin/AddDataToOrdersGrid.php

 php <?php namespace MageWorx\ExtendedOrdersGrid\Plugin; /** * Class AddDataToOrdersGrid */ class AddDataToOrdersGrid { /** * @var \Psr\Log\LoggerInterface */ private $logger; /** * AddDataToOrdersGrid constructor. * * @param \Psr\Log\LoggerInterface $customLogger * @param array $data */ public function __construct( \Psr\Log\LoggerInterface $customLogger, array $data = [] ) { $this->logger = $customLogger; } /** * @param \Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory $subject * @param \Magento\Sales\Model\ResourceModel\Order\Grid\Collection $collection * @param $requestName * @return mixed */ public function afterGetReport($subject, $collection, $requestName) { if ($requestName !== 'sales_order_grid_data_source') { return $collection; } if ($collection->getMainTable() === $collection->getResource()->getTable('sales_order_grid')) { try { $orderAddressTableName = $collection->getResource()->getTable('sales_order_address'); $directoryCountryRegionTableName = $collection->getResource()->getTable('directory_country_region'); $collection->getSelect()->joinLeft( ['soa' => $orderAddressTableName], 'soa.parent_id = main_table.entity_id AND soa.address_type = \'shipping\'', null ); $collection->getSelect()->joinLeft( ['dcrt' => $directoryCountryRegionTableName], 'soa.region_id = dcrt.region_id', ['code'] ); } catch (\Zend_Db_Select_Exception $selectException) { // Do nothing in that case $this->logger->log(100, $selectException); } } return $collection; } }

Ini akan merujuk ke kelas berikut:

`Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory`

 > etc/adminhtml/di.xml xml <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <!-- Plugins --> <!-- Adds additional data to the orders grid collection --> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <plugin name="mageworx_extended_orders_grid_add_data_to_orders_grid" type="MageWorx\ExtendedOrdersGrid\Plugin\AddDataToOrdersGrid" sortOrder="10" disabled="false"/> </type> </config>

Plugin berjalan dengan cara berikut:

Karena akan menangkap semua koleksi, mari tambahkan validasi ke tabel `sales_order_grid` yang diperlukan. Ketika ditemukan dan Magento mencoba untuk mendapatkan data tentang ini, kami menggabungkan tabel dengan alamat `sales_order_address` by`order_id` (`entity_id` di tabel `sales_order_grid` dan `parent_id` di tabel `sales_order_address` ( `soa` alias)). Sekarang, kami memiliki akses ke data alamat pengiriman pesanan pelanggan, yang dapat kami gunakan untuk menentukan `region_id`. Itu terletak sebagai nomor di tabel `sales_order_address`. Angka ini sesuai dengan indeks dalam tabel `directory_country_region` (`dcrt` alias). Karena kita membutuhkan kode regional ini dari tabel seperti yang disebutkan di atas, mari kita sambungkan kolom 'kode'. Kolom yang tepat ini akan mendapatkan output (sesuai dengan nilai `column` di `sales_order_grid.xml`).

Kemudian, bersihkan cache:

 > sudo -u www-data php bin/magento cache:clean config

Masuk ke panel admin ke kisi pesanan. Jika semuanya telah dilakukan dengan benar, kami akan melihat kode regional kami ditampilkan:

Akses gratis ke modul tersedia di GitHub: https://github.com/mageworx/articles-extended-orders-grid.

Catatan penting!

Untuk menambahkan data apa pun ke kolom ini, diperlukan kolom 'nama_kolom_anda' dan semua data yang diperlukan ditambahkan saat membuat koleksi. Artinya, Anda perlu melakukan sesuatu yang berbeda mengganti nama tabel dan menulis gabungan Anda sendiri. Juga, jangan lupa untuk mengedit nama kolom di file `sales_order_grid.xml` jika diperlukan.

Bagaimana Cara Menambahkan Kolom Ekstra?

Jika Anda memutuskan untuk menambahkan satu kolom lagi, ikuti panduan yang dijelaskan dalam komit Git berikut: https://github.com/mageworx/articles-extended-orders-grid/commit/d31c364a25ce493ab64731c5ca0481e146dbbac3

Di sana, kami telah menambahkan kolom telephone ke kisi dari tabel sales_order_address untuk alamat jenis shipping . Seperti yang Anda lihat dalam kode komit, tidak diperlukan modifikasi kode yang signifikan.

Selain itu, kolom ini dapat berhasil diekspor dari antarmuka standar 'order grid'.

Berikut adalah tampilan grid dengan kolom 'telepon':

Pada tangkapan layar di bawah, Anda dapat melihat pesanan yang sama diekspor ke file .csv:

[Update] Bagaimana Cara Menambahkan Kolom dengan Info Item Pesanan?

Seperti yang Anda ketahui, semua pesanan memiliki item qty, mulai dari satu hingga melebihi jumlah (ya, impian pedagang). Tapi bagaimana kita bisa menampilkan info itu di kisi pesanan untuk memulai pencarian atau menjalankan analisis dengan lebih mudah?

Kami tidak bisa hanya menambahkan kolom seperti yang kami lakukan sebelumnya karena kami hanya mendapatkan satu nama produk atau SKU pada setiap baris dalam kasus itu. Atau, catatan pesanan akan digandakan… Kami juga tidak membutuhkan kekacauan itu.

Jadi, saya akan mencoba menjelaskan bagaimana kita bisa melakukannya dengan cara yang benar (menurut saya).

Misalkan kita membutuhkan kolom data 'Nama Produk' di kisi pesanan.

Pertama, mari tambahkan kolom baru dalam definisi sales_order_grid , seperti yang kita lakukan sebelumnya:

 <columns> .... <column name="name"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item> <item name="filter" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Product Name</item> <item name="visible" xsi:type="boolean">false</item> <item name="sortOrder" xsi:type="number">70</item> </item> </argument> </column> </columns>

Kemudian, yang kita butuhkan hanyalah membuat kueri yang tepat untuk kolom baru kita. Itu harus berisi nama setiap produk yang dibeli dalam urutan itu, dipisahkan dengan koma, dengan kemampuan untuk mencari berdasarkan nilai kolom itu, dll. Mari buat metode baru di plugin mageworx_extended_orders_grid_add_data_to_orders_grid :

 /** * Adds products name column to the orders grid collection * * @param OrderGridCollection $collection * @return OrderGridCollection */ private function addProductsNameColumn(OrderGridCollection $collection): OrderGridCollection { return $collection; }

dan beri nama metode itu di dalam badan metode asli:

 if ($collection->getMainTable() === $collection->getResource()->getTable('sales_order_grid')) { try { $orderAddressTableName = $collection->getResource()->getTable('sales_order_address'); ... // Add product's name column $this->addProductsNameColumn($collection); } catch (\Zend_Db_Select_Exception $selectException) { ...

Untuk mendapatkan data yang diinginkan dalam satu kolom, kita harus membuat sub-pilihan dengan dua kolom: order_id dan name (nama produk) di pilih individu, yang dapat digabungkan ke koleksi utama nanti:

 // Get original table name $orderItemsTableName = $collection->getResource()->getTable('sales_order_item'); // Create new select instance $itemsTableSelectGrouped = $collection->getConnection()->select(); // Add table with columns which must be selected (skip useless columns) $itemsTableSelectGrouped->from( $orderItemsTableName, [ 'name' => new \Zend_Db_Expr('GROUP_CONCAT(DISTINCT name SEPARATOR \',\')'), 'order_id' => 'order_id' ] ); // Group our select to make only one column for one order $itemsTableSelectGrouped->group('order_id');

Klarifikasi:

• $collection->getConnection()->select() akan membuat instance Magento\Framework\Db\Select baru.
  Ini diperlukan karena kami tidak dapat menggunakan pilihan asli dari koleksi karena memiliki data sendiri di dalamnya, dan modifikasi apa pun akan menyebabkan kesalahan.
• kolom name harus memiliki semua nama produk untuk pesanan yang ditentukan, yaitu, harus dikelompokkan menggunakan ekspresi \Zend_Db_Expr('GROUP_CONCAT(DISTINCT name SEPARATOR \',\')') . Untuk tujuan itu, kami menambahkan group('order_id') ke pilih nanti. Tanpa pengelompokan, kita tidak dapat menggunakan fungsi GROUP_CONCAT .

Sekarang, kita dapat menambahkan sub-pilihan kita ke koleksi utama dan itu akan menjadi akhir logis dari metode addProductsNameColumn :

 // Add our sub-select to main collection with only one column: name $collection->getSelect() ->joinLeft( ['soi' => $itemsTableSelectGrouped], 'soi.order_id = main_table.entity_id', ['name'] ); return $collection;

Klarifikasi:

• soi adalah alias untuk tabel semu kami.
• order_id adalah kunci, yang kami gunakan untuk menghubungkan tabel utama kami (grid) ke data item pesanan.
• ['name'] adalah satu-satunya kolom, yang ditambahkan ke hasil, karena kami tidak memerlukan informasi lain.

Hasil akhir tersedia di repositori resmi dari contoh itu.
Berikut tautan ke komit spesifik: https://github.com/mageworx/articles-extended-orders-grid/commit/0cdffcd4ba66cacb2fd857ba7626fdbcfc0d6fe3

Begini tampilan kolom itu di host pementasan kami:

Dan berikut adalah hasil dari export (CSV):

Berikut tampilan kueri saat mencoba menelusuri pesanan dengan produk “Hitam” (di host pengembang kami):
PILIH main_table .*, soat . telephone , dcrt . code , soi . name FROM sales_order_grid AS main_table
KIRI GABUNG sales_order_address AS soat ON soat.parent_id = main_table.entity_id AND soat.address_type = 'shipping'
KIRI GABUNG directory_country_region AS dcrt ON soat.region_id = dcrt.region_id
LEFT JOIN (SELECT GROUP_CONCAT(DISTINCT name SEPARATOR ',') AS name , sales_order_item order_id sales_order_item GROUP BY order_id ) AS soi ON soi.order_id = main_table.entity_id
MANA soi . name SEPERTI '% Hitam%'

Jelas, ini bukan cara tercepat untuk menghasilkan data. Namun, itu mungkin yang paling mudah. Cara terbaik adalah mengumpulkan data tentang nama produk di kolom terpisah dari tabel terpisah (order_id, product_name) dan menambahkan tabel ini tanpa pengelompokan tambahan dan sub-pilihan apa pun.

Untuk tujuan itu, kami menambahkan grup ('order_id') ke pilihan kami (di akhir kode metode).
Pilih berarti elemen.
Grup berarti metode pilih.

Saya kira itu saja. Jika Anda memiliki pertanyaan atau permintaan, silakan tinggalkan komentar di kolom komentar.