Magento ๐Ÿฎ

Magento2 | PWA | GraphQL

ยป ยป ยป Add new Column about Product Informations with selected options in Magento admin Sales Order grid and also in fronend

Add new Column about Product Informations with selected options in Magento admin Sales Order grid and also in fronend

By

In this post i will show you how to add new column in Magento admin at sales order grid.




You can find complete module on Github at Salecto_Ordergrid

Lets start it by creating custom module.

Create folder in app/code/Salecto/Ordergrid

Add registration.php file in it:

?
1
2
3
4
5
6
7
8
<?php
/**
 * Copyright ยฉ  All rights reserved.
 * See COPYING.txt for license details.
 */
use Magento\Framework\Component\ComponentRegistrar;
 
ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Salecto_Ordergrid', __DIR__);
Add composer.json file in it:
?
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
     
{
    "name": "salecto/module-ordergrid",
    "description": "Display new column on sales order grid",
    "type": "magento2-module",
    "license": "OSL-3.0",
    "authors": [
        {
            "email": "info@mage2gen.com",
            "name": "Mage2Gen"
        },
        {
            "email": "vijaymrami@gmail.com",
            "name": "vijay rami"
        }
    ],
    "minimum-stability": "dev",
    "require": {},
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Salecto\\Ordergrid\\": ""
        }
    }
}
Add etc/module.xml file:
?
1
2
3
4
<?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="Salecto_Ordergrid" setup_version="1.0.3"/>
</config>

Now to add new column in magento admin Sales Order grid, we will modify sales_order_grid.xml file.

Add view/adminhtml/ui_component/sales_order_grid.xml file:
?
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0"?>
<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="product_name" class="\Salecto\Ordergrid\Ui\Component\Listing\Column\Products">
         <settings>
                <label translate="true">Products</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <sortable>false</sortable>
            </settings>
        </column>
    </columns>
</listing>
here we modify sales_order_columns node and add our custom column name and custom class.

Add Ui/Component/Listing/Column/Products.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<?php
namespace Salecto\Ordergrid\Ui\Component\Listing\Column;
 
use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;
use \Magento\Store\Model\StoreManagerInterface;
 
class Products extends Column
{
    /**
     * @var OrderRepositoryInterface
     */
    protected $_orderRepository;
    /**
     * @var SearchCriteriaBuilder
     */
    protected $_searchCriteria;
    /**
     * @var \Magento\Framework\View\Asset\Repository
     */
    protected $_assetRepository;
    /**
     * @var \Magento\Framework\App\RequestInterface
     */
    protected $_requestInterfase;
    /**
     * @var \Magento\Sales\Model\OrderFactory
     */
    protected $_orderFactory;
     
    /**
     * Products constructor.
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param OrderRepositoryInterface $orderRepository
     * @param \Magento\Framework\View\Asset\Repository $assetRepository
     * @param \Magento\Framework\App\RequestInterface $requestInterface
     * @param SearchCriteriaBuilder $criteria
     * @param \Magento\Sales\Model\OrderFactory $orderFactory
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        OrderRepositoryInterface $orderRepository,
        \Magento\Framework\View\Asset\Repository $assetRepository,
        \Magento\Framework\App\RequestInterface $requestInterface,
        SearchCriteriaBuilder $criteria,
        \Magento\Sales\Model\OrderFactory $orderFactory,
        array $components = [],
        array $data = []
    ) {
     
        $this->_orderRepository = $orderRepository;
        $this->_searchCriteria  = $criteria;
        $this->_assetRepository = $assetRepository;
        $this->_requestInterfase= $requestInterface;
        $this->_orderFactory    = $orderFactory;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
 
    public function prepareDataSource(array $dataSource)
    {
        //echo "<pre>";print_r($dataSource);exit;    
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $order  = $this->_orderRepository->get($item["entity_id"]);
                $products_info = $options = '';
                 
                foreach ($order->getAllVisibleItems() as $o_items)
                {
                     if($_options = $this->getSelectedOptions($o_items)) {
                            $options .= '<dt class="options">';
                                foreach ($_options as $_option) :
                                    $options .= '<dd>'.$_option['label'].'</dd><dd>'.$_option['value'].'</dd>';
                                endforeach;
                            $options .= '</dt>';
                        }
                      $products_info .= "<b>".$o_items->getName()."</b>
<b>".$o_items->getSku()."</b>
 
";
                }
                 
                $item['product_name'] =
                        "<div style='width: 100%;margin: 0 auto;text-align: left'>$products_info.$options</div>";
                //echo "<pre>";print_r($item['product_name']);exit;
            }
        }
        return $dataSource;
    }
     
    /*
     * get Configurable/Bundle selected options from Item object
     */
    public function getSelectedOptions($item){
     $result = [];
        $options = $item->getProductOptions();
        if ($options) {
            if (isset($options['options'])) {
                $result = array_merge($result, $options['options']);
            }
            if (isset($options['additional_options'])) {
                $result = array_merge($result, $options['additional_options']);
            }
            if (isset($options['attributes_info'])) {
                $result = array_merge($result, $options['attributes_info']);
            }
        }
        return $result;
    }   
}
To add extra column in my orders tab on front end we modify sales_order_history.xml file and add our custom column header and content there.

Add view/frontend/layout/sales_order_history.xml file:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <!-- This will add additional column header to order list -->
    <referenceBlock name="sales.order.history.extra.column.header">
        <block name="vendor.additional.column.header" template="Salecto_Ordergrid::extraColumn-header.phtml"/>
    </referenceBlock>
 
    <!-- You can access current order using $this->getOrder() inside the template "-->
    <referenceBlock name="sales.order.history.extra.container">
        <block name="vendor.additional.column.data" template="Salecto_Ordergrid::extraColumn.phtml"/>
    </referenceBlock>
</body>
</page>
To display this additional column we will add our template header and data file accordingly.

Add /view/frontend/templates/extraColumn-header.phtml file:
?
1
2
3
4
5
6
<?php
    /* @var $block \Magento\Sales\Block\Order\History\Container */
   ?>
   <th data-th="<?= $block->escapeHtml(__('Products')) ?>" class="col">
        <?= $block->escapeHtml("Products") ?>
   </th>
Add view/frontend/templates/extraColumn.phtml 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
<?php
    /* @var $block \Magento\Sales\Block\Order\History\Container */
  ?>
 
  <td data-th="<?= $block->escapeHtml(__('Products')) ?>" class="col">
    <?php
        $order = $block->getOrder();
        $products_info = $optionstxt = '';
        foreach ($order->getAllVisibleItems() as $o_items) {
            $products_info .= $o_items->getName()."
".$o_items->getSku()."
 
";
             
            if($o_items->getProductOptions()) {
            $result = [];
            $options = $o_items->getProductOptions();
            if ($options) {
                if (isset($options['options'])) {
                    $result = array_merge($result, $options['options']);
                }
                if (isset($options['additional_options'])) {
                    $result = array_merge($result, $options['additional_options']);
                }
                if (isset($options['attributes_info'])) {
                    $result = array_merge($result, $options['attributes_info']);
                }
            }
            $optionstxt .= "<dt class='options'>";
            foreach ($result as $_option) {
                    $optionstxt .= '<dd>'.$_option['label'].'</dd><dd>'.$_option['value'].'</dd>';
            }
            $optionstxt .= '</dt>';
            }
         }
         echo $products_info.$optionstxt;
    ?>
  </td>

Related Post:

0 Comments On "Add new Column about Product Informations with selected options in Magento admin Sales Order grid and also in fronend"

Back To Top