How To Add Item Sku's and Product Names To Magento 2.2.7 Sales Order Grid

Question

I have modified the order grid layout by adding this code in:

vendor/magento/module-sales/view/adminhtml/ui_components/salesordergrid.xml

<column name="order_items" class="Magento\Sales\Ui\Component\Listing\Column\Items">
 <settings>
 <filter>textRange</filter>
 <label translate="true">Items</label>
 </settings>
 </column>

The "item" column is displaying now .

I created a class called

Magento\Sales\Ui\Component\Listing\Column\Items.php

See Below code:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magento\Sales\Ui\Component\Listing\Column;
use Magento\Framework\Escaper;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Sales\Model\ResourceModel\Order\Status\CollectionFactory;
/**
 * Class Items
 */
class Items extends Column
{
 /**
 * @var Escaper
 */
 protected $escaper;
 /**
 * @param ContextInterface $context
 * @param UiComponentFactory $uiComponentFactory
 * @param Escaper $escaper
 * @param array $components
 * @param array $data
 */
 public function __construct(
 ContextInterface $context,
 UiComponentFactory $uiComponentFactory,
 Escaper $escaper,
 array $components = [],
 array $data = []
 ) {
 $this->escaper = $escaper;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 /**
 * Prepare Data Source
 *
 * @param array $dataSource
 * @return array
 */
 public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as & $item) {
 $item[$this->getData('name')] = "test";/*nl2br($this->escaper->escapeHtml($item[$this->getData('name')]));*/
 }
 }
 return $dataSource;
 }
}

How do I get access to the product data for the current order to display it in the column ?

Right now I just have a place holder string : "test" outputted for every row.

$item[$this->getData('name')] = "test";

What class/method do I need to call to output the product data instead e.g.

$item[$this->getData('name')] = function that returns order product data .

Answer 1

You can try this code in your PHP:

private $orderCollectionFactory;
public function __construct(
 ContextInterface $context,
 UiComponentFactory $uiComponentFactory,
 Escaper $escaper,
 \Magento\Sales\Model\ResourceModel\Order\CollectionFactory $orderCollectionFactory,
 array $components = [],
 array $data = []
) {
 $this->orderCollectionFactory = $orderCollectionFactory;
 $this->escaper = $escaper;
 parent::__construct($context, $uiComponentFactory, $components, $data);
}
public function prepareDataSource(array $dataSource)
{
 if (isset($dataSource['data']['items'])) {
 $orderIds = [];
 foreach ($dataSource['data']['items'] as $item) {
 $orderIds[] = $order->getId();
 }
 $orderCollection = $this
 ->orderCollectionFactory
 ->create()
 ->addFieldToFilter('entity_id', ['in' => $orderIds])
 ;
 foreach ($dataSource['data']['items'] as & $item) {
 $order = $orderCollection->getItemById($item['entity_id']);
 $data = '<ul>';
 foreach ($order->getAllVisibleItems() as $orderItem) {
 $data .= '<li>' . $orderItem->getName() . ' (SKU: ' . $orderItem->getSku() . ')</li>';
 }
 $data .= '</ul>';
 $item[$this->getData('name')] = $data;
 }
 }
 return $dataSource;
}

You can modify the HTML code to fit your display inside foreach ($order->getAllVisibleItems() as $orderItem) loop.

Note that to display a HTML data you need to modify your XML and add <bodyImpl>ui/grid/cells/html</bodyImpl>.

• Rendy Eko Prastiyo: I'm not finished yet, I just accidentally clicked the submit button before finishing the code.
• Steve Bien-Aime: ok standing by , let me know when you are done . Thank you so much
• Rendy Eko Prastiyo: done, you can try it.
• Steve Bien-Aime: Thank you sir , trying now
• Steve Bien-Aime: 1 exception(s): It throws the exception : Exception #0 (Exception): Notice: Undefined variable: orderCollectionFactory in /home/119528.cloudwaysapps.com/afdsqjqxmc/public_html/production/vendor/magento/module-sales/Ui/Component/Listing/Column/Items.php on line 46 @Rendy Eko Prastiyo

Answer 2

enter image description here

I have already developed custom magento extension for this functionality. You can download from here

https://drive.google.com/drive/u/3/folders/1p_YQiyMS2Wzcm4ilET_qPhkZ6LPSEBhn

Answer 3

<column name="order_items" class="Harriswebworks\OrderAttribute\Ui\Component\Listing\Column\Items">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <!-- <item name="filter" xsi:type="string">textRange</item> -->
 <item name="label" xsi:type="string" translate="true">Items</item>
 </item>
 </argument> 
 </column>

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Harriswebworks\OrderAttribute\Ui\Component\Listing\Column;
use Magento\Framework\Escaper;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Sales\Model\ResourceModel\Order\Status\CollectionFactory;
/**
 * Class Items
 */
class Items extends Column
{
 /**
 * @var Escaper
 */
 protected $escaper;
 /**
 * @param ContextInterface $context
 * @param UiComponentFactory $uiComponentFactory
 * @param Escaper $escaper
 * @param array $components
 * @param array $data
 */
 public function __construct(
 ContextInterface $context,
 UiComponentFactory $uiComponentFactory,
 Escaper $escaper,
 \Magento\Sales\Model\ResourceModel\Order\CollectionFactory $orderCollectionFactory,
 array $components = [],
 array $data = []
 ) {
 $this->escaper = $escaper;
 $this->orderCollectionFactory = $orderCollectionFactory;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 /**
 * Prepare Data Source
 *
 * @param array $dataSource
 * @return array
 */
 public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 $orderIds = [];
 foreach ($dataSource['data']['items'] as & $item) { 
 $orderIds[] = $item['entity_id']; 
 }
 $orderCollection = $this->orderCollectionFactory->create()->addFieldToFilter('entity_id', ['in' => $orderIds]);
 foreach ($dataSource['data']['items'] as & $item) {
 $order = $orderCollection->getItemById($item['entity_id']);
 $data = '';
 foreach ($order->getAllVisibleItems() as $orderItem) {
 //$data .= $orderItem->getName() . ' (SKU: ' . $orderItem->getSku() . ")\n";
 $data .= $orderItem->getSku() . "\n";
 }
 
 $item[$this->getData('name')] = $data;
 } 
 }
 return $dataSource;
 }
}