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/OrdergridAdd registration.php file in it:
<?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:
{
"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:
<?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>
sales_order_grid.xml file.Add view/adminhtml/ui_component/sales_order_grid.xml file:
<?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>sales_order_columns node and add our custom column name and custom class.Add Ui/Component/Listing/Column/Products.php file:
<?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><br/><b>".$o_items->getSku()."</b><br/><br/>";
}
$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:
<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:
<?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:
<?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()."<br/>".$o_items->getSku()."<br/><br/>";
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>
Tag :
Magento2,
Magento2 Extensions
0 Comments On "Add new Column about Product Informations with selected options in Magento admin Sales Order grid and also in fronend"