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>.

Answer 2

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;
    }
}