In Magento 2 we can customize the order grid with adding column and filter as well.
n today’s tutorial, we’ll add telephone no as a column in order grid. The next step is to create a new module.
Here are the namespace and module name :
Magemonkeys_CustomOrdersGrid
Create registration.php file
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Magemonkeys_CustomOrdersGrid', __DIR__ ); |
Create etc/module.xml file
|
1 2 3 4 5 6 7 8 9 |
<?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="Magemonkeys_CustomOrdersGrid" setup_version="1.0.0"> <sequence> <module name="Magento_Sales"/> <module name="Magento_Ui"/> </sequence> </module> </config> |
Create etc/adminhtml/di.xml file
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <plugin name="magemonkeys_custom_orders_grid" type="Magemonkeys\CustomOrdersGrid\Plugin\OrdersGrid" sortOrder="20" disabled="false"/> </type> </config> |
Create Plugin/OrdersGrid.php file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php namespace Magemonkeys\CustomOrdersGrid\Plugin; use Magento\Sales\Model\ResourceModel\Order\Grid\Collection as OrderGridCollection; class OrdersGrid { private $logger; public function __construct( \Psr\Log\LoggerInterface $customLogger, array $data = [] ) { $this->logger = $customLogger; } 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 { $orderAddressTable = $collection->getResource()->getTable('sales_order_address'); $collection->getSelect()->joinLeft( ['oat' => $orderAddressTable], 'oat.parent_id = main_table.entity_id AND oat.address_type = \'shipping\'', ['telephone'] ); } catch (\Zend_Db_Select_Exception $selectException) { $this->logger->log(100, $selectException); } } return $collection; } } |
Create view/adminhtml/ui_component/sales_order_grid.xml file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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="telephone"> <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">Telephone</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> |
after that we can enable the module by running a few commands:
php bin/magento module:enable Magemonkeys_CustomOrdersGrid
php bin/magento setup:upgrade
php bin/magento cache:clean
Now, you will able to see the telephone column in order grid.